MapConductorCesium einrichten
Schritte zur Verwendung von Cesium im Web über MapConductor. Wählen Sie dies aus, wenn Sie eine echte Erdkugel in 3D anzeigen möchten. Eine Einstellung ist erforderlich, um die statischen Assets von cesium in den Build einzubeziehen.
Bevor Sie beginnen
Installieren
cesium ist im Paket enthalten.
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-for-cesiumStylesheet laden
Wird einmal im Einstiegspunkt der App geladen. Wenn Sie dies vergessen, gehen die Kartenposition und das Aussehen der Steuerelemente verloren.
import '@mapconductor/react-for-cesium/style.css';
Statische Cesium-Assets ausliefern
Cesium lädt zur Laufzeit statische Dateien wie Workers, Assets, Widgets und ThirdParty. Sie müssen diese in den Bereitstellungspfad kopieren und Cesium über `CESIUM_BASE_URL` den Speicherort mitteilen. Die Beispielanwendung (`examples/basic/vite.config.ts`) ist ein praktisches Beispiel für diese Konfiguration.
// 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/'),
}PRÜFEN
Was Sie sehen sollten
Wenn der Erdglobus angezeigt wird, sind Sie fertig.
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>
);
}Kartendesigns
CesiumDesign ist eine Konstante, die den ImageryProvider von Cesium umschließt.
Fehlerbehebung
404-Fehler für Worker oder Assets in der Konsole
- Überprüfen Sie das Kopieren der statischen Assets und die Einstellung von `CESIUM_BASE_URL`. Cesium ruft diese zur Laufzeit ab.
Bündel ist groß
- cesium ist eine große Bibliothek. Extrahieren Sie nur Bildschirme, die eine 3D-Anzeige benötigen, in einen dynamischen Import.
Karte wird während der Entwicklung doppelt initialisiert
- React StrictMode führt Effekte zweimal aus. Da jeder Provider dies erkennt und einen davon verwirft, müssen Sie StrictMode nicht entfernen.
Weiter
Da Cesium eine echte 3D-Kamera besitzt, werden Neigung und Peilung direkt übernommen. Das Verhalten unterscheidet sich von Pseudo-3D bei Leaflet oder OpenLayers.