MapConductorConfigurar ArcGIS
Instrucciones para usar ArcGIS en la web desde MapConductor. @arcgis/core está incluido en el paquete y el CSS de temas de Esri también lo carga el paquete.
Antes de empezar
Instalar
@arcgis/core está incluido en el paquete. El CSS de temas de Esri también lo carga la vista, por lo que no necesita importarlo usted mismo.
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-for-arcgisPasar la clave de API a un enlace de estado
Pase la clave a un enlace de estado, no a los props del componente de vista. Si se coloca en props, se mezcla en los registros y capturas de las pruebas.
const state = useArcGISViewState({
apiKey: import.meta.env.VITE_ARCGIS_API_KEY,
mapDesignType: ArcGISDesign.Streets,
cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});Usar 2D y 3D según corresponda
ArcGISMapView es una vista de escena 3D, ArcGISMapView2D es una vista de mapa 2D. Ambos comparten el mismo objeto de estado, por lo que se pueden alternar en tiempo de ejecución.
VERIFICAR
Lo que deberías ver
Ha terminado cuando aparece el mapa de ArcGIS.
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>
);
}Diseños de mapa
ArcGISDesign es compatible con los mapas base de Esri. Aquí solo se muestran algunos.
Solución de problemas
El mapa no aparece
- Compruebe si la clave se pasó a un enlace de estado.
- Compruebe si los servicios de ArcGIS necesarios están habilitados para la clave.
El paquete es grande
- @arcgis/core es una biblioteca grande. Si extrae solo las pantallas que usan ArcGIS en un import dinámico, puede reducir la carga inicial.
Error de orden de enlaces al cambiar de proveedor
- React no puede cambiar el orden de las llamadas a enlaces. Cree un componente pequeño para cada proveedor y llame a los enlaces de ese proveedor dentro de él. El directorio providers/ de la aplicación de ejemplo sigue esta estructura.
Siguiente
ArcGIS puede manejar activos de GIS directamente. Cuando la API común no es suficiente, puede obtener la vista nativa desde MapViewHolder y manipularla directamente.