He estado entrevistando durante años y años, y encontré un fenómeno extraño: muchas empresas de Internet han resistido el impacto de la epidemia durante tres años, pero no pudieron aguantar cuando se desató la epidemia. Muchas grandes fábricas están despidiendo trabajadores en lotes: Silicon Valley, Beijing Byte, Disney China, etc. Mi amigo en Beijing no ha podido encontrar un trabajo adecuado desde finales de año. Por supuesto, no es que no pueda encontrar un trabajo adecuado, y su salario se ha desplomado, y la brecha es demasiado grande.
Estaba haciendo una entrevista para un puesto de desarrollo front-end. Todo el mundo sabe que en los últimos años ha habido mucha gente de instituciones de formación y ya han existido programadores en la calle. Además, la empresa está tensa debido a la epidemia, despidos y la situación laboral es grave. Si se trata solo de algunos conocimientos básicos de front-end: como: programas pequeños, Uniapp, Vue, React y otras habilidades básicas ya no pueden satisfacer la creciente demanda, y el valor obviamente no existe.
Ahora que el país está promoviendo vigorosamente la digitalización, muchas tecnologías de alta tecnología han comenzado a entrar en el umbral de las pantallas gigantes digitales. Durante el proceso de la entrevista, descubrirá que cosas como la conservación del agua, el transporte y las ciudades inteligentes han comenzado a desarrollarse en 3D, y las capacidades técnicas requeridas también están cambiando cada día que pasa. Estos pueden estar muy maduros en el extranjero, pero hay relativamente pocos documentos relevantes en China, como WebGL, Cesium, Openlayers, etc. Si domina estas técnicas, sin duda contribuirá a su camino de la entrevista, especialmente en los últimos años, definitivamente es un arma para el aumento de sueldo.
Este artículo comienza con Cesium, para desvelar el velo de estas herramientas de aumento salarial una por una.

Plataforma de gestión digital
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
Vue sistema de permisos
dirección de blog personal del caso

1. ¿Qué es el cesio?

Cesium es una biblioteca javascript multiplataforma y multinavegador para mostrar globos y mapas en 3D.
Cesium usa WebGL para gráficos acelerados por hardware y no requiere ningún complemento, pero el navegador debe ser compatible con WebGL; Cesium es un programa de código abierto basado en la licencia Apache2.0. Es gratis para uso comercial y no comercial.
Sitio web oficial de cesio
Github

2. ¿Qué puede hacer el cesio?

Soporta visualización de mapa 2D, 2.5D, 3D
Puede dibujar varias figuras geométricas, áreas resaltadas, admite la importación de imágenes e incluso modelos 3D y otras pantallas de visualización de datos.
Se puede usar para la visualización de datos dinámicos y brinda un buen soporte táctil, compatible con la mayoría de los navegadores y dispositivos móviles.
Cesium también es compatible con la visualización dinámica de datos basada en el eje del tiempo

3. Instalación

Debe instalar node.js por adelantado (con el administrador de paquetes npm), puede configurar Taobao mirror (cnpm) según sus necesidades

# 安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org

Si el proyecto está construido, puede instalar cesium con el siguiente comando

# 安装 cesium
npm install cesium

4. Construcción del entorno

4.1 descargar

Si no lo compila y solo desea aprender, puede obtener el código y compilar el entorno de las siguientes maneras:

Clona el código en github a través del comando git (es posible que algunas funciones solo estén disponibles en sucursales)

git clone https://github.com/AnalyticalGraphicsInc/cesium

inserte la descripción de la imagen aquí

Por razones bien conocidas, aquí está el código de extracción de la dirección de la nube de Baidu (nota: no es el código más reciente): fgsh
Si puede resolver el problema de la red, también puede ir al sitio web oficial para descargar

4.2 correr

Ingrese al directorio del proyecto, ejecute el siguiente comando para cargar dependencias y ejecutar el servicio

# 安装依赖
npm install

# 启动服务
node server

Abra el navegador, ingrese http://localhost:8080, verá la siguiente interfaz

Nota: El navegador utilizado debe ser compatible con WebGL, y aquí se recomienda el navegador Chrome.

4.3 configuración

Si desea utilizar el acceso IP de red, debe modificar el archivo en server.js

var server = app.listen(argv.port, argv.public ? undefined : 'localhost', function() { 
	// ...
})

cambiado a

var server = app.listen(argv.port, argv.public ? undefined : '', function() { 
	// ...
})

Se recomienda utilizar el complemento editor VSCode + glTF Tools para el desarrollo.

5. ¿Cómo aprender Cesio?

De manera similar a las bibliotecas de gráficos de visualización como ECharts y G2 Plot, en primer lugar, necesitamos saber qué puede hacer.

