MapConductorUppsetning á MapTiler
Hvernig teikna má stíla MapTiler Cloud á vefnum gegnum MapConductor. Teiknað er með maplibre-gl, og stíllinn leysist upp í MapTiler Cloud-slóð sem ber API-lykilinn þinn.
Áður en þú byrjar
Settu upp
Settu upp kjarnann, React-bindingarnar og pakka þjónustuaðilans. Skipti um þjónustuaðila breyta aðeins þeim þriðja.
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-for-maptilerUndanskildu það forpökkun Vite
Í Vite skaltu bæta þjónustuaðilanum við optimizeDeps.exclude. maplibre-gl v6 hleður verkamanni sínum eftir vefslóð, og forpökkunin skilar þeirri skrá ekki inn í .vite/deps, svo beiðnin misheppnast.
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
optimizeDeps: {
exclude: ["@mapconductor/react-for-maptiler", "@mapconductor/js-sdk-core"],
},
plugins: [react()],
});Fluttu inn stílblaðið
Fluttu hana inn einu sinni úr inngangsskrá forritsins. Gleymist það kemur umbrot kortsins og stýringar rangt út.
import '@mapconductor/react-for-maptiler/style.css';
Sendu API-lykilinn til stöðu-hooksins
Lykillinn er fléttaður inn í slóð stíl-JSON-sins: https://api.maptiler.com/maps/<style>/style.json?key=…
const state = useMapTilerViewState({
apiKey: import.meta.env.VITE_MAPTILER,
mapDesignType: MapTilerDesign.Streets,
cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});STAÐFESTA
Það sem þú ættir að sjá
Uppsetningunni er lokið þegar kortið teiknast í MapTiler-stíl.
import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { MapTilerDesign, MapTilerMapView2D, useMapTilerViewState } from '@mapconductor/react-for-maptiler';
import '@mapconductor/react-for-maptiler/style.css';
const TOKYO = createGeoPoint({ latitude: 35.6812, longitude: 139.7671 });
export function MapTilerMap() {
const state = useMapTilerViewState({
apiKey: import.meta.env.VITE_MAPTILER,
mapDesignType: MapTilerDesign.Streets,
cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});
const [markerState] = useState(() => createMarkerState({ id: 'tokyo', position: TOKYO }));
return (
<MapTilerMapView2D state={state} style={{ height: 480 }}>
<Marker state={markerState} />
</MapTilerMapView2D>
);
}Kortahönnun
MapTilerDesign nær yfir viðmiðunarstíla MapTiler Cloud.
Bilanaleit
Kortið helst autt
- Athugaðu að apiKey sé ekki tómur strengur — umhverfisbreyta sem vantar er venjulega orsökin.
- Staðfestu að lykillinn sé virkur í MapTiler Cloud og að þú sért innan kvótans.
Umbrot kortsins eða stýringar líta brotnar út
- Athugaðu að þú hafir flutt inn style.css.
Kortið frumstillist tvisvar í þróun
- React StrictMode keyrir effect tvisvar. Hver þjónustuaðili greinir það og hendir keyrslunni sem var hætt við, svo þú þarft ekki að slökkva á StrictMode.
Næst
Það notar sama teiknara og MapLibre, svo hegðun og takmarkanir stemma við þann þjónustuaðila.