MapConductorUppsetning á ArcGIS
Hvernig nota má ArcGIS á vefnum gegnum MapConductor. @arcgis/core fylgir pakkanum, og pakkinn flytur inn þemastíla Esri fyrir þig.
Áður en þú byrjar
Settu upp
@arcgis/core fylgir pakkanum, og sýnin flytur sjálf inn þemastíla Esri — þú gerir það ekki.
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-for-arcgisSendu API-lykilinn til stöðu-hooksins
Lykillinn fer til stöðu-hooksins, ekki í props sýnareiningarinnar — props enda gjarnan í prófunarskrám og skyndimyndum.
const state = useArcGISViewState({
apiKey: import.meta.env.VITE_ARCGIS_API_KEY,
mapDesignType: ArcGISDesign.Streets,
cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});Veldu milli 2D og 3D
ArcGISMapView er þrívíða sviðsmyndin og ArcGISMapView2D tvívíða kortasýnin. Þær deila stöðuhlutnum, svo þú getur víxlað milli þeirra á keyrslutíma.
STAÐFESTA
Það sem þú ættir að sjá
Uppsetningunni er lokið þegar ArcGIS-kortið teiknast.
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>
);
}Kortahönnun
ArcGISDesign varpast á grunnkort Esri; þetta er úrval.
Bilanaleit
Kortið birtist ekki
- Athugaðu að lykillinn berist til stöðu-hooksins.
- Staðfestu að lykillinn hafi þær ArcGIS-þjónustur virkjaðar sem þú þarft.
Pakkinn er stór
- @arcgis/core er stórt safn — fluttu aðeins þá skjái sem nota ArcGIS inn kvikt til að halda fyrstu hleðslu niðri.
Skipti um þjónustuaðila kasta villu um röð hooka
- React leyfir ekki að röð hook-kalla breytist. Búðu til eina litla einingu á hvern þjónustuaðila sem kallar á sitt eigið hook — það er einmitt uppbygging providers/ möppunnar í sýnisforritinu.
Næst
ArcGIS er valið þegar þú hefur GIS-gögn með í farteskinu. Þar sem sameiginlega API-ið endar geturðu dregið innbyggðu sýnina út úr MapViewHolder og stýrt henni beint.