Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

382
Vistas
Dibujo de folleto - Polígono de edición: la edición no se comporta correctamente

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í:

edición de puntos de zona/polígono

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:

ingrese la descripción de la imagen aquí

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 :)

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda