MapConductorConfigurar MapLibre
Pasos para usar MapLibre desde MapConductor en la Web. No requiere clave y es la forma más rápida de comenzar. maplibre-gl está incluido en el paquete.
Antes de empezar
Instalar
maplibre-gl está incluido en el paquete, por lo que no es necesario instalarlo por separado.
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-for-maplibreExcluir del prebundle de Vite
Si usa Vite, agregue el proveedor a optimizeDeps.exclude. Como maplibre-gl v6 carga los trabajadores mediante URL, si se agrupa previamente, los archivos del trabajador no se generarán en .vite/deps y la carga fallará.
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()],
});Cargar hoja de estilos
Cárguelo una vez en el punto de entrada de la aplicación. Si se olvida, la posición del mapa y el aspecto de los controles se corromperán.
import '@mapconductor/react-for-maplibre/style.css';
Elegir estilo
MapLibre no tiene clave, pero debe decidir el origen de los teselas usted mismo. Las DemoTiles predeterminadas son para verificación de funcionamiento.
VERIFICAR
Lo que deberías ver
Aparece un mapa centrado en Tokio y si se coloca un marcador, está completo.
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>
);
}Objeto de estado
Parámetros que recibe useMapLibreViewState. MapLibreMapView es 3D, MapLibreMapView2D es 2D, ambos comparten el mismo estado.
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;
}Diseños de mapa
MapLibreDesign es una constante que envuelve la URL del JSON de estilo.
Solución de problemas
Al cambiar de estilo, el mapa desaparece brevemente
- Cambiar mapDesignType implica recrear el mapa, no usar setStyle. Cambiar de estilo no es barato. Evite interfaces que cambien con frecuencia.
La posición del mapa y los controles están dañados
- Verifique si se está cargando style.css.
El mapa se inicializa doblemente solo durante el desarrollo
- React StrictMode ejecuta el efecto dos veces. Como cada proveedor detecta esto y descarta uno, no es necesario quitar StrictMode.
Siguiente
Si se pasa projection="globe", se mostrará el globo terráqueo. Esto es una prop de la vista y no está incluido en el objeto de estado.