MapConductorConfigurar OpenLayers
Pasos para usar OpenLayers en la web a través de MapConductor. No se requiere ninguna clave y es adecuado cuando desea un control detallado de la proyección y las fuentes de mosaicos.
Antes de empezar
Instalar
ol está incluido en el paquete.
npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
@mapconductor/react-for-openlayersCargar la hoja de estilos
Se carga solo una vez en el punto de entrada de la aplicación. Si olvida esto, se perderá la posición del mapa y la apariencia de los controles.
import '@mapconductor/react-for-openlayers/style.css';
Determinar la fuente de mosaicos
OpenLayersDesign es una constante que envuelve la TileSource de OpenLayers. OpenStreetMap predeterminado usa la fuente OSM de ol y también tiene atribución.
VERIFICAR
Lo que deberías ver
Está completo cuando aparece el mapa.
import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { OpenLayersDesign, OpenLayersMapView, useOpenLayersMapViewState } from '@mapconductor/react-for-openlayers';
import '@mapconductor/react-for-openlayers/style.css';
const TOKYO = createGeoPoint({ latitude: 35.6812, longitude: 139.7671 });
export function OpenLayersMap() {
const state = useOpenLayersMapViewState({
mapDesignType: OpenLayersDesign.OpenStreetMap,
cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});
const [markerState] = useState(() => createMarkerState({ id: 'tokyo', position: TOKYO }));
return (
<OpenLayersMapView state={state} style={{ height: 480 }}>
<Marker state={markerState} />
</OpenLayersMapView>
);
}Diseños de mapa
OpenLayersDesign es una constante que envuelve la TileSource de ol.
Solución de problemas
La inclinación y la rotación no funcionan
- OpenLayers no tiene una cámara 3D nativa. MapConductor aproxima la inclinación y el rumbo con transformaciones 3D de CSS. Es solo un efecto visual.
La posición del mapa se pierde
- Verifique si se ha cargado style.css.
El mapa se inicializa doble solo durante el desarrollo
- React StrictMode ejecuta el efecto dos veces. Cada proveedor detecta esto y descarta uno, por lo que no es necesario eliminar StrictMode.
Siguiente
Si necesita la función nativa de OpenLayers, puede extraer la instancia de Map de ol desde MapViewHolder y manipularla directamente.