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

No busques más en otras webs porque has llegado al espacio exacto, contamos con la solución que buscas sin complicaciones.

Solución:

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 dibujo.

Buceando en el código fuente (leaflet.draw-src.js) puedes encontrar las funciones para dibujar los otros elementos y editarlos o borrarlos.

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 también te sea de utilidad.

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

• enable (): para iniciar el modo de edición / eliminación
• deshabilitar (): para volver al modo estándar
• save (): para guardar cambios (dispara dibujar: editar / dibujar: eventos eliminados)
• revertLayers (): para deshacer cambios

Así que he descubierto esto para los círculos, pero debería ser lo mismo para los polígonos. De hecho, es muy simple. Con suerte, el siguiente código responde a su pregunta, pero si no, avíseme 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 darte una idea de cómo hacerlo. Puede controlar la edición como dijo con edit.enable () /. Disable ().

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

Creo que vale la pena mencionar la respuesta de Jacob Toyes a este problema. Siempre estás dibujando con manejadores en folleto.draw – no directamente con capas. Si desea editar una capa, utilice el controlador guardado en capas. editing campo 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();
);

A estas alturas, en realidad hay un ejemplo en el folleto.draw página de github: https://github.com/Leaflet/Leaflet.draw/blob/develop/docs/examples/edithandlers.html

Sin embargo, creo que los controladores aún no están bien documentados.

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

Valoraciones y reseñas

Acuérdate de que tienes la capacidad de parafrasear .

---

---

Utiliza Nuestro Buscador