Revise todos los ejemplos en la caja de arena y sepa qué efecto tienen.
Al personalizar la función del proyecto, busque el código de muestra relevante (lo mejor es entenderlo) y modifique el código del módulo correspondiente a través de la API correspondiente
Lo mejor es hacer un estudio profundo de WebGL
Comience su viaje en el proyecto Cesium, creo que se volverá cada vez más competente (afilar un cuchillo no es un leñador)

6. Construye HolaMundo

En el directorio de la letra de la unidad correspondiente, cree una nueva carpeta y asígnele el nombre del directorio del proyecto.
Copie la carpeta Build en el código fuente de cesio en este directorio de proyecto
Cree el archivo HelloWorld.html en el directorio del proyecto, copie el código fuente de HelloWord.html en el directorio de aplicaciones del código fuente de cesio en el archivo actual y modifique las rutas css y js importadas a los archivos en el directorio de compilación del proyecto actual.
Inicie el servicio a través de complementos relacionados con VSCode (se recomienda Live Server, por supuesto, también puede elegir herramientas como: PHP, Node, IIS y otras herramientas para iniciar el servicio), ejecute el archivo HelloWorld.html y podrá ver la página de tierra familiar.

7. Controles de interfaz

7.1 Introducción de control

inserte la descripción de la imagen aquí
1. Geocodificador: Herramienta de búsqueda de ubicación, después de encontrarla, apuntará la lente a la dirección encontrada y usará el mapa de Bing de forma predeterminada. 2.
Botón de inicio: Vuelva a la posición inicial
del ángulo de visión. 3. Selector de modo de escena : Elija el modo de ángulo de visión, hay tres: 3D, 2D, Columbus View (CV)
4. Selector de capa base: selector de capa, seleccione el servicio de mapas y el servicio de terreno que se mostrarán
5. Botón de ayuda de navegación: botón de ayuda de navegación , muestra la ayuda de control de mapa predeterminada
6. Animación: dispositivo de animación, controla la velocidad de reproducción de la animación de vista
7. Línea de tiempo: línea de tiempo, que indica la hora actual y permite a los usuarios saltar a una hora específica
8. Visualización de créditos: Visualización de derechos de autor, mostrando atribución de datos, requerido
9. Botón de pantalla completa: botón de pantalla completa

7.2 Ocultar elementos en la interfaz

Al desarrollar su propio proyecto, a veces necesita personalizar la interfaz, lo que requiere ocultar algunos elementos en la interfaz. Echemos un vistazo a la descripción de cada elemento. Debe crear un nuevo proyecto y luego usar la herramienta JS o CSS Perform
inserte la descripción de la imagen aquí
. mostrar ocultar control

Control vía CSS

 /* 不占据空间，无法点击 */
/* 右上角按钮组 */
.cesium-viewer-toolbar,
/* 左下角动画控件 */
.cesium-viewer-animationContainer,
/* 时间线 */
.cesium-viewer-timelineContainer,
/* logo信息 */
.cesium-viewer-bottom {
        display: none;
}

/* 全屏按钮 */
.cesium-viewer-fullscreenContainer{
	position: absolute; top: -999em;
}

Nota: El botón de pantalla completa no se puede ocultar con display:none, porque el estilo en línea del control de botón generado se establece con la propiedad de visualización, que sobrescribirá la propiedad css importada.<div class="cesium-viewer-fullscreenContainer" style="display: block;">...</div>

Control a través de JS
Los widgets predeterminados en la interfaz se pueden cerrar configurando las propiedades correspondientes al inicializar el Visor. Los métodos de cierre de los widgets predeterminados en la interfaz se enumeran a continuación, y hay muchas propiedades adicionales que se pueden ver en la ayuda documentación.

<div id="credit"></div>
var viewer = new Cesium.Viewer('cesiumContainer',{
    geocoder:false,
    homeButton:false,
    sceneModePicker:false,
    baseLayerPicker:false,
    navigationHelpButton:false,
    animation:false,
    creditContainer:"credit",
    timeline:false,
    fullscreenButton:false,
    vrButton:false,
    // skyBox : new Cesium.SkyBox({
    //     sources : {
    //     positiveX : 'stars/TychoSkymapII.t3_08192x04096_80_px.jpg',
    //     negativeX : 'stars/TychoSkymapII.t3_08192x04096_80_mx.jpg',
    //     positiveY : 'stars/TychoSkymapII.t3_08192x04096_80_py.jpg',
    //     negativeY : 'stars/TychoSkymapII.t3_08192x04096_80_my.jpg',
    //     positiveZ : 'stars/TychoSkymapII.t3_08192x04096_80_pz.jpg',
    //     negativeZ : 'stars/TychoSkymapII.t3_08192x04096_80_mz.jpg'
    //     }
    // })
});

[Programación de cesio Parte 1] Descripción general, construcción del entorno, introducción a la interfaz