MapConductorConfigurar Leaflet
Estos son los pasos para usar Leaflet en la web desde MapConductor. No se requiere ninguna clave y es adecuado cuando deseas mostrar mosaicos ráster de forma ligera.
Antes de empezar
Instalar
leaflet está incluido en el paquete.
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-for-leafletCargar hoja de estilos
Se carga 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-leaflet/style.css';
Determinar el origen de los mosaicos
El LeafletDesign.OpenStreetMap predeterminado utiliza los mosaicos públicos de OpenStreetMap e incluye la atribución.
VERIFICAR
Lo que deberías ver
Si aparece el mapa, has terminado.
import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { LeafletDesign, LeafletMapView, useLeafletMapViewState } from '@mapconductor/react-for-leaflet';
import '@mapconductor/react-for-leaflet/style.css';
const TOKYO = createGeoPoint({ latitude: 35.6812, longitude: 139.7671 });
export function LeafletMap() {
const state = useLeafletMapViewState({
mapDesignType: LeafletDesign.OpenStreetMap,
cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});
const [markerState] = useState(() => createMarkerState({ id: 'tokyo', position: TOKYO }));
return (
<LeafletMapView state={state} style={{ height: 480 }}>
<Marker state={markerState} />
</LeafletMapView>
);
}Diseños de mapa
LeafletDesign es una constante que envuelve una plantilla de URL de mosaico. Si usas tus propios mosaicos, construyes el mismo tipo.
Solución de problemas
La inclinación y la rotación no funcionan
- Leaflet no tiene una cámara 3D nativa. MapConductor aproxima la inclinación y el rumbo mediante transformaciones 3D de CSS. Es solo un efecto visual, no una cámara 3D real.
La posición del mapa se rompe
- Verifica si style.css está cargado.
El mapa se inicializa dos veces solo durante el desarrollo
- React StrictMode ejecuta el efecto dos veces. Cada proveedor detecta esto y descarta uno de ellos, por lo que no es necesario quitar StrictMode.
Siguiente
Si necesitas visualización 3D, considera MapLibre o Cesium; si deseas tratar proyecciones de manera estricta, considera OpenLayers.