MapConductorArcGIS einrichten
So verwenden Sie ArcGIS im Web mit MapConductor. @arcgis/core ist im Paket enthalten und Esri-Theme-CSS wird vom Paket geladen.
Bevor Sie beginnen
Installieren
@arcgis/core ist im Paket enthalten. Das Esri-Theme-CSS wird auch auf der Ansichtsseite geladen, daher müssen Sie es nicht selbst importieren.
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-for-arcgisAPI-Schlüssel an einen Zustands-Hook übergeben
Übergeben Sie den Schlüssel an einen Zustands-Hook, nicht an die props der Ansichts-Komponente. Andernfalls würde er in Testprotokollen und Snapshots erscheinen.
const state = useArcGISViewState({
apiKey: import.meta.env.VITE_ARCGIS_API_KEY,
mapDesignType: ArcGISDesign.Streets,
cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});Zwischen 2D und 3D unterscheiden
ArcGISMapView ist eine 3D-Szenenansicht, ArcGISMapView2D eine 2D-Kartenansicht. Beide teilen sich dasselbe Zustandsobjekt, sodass sie zur Laufzeit umgeschaltet werden können.
PRÜFEN
Was Sie sehen sollten
Fertig, wenn die ArcGIS-Karte angezeigt wird.
import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { ArcGISDesign, ArcGISMapView2D, useArcGISViewState } from '@mapconductor/react-for-arcgis';
const TOKYO = createGeoPoint({ latitude: 35.6812, longitude: 139.7671 });
export function ArcGISMap() {
const state = useArcGISViewState({
apiKey: import.meta.env.VITE_ARCGIS_API_KEY,
mapDesignType: ArcGISDesign.Streets,
cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});
const [markerState] = useState(() => createMarkerState({ id: 'tokyo', position: TOKYO }));
return (
<ArcGISMapView2D state={state} style={{ height: 480 }}>
<Marker state={markerState} />
</ArcGISMapView2D>
);
}Kartendesigns
ArcGISDesign unterstützt Esri-Basiskarten. Dies ist eine Auswahl.
Fehlerbehebung
Karte wird nicht angezeigt
- Prüfen Sie, ob der Schlüssel an einen Zustands-Hook übergeben wurde.
- Prüfen Sie, ob die erforderlichen ArcGIS-Services für den Schlüssel aktiviert sind.
Bündel ist groß
- @arcgis/core ist eine große Bibliothek. Wenn Sie nur die Bildschirme, die ArcGIS verwenden, in einen dynamischen import auslagern, reduzieren Sie die anfängliche Ladezeit.
Beim Wechseln des Providers tritt ein Fehler in der Hook-Reihenfolge auf
- React kann die Reihenfolge von Hook-Aufrufen nicht ändern. Erstellen Sie für jeden Provider eine kleine Komponente und rufen Sie darin die Hooks dieses Providers auf. Das providers/-Verzeichnis der Beispiel-App hat genau diesen Aufbau.
Weiter
ArcGIS kann GIS-Assets direkt verarbeiten. Wo die gemeinsame API nicht ausreicht, können Sie die native Ansicht aus MapViewHolder entnehmen und direkt steuern.