MapConductorConfigurar Cesium
Pasos para usar Cesium en la web desde MapConductor. Seleccione esto cuando desee mostrar un globo terráqueo real en 3D. Se requiere una configuración para incluir los activos estáticos de cesium en la compilación.
Antes de empezar
Instalar
cesium está incluido en el paquete.
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-for-cesiumCargar hoja de estilos
Se carga una sola vez en el punto de entrada de la aplicación. Si olvida esto, la posición del mapa y la apariencia de los controles se romperán.
import '@mapconductor/react-for-cesium/style.css';
Entregar activos estáticos de Cesium
Cesium carga archivos estáticos como Workers, Assets, Widgets y ThirdParty en tiempo de ejecución. Debe copiarlos en la ruta de implementación e indicar a Cesium su ubicación mediante `CESIUM_BASE_URL`. La aplicación de ejemplo (`examples/basic/vite.config.ts`) es un ejemplo práctico de esta configuración.
// Copy node_modules/cesium/Build/Cesium/{Workers,Assets,Widgets,ThirdParty}
// into your output directory, then tell Cesium where they live:
define: {
CESIUM_BASE_URL: JSON.stringify('/cesiumStatic/'),
}VERIFICAR
Lo que deberías ver
Si aparece el globo terráqueo, ha terminado.
import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { CesiumDesign, CesiumMapView, useCesiumMapViewState } from '@mapconductor/react-for-cesium';
import '@mapconductor/react-for-cesium/style.css';
const TOKYO = createGeoPoint({ latitude: 35.6812, longitude: 139.7671 });
export function CesiumMap() {
const state = useCesiumMapViewState({
mapDesignType: CesiumDesign.Default,
cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});
const [markerState] = useState(() => createMarkerState({ id: 'tokyo', position: TOKYO }));
return (
<CesiumMapView state={state} style={{ height: 480 }}>
<Marker state={markerState} />
</CesiumMapView>
);
}Diseños de mapa
CesiumDesign es una constante que envuelve el ImageryProvider de Cesium.
Solución de problemas
Aparecen errores 404 de Worker o assets en la consola
- Verifique la copia de activos estáticos y la configuración de `CESIUM_BASE_URL`. Cesium las buscará en tiempo de ejecución.
El paquete es grande
- cesium es una biblioteca grande. Extraiga solo las pantallas que requieren visualización 3D a una importación dinámica.
El mapa se inicializa dos veces durante el desarrollo
- React StrictMode ejecuta los efectos dos veces. Como cada proveedor detecta esto y descarta uno, no es necesario eliminar StrictMode.
Siguiente
Dado que Cesium tiene una cámara 3D real, la inclinación y el rumbo se reflejan directamente. El comportamiento es diferente al pseudo-3D de Leaflet u OpenLayers.