MapConductorConfigurar Mapbox
Instrucciones para usar Mapbox en la web a través de MapConductor. Se necesita un token de acceso solo al usar estilos alojados por Mapbox (los que comienzan con mapbox://).
Antes de empezar
Instalar
mapbox-gl está incluido en el paquete, no es necesario instalarlo por separado. No hay versión de React Native.
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-for-mapboxCargar hoja de estilos
Cargar una sola vez en el punto de entrada de la aplicación. Si se olvida, la posición del mapa y la apariencia de los controles se romperán.
import '@mapconductor/react-for-mapbox/style.css';
Pasar el token de acceso (si es necesario)
El token se pasa al hook de estado. Internamente se configura globalmente como mapboxgl.accessToken. Se puede omitir si solo se usan diseños basados en OSM.
const mapState = useMapboxViewState({
id: 'mapbox-map',
accessToken: import.meta.env.VITE_MAPBOX_ACCESS_TOKEN,
mapDesignType: MapboxDesign.Streets,
cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});VERIFICAR
Lo que deberías ver
Si usa OsmBright, puede verificar el funcionamiento sin token.
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>
);
}Objeto de estado
Parámetros que recibe useMapboxViewState. Tenga en cuenta que el nombre de exportación de la vista es MapBoxMapView / MapBoxMapView2D (la B está en mayúscula).
useMapboxViewState({
id?: string;
accessToken?: string;
mapDesignType?: MapboxMapDesignType; // default MapboxDesign.Streets
cameraPosition?: MapCameraPosition; // default MapCameraPosition.Default
})Diseños de mapa
MapboxDesign se divide en dos grupos: los que requieren token y los que no.
Solución de problemas
Solo los estilos de Mapbox no se muestran
- Los estilos que comienzan con mapbox:// requieren token. Verifique si ha pasado accessToken.
- Verifique que el token sea público y que no haya caducado.
El nivel de zoom está desalineado con otros proveedores
- MapConductor alinea el zoom con el estándar de Google. Mapbox convierte esto aplicando un desplazamiento medido (googleZoom ≒ mapboxZoom + 1.0).
El mapa se inicializa doble solo durante el desarrollo
- React StrictMode ejecuta los efectos dos veces. Cada proveedor está diseñado para detectar esto y descartar uno, por lo que no es necesario desactivar StrictMode.
Siguiente
Dado que tiene la misma estructura que MapLibre, el cambio de mapDesignType recrea el mapa.