javascript - Mapeo de Leaflet.draw: ¿Cómo iniciar la función de sorteo sin barra de herramientas?

gis

Question

Para cualquier persona experimentada con el folleto o el plugin leaflet.draw:

Quiero iniciar el dibujo de un polígono sin usar la barra de herramientas de leaflet.draw . layer.editing.enable(); encontrar la propiedad que permite editar sin usar la barra de herramientas ( layer.editing.enable(); ) buscando en línea (no se encuentra en la documentación principal). Parece que no encuentro cómo comenzar a dibujar un polígono sin el botón de la barra de herramientas. Cualquier ayuda sería muy apreciada!

Gracias :)

Answer 1

Así que he descubierto esto para los círculos, pero debería ser lo mismo para los polígonos. En realidad es muy simple. Esperemos que el siguiente código responda a tu pregunta, pero si no me lo hace saber y puedo publicar más en una esencia o algo así.

// Creates the circle on the map for the given latLng and Radius
// If the createdWithAddress flag is true, the circle will not update
// it''s address according to its position.
createCircle: function(latLng, radius, createdWithAddress) {
if (!this.circle) {
var self = this,
centerIcon,
centerMarker;
centerIcon = new L.Icon({
iconUrl: ''/assets/location_pin_24px.png'',
iconSize: [24, 24],
iconAnchor: [12, 24],
shadowUrl: ''/assets/marker-shadow.png'',
shadowSize: [20, 20],
shadowAnchor:[6, 20]
})
// Setup the options for the circle -> Override icons, immediately editable
options = {
stroke: true,
color: ''#333333'',
opacity: 1.0,
weight: 4,
fillColor: ''#FFFFFF'',
moveIcon: centerIcon,
resizeIcon: new L.Icon({
iconUrl: ''/assets/radius_handle_18px.png'',
iconSize: [12, 12],
iconAnchor: [0,0]
})
}
if (someConfigVarYouDontNeedToKnow) {
options.editable = false
centerMarker = new L.Marker(latLng, { icon:centerIcon })
} else {
options.editable = true
}
// Create our location circle
// NOTE: I believe I had to modify Leaflet or Leaflet.draw to allow for passing in
// options, but you can make it editable with circle.editing.enable()
this.circle = L.circle([latLng.lat, latLng.lng], radius, options)
// Add event handlers to update the location
this.circle.on(''add'', function() {
if (!createdWithAddress) {
self.reverseGeocode(this.getLatLng())
}
self.updateCircleLocation(this.getLatLng(), this.getRadius())
self.updateMapView()
})
this.circle.on(''edit'', function() {
if (self.convertLatLngToString(this.getLatLng()) !== self.getLocationLatLng()) {
self.reverseGeocode(this.getLatLng())
}
self.updateCircleLocation(this.getLatLng(), this.getRadius())
self.updateMapView()
})
this.map.addLayer(this.circle)
if (centerMarker) {
centerMarker.addTo(this.map)
this.circle.redraw()
centerMarker.update()
}
}
},

Lo siento, mucho de eso es solo ruido, pero debería darle una idea de cómo hacerlo. Puedes controlar la edición como dijiste con editing.enable () /. Disable ().

Asegúrese de comentar con cualquier pregunta. Buena suerte.

Answer 2

Creo que vale la pena mencionar la respuesta de Jacob Toyes a este problema. Siempre estás dibujando con manejadores en leaflet.draw , no directamente con capas. Si desea editar una capa, use el controlador guardado en un campo de editing capas así: layer.editing.enable(); . Y si desea crear una nueva capa, primero cree un nuevo controlador:

// Define you draw handler somewhere where you click handler can access it. N.B. pass any draw options into the handler
var polygonDrawer = new L.Draw.Polyline(map);
// Assumming you have a Leaflet map accessible
map.on(''draw:created'', function (e) {
var type = e.layerType,
layer = e.layer;
// Do whatever you want with the layer.
// e.type will be the type of layer that has been draw (polyline, marker, polygon, rectangle, circle)
// E.g. add it to the map
layer.addTo(map);
});
// Click handler for you button to start drawing polygons
$(''#draw_poly'').click(function() {
polygonDrawer.enable();
});

Por ahora, en realidad hay un ejemplo en la página leaflet.draw github: https://github.com/Leaflet/Leaflet.draw/blob/master/examples/edithandlers.html

Sin embargo, creo que los manejadores todavía no están bien documentados.

Como se indicó anteriormente, L.EditToolbar.Edit y L.EditToolbar.Delete exponen métodos y eventos interesantes como editstart y editstop . Lo que no se menciona es que estas dos clases se derivan de L.Handler .

Answer 3

Este código simple funciona para mí:

new L.Draw.Polyline(map, drawControl.options.polyline).enable();

Simplemente colóquelo en el controlador onclick de su botón personalizado (o donde desee).

Las variables map y drawControl son referencias a su mapa de folletos y control de draw.

Al bucear en el código fuente (leaflet.draw-src.js) puede encontrar las funciones para dibujar los otros elementos y editarlos o eliminarlos.

new L.Draw.Polygon(map, drawControl.options.polygon).enable()
new L.Draw.Rectangle(map, drawControl.options.rectangle).enable()
new L.Draw.Circle(map, drawControl.options.circle).enable()
new L.Draw.Marker(map, drawControl.options.marker).enable()
new L.EditToolbar.Edit(map, {
featureGroup: drawControl.options.featureGroup,
selectedPathOptions: drawControl.options.edit.selectedPathOptions
})
new L.EditToolbar.Delete(map, {
featureGroup: drawControl.options.featureGroup
})

Espero que esto te sea útil también.

EDITAR: Las clases L.EditToolbar.Edit y L.EditToolbar.Delete exponen los siguientes métodos útiles:

• Habilitar (): para iniciar el modo editar / borrar
• disable (): para volver al modo estándar
• guardar (): para guardar los cambios (se activan dibujar: editado / dibujar: eventos eliminados)
• revertLayers (): para deshacer cambios