Estoy usando capas abiertas en el proyecto de reacción. Y tratando de dibujar un polígono. Cuando completo para dibujar, el polígono se está eliminando. Creo que hacer clic en la coordenada agregada está causando eso. Pero no puedo encontrar ninguna solución.
Sigo este artículo para crear un mapa. y este ejemplo para dibujar un polígono.
aquí está mi componente de mapa:
<MapWrapper center={fromLonLat(DEFAULT_CENTER)} zoom={ZOOM}> <MapLayers> <MapTileLayer source={new OSM()} /> </MapLayers> <Controls> <ZoomControl /> <FullScreenControl /> </Controls> </MapWrapper>y este es mi componente contenedor de mapa:
const MapWrapper = ({ center, zoom, children }) => { const mapRef = useRef(); const [map, setMap] = useState(); const source = new VectorSource({ wrapX: false }); //----------------ON COMPONENT MOUNT useEffect(() => { let options = { view: new ol.View({ zoom, center }), layers: [], controls: [], overlays: [], }; let mapObject = new ol.Map(options); mapObject.setTarget(mapRef.current); setMap(mapObject); return () => mapObject.setTarget(undefined); }, [zoom, center]); //------------ DRAWING POLYGON ----------------- useEffect(() => { if (!map) return; let draw = new Draw({ source: source, type: "Polygon", }); map.addInteraction(draw); }, [map]); return ( <MapContext.Provider value={{ map }}> <div className="map-container" ref={mapRef} > {children} </div> </MapContext.Provider> ); };