MapConductorMapLibre einrichten
Schritte zur Verwendung von MapLibre über MapConductor im Web. Kein Schlüssel erforderlich, kürzester Start. maplibre-gl ist im Paket enthalten.
Bevor Sie beginnen
Installieren
maplibre-gl ist im Paket enthalten, daher muss es nicht separat installiert werden.
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-for-maplibreAus Vite-Vorbundling ausschließen
Bei Verwendung von Vite fügen Sie den Anbieter zu optimizeDeps.exclude hinzu. Da maplibre-gl v6 Worker über URLs lädt, werden bei vorab-Bundling die Worker-Dateien nicht unter .vite/deps ausgegeben und das Laden schlägt fehl.
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
optimizeDeps: {
exclude: ["@mapconductor/react-for-maplibre", "@mapconductor/js-sdk-core"],
},
plugins: [react()],
});Stylesheet laden
Laden Sie es einmal am Einstiegspunkt der App. Wenn dies vergessen wird, werden die Position der Karte und das Aussehen der Steuerelemente beschädigt.
import '@mapconductor/react-for-maplibre/style.css';
Stil bestimmen
MapLibre hat keinen Schlüssel, aber Sie müssen die Herkunft der Kacheln selbst bestimmen. Die Standard-DemoTiles dienen zur Funktionsprüfung.
PRÜFEN
Was Sie sehen sollten
Eine Karte mit Zentrum auf Tokyo erscheint und wenn ein Marker gesetzt ist, ist es fertig.
import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { MapLibreDesign, MapLibreMapView2D, useMapLibreViewState } from '@mapconductor/react-for-maplibre';
import '@mapconductor/react-for-maplibre/style.css';
const TOKYO = createGeoPoint({ latitude: 35.6812, longitude: 139.7671 });
export function HelloMap() {
const mapState = useMapLibreViewState({
id: 'maplibre-map',
mapDesignType: MapLibreDesign.DemoTiles,
cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});
const [markerState] = useState(() => createMarkerState({ id: 'tokyo', position: TOKYO }));
return (
<MapLibreMapView2D state={mapState} style={{ height: 480 }}>
<Marker state={markerState} />
</MapLibreMapView2D>
);
}Statusobjekt
Parameter, die useMapLibreViewState empfängt. MapLibreMapView ist 3D, MapLibreMapView2D ist 2D, beide teilen denselben Zustand.
useMapLibreViewState({
id?: string;
mapDesignType?: MapLibreMapDesignType; // default MapLibreDesign.OsmBright
cameraPosition?: MapCameraPosition; // default MapCameraPosition.Default
})
// View props, on top of the shared MapViewBaseProps
{
maxZoom?: number;
minZoom?: number;
projection?: 'mercator' | 'globe'; // a component prop, not part of state
containerStyle?: React.CSSProperties;
markerTilingOptions?: MarkerTilingOptions;
onError?: (error: Error) => void;
}Kartendesigns
MapLibreDesign ist eine Konstante, die die URL des Stil-JSON umschließt.
Fehlerbehebung
Beim Ändern des Stils verschwindet die Karte kurzzeitig
- Die Änderung von mapDesignType führt zu einer Neuerstellung der Karte und nicht zu setStyle. Das Wechseln des Stils ist nicht billig. Vermeiden Sie UIs, die häufig wechseln.
Position der Karte und Steuerelemente sind beschädigt
- Überprüfen, ob style.css geladen wird.
Die Karte wird nur während der Entwicklung doppelt initialisiert
- React StrictMode führt den Effekt zweimal aus. Da jeder Anbieter dies erkennt und einen verwirft, müssen Sie StrictMode nicht entfernen.
Weiter
Wenn projection="globe" übergeben wird, wird die Globusansicht angezeigt. Dies ist ein prop der Ansicht und ist nicht im Zustandsobjekt enthalten.