Actualmente estoy trabajando en un proyecto en el que un usuario debería poder editar zonas (= polígonos). Creé una zona de clase que extiende L.Polygon para poder crear zonas y agregarlas al mapa. La edición de una instancia específica de Zone se activa mediante un botón, que ejecuta el siguiente código: specificZone.editable.enable() Esto funciona hasta ahora y se ve así:
El problema que tengo es que al arrastrar los puntos de edición, un punto de esquina siempre se comporta como un punto de borde: por lo tanto, divide la esquina de esta manera:
Los otros puntos se comportan según lo previsto. Espero que esto haya sido algo comprensible descrito. Estoy agradecido por cualquier tipo de ayuda. Que tengas un lindo día :)
Un saludo Luca
Editar:
Mi mapa se crea de la siguiente manera:
Un Vue Component Map.vue crea una instancia de CustomMap.ts:
const customMap = new CustomMap( document.getElementById("mapcontainer") as HTMLElement, mapUrl, mapParams.getData() );el mapUrl es el lugar donde se almacena el mapa y los mapParams se cargan previamente desde un servidor
En el constructor de CustomMap.ts se crea un L.DrawMap, luego el mapa se agrega al mapa como una instancia de CustomImageOverlay que crea un L.imageOverlay. Después de eso, se crea el L.FeatureGroup para CustomZone(s).
this.map = L.map(el, { crs: L.CRS.Simple, center: [0, 0], zoom: 4, minZoom: 2, maxZoom: 7, dragging: true, maxBoundsViscosity: 0.5, maxBounds: mapBounds, zoomSnap: 0.25, zoomDelta: 0.25, attributionControl: false }); this.imageOverlay = new CustomImageOverlay( mapUrl, mapBounds.getNorthEast(), mapBounds.getSouthWest(), { opacity: 0.5, interactive: true, zIndex: -1 }, this.map ); this.map.addLayer(this.imageOverlay.getLayer()); // Create a group for zones and add it to map const zoneGroup = new L.FeatureGroup(); zoneGroup.addTo(this.map); // init drawers this.polygonDrawer = new L.Draw.Polygon(this.map); // Layers to show/hide const overlayLayers: L.Control.LayersObject = { Zones: zoneGroup, }; // Create Layer Control with the previous options const layerControl = new L.Control.Layers(base, overlayLayers); // Add to map layerControl.addTo(this.map);CustomZone se crea y se agrega al grupo de características y al mapa.
En el constructor de customZone, el polígono real se crea mediante super(latlng, options)
Espero que este código te dé una mejor idea :)