MapConductorMapbox einrichten
Anleitung zum Verwenden von Mapbox im Web über MapConductor. Ein Zugriffstoken ist nur erforderlich, wenn Mapbox-gehostete Styles verwendet werden (solche, die mit mapbox:// beginnen).
Bevor Sie beginnen
Installieren
mapbox-gl ist im Paket enthalten, separate Installation ist nicht erforderlich. Es gibt keine React Native-Version.
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-for-mapboxStylesheet laden
Einmal im Einstiegspunkt der App laden. Wenn dies vergessen wird, werden die Kartenposition und das Erscheinungsbild der Steuerelemente beschädigt.
import '@mapconductor/react-for-mapbox/style.css';
Zugriffstoken übergeben (falls erforderlich)
Das Token wird an den State-Hook übergeben. Intern wird es global als mapboxgl.accessToken konfiguriert. Es kann weggelassen werden, wenn nur OSM-basierte Designs verwendet werden.
const mapState = useMapboxViewState({
id: 'mapbox-map',
accessToken: import.meta.env.VITE_MAPBOX_ACCESS_TOKEN,
mapDesignType: MapboxDesign.Streets,
cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});PRÜFEN
Was Sie sehen sollten
Mit OsmBright kann die Funktion ohne Token überprüft werden.
import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { MapboxDesign, MapBoxMapView2D, useMapboxViewState } from '@mapconductor/react-for-mapbox';
import '@mapconductor/react-for-mapbox/style.css';
const TOKYO = createGeoPoint({ latitude: 35.6812, longitude: 139.7671 });
export function HelloMap() {
// No token needed for the OsmBright design
const mapState = useMapboxViewState({
id: 'mapbox-map',
mapDesignType: MapboxDesign.OsmBright,
cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});
const [markerState] = useState(() => createMarkerState({ id: 'tokyo', position: TOKYO }));
return (
<MapBoxMapView2D state={mapState} style={{ height: 480 }}>
<Marker state={markerState} />
</MapBoxMapView2D>
);
}Statusobjekt
Parameter, die useMapboxViewState empfängt. Beachten Sie, dass der Export-Name der Ansicht MapBoxMapView / MapBoxMapView2D ist (B ist großgeschrieben).
useMapboxViewState({
id?: string;
accessToken?: string;
mapDesignType?: MapboxMapDesignType; // default MapboxDesign.Streets
cameraPosition?: MapCameraPosition; // default MapCameraPosition.Default
})Kartendesigns
MapboxDesign ist in zwei Gruppen unterteilt: solche, die ein Token erfordern, und solche, die keines erfordern.
Fehlerbehebung
Nur Mapbox-Styles werden nicht angezeigt
- Für Styles, die mit mapbox:// beginnen, ist ein Token erforderlich. Überprüfen Sie, ob accessToken übergeben wurde.
- Überprüfen Sie, ob das Token ein öffentliches Token ist und nicht abgelaufen ist.
Zoomlevel weicht von anderen Anbietern ab
- MapConductor gleicht den Zoom an Google an. Mapbox rechnet dies mit einem gemessenen Offset um (googleZoom ≒ mapboxZoom + 1.0).
Die Karte wird während der Entwicklung doppelt initialisiert
- React StrictMode führt Effects zweimal aus. Jeder Anbieter ist darauf ausgelegt, dies zu erkennen und eine Instanz zu verwerfen, sodass StrictMode nicht deaktiviert werden muss.
Weiter
Da es dieselbe Struktur wie MapLibre hat, führt die Änderung von mapDesignType dazu, dass die Karte neu erstellt wird.