传单.绘制映射:如何在没有工具栏的情况下启动绘制功能

这个简单的代码为我工作:

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

只需将其放入自定义按钮的onclick处理程序中(或任何您想要的地方)。

变量map和drawControl是对你们的传单图和图纸控制的引用。

深入源代码(leaflet.draw-src.js)，您可以找到绘制其他元素并编辑或删除它们的函数。

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

我希望这对你也会有用。

编辑:L.EditToolbar.Edit和L.EditToolbar.Delete类公开了以下有用的方法:

• enable():开启编辑/删除模式
• disable():返回标准模式
• save():保存更改(触发绘制:编辑/绘制:删除事件)
• revertLayers():撤销更改

我认为值得一提的是Jacob Toyes对这个问题的回答。你总是在传单上画处理者。绘制 -不能直接使用图层。如果你想编辑一个图层，你可以使用像这样保存在图层editing字段中的处理程序:layer.editing.enable();。如果你想创建一个新图层，你首先创建一个新的handler:

// 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();
});

现在在传单上实际上有一个例子。绘制 github页面:https://github.com/Leaflet/Leaflet.draw/blob/develop/docs/examples/edithandlers.html

然而，我认为处理程序还没有很好地记录在那里。

就像上面所说的，L.EditToolbar.Edit和L.EditToolbar.Delete公开了一些有趣的方法和事件，比如editstart和editstop。没有提到的是，这两个类本身是从L.Handler派生的。

虽然BaCH的解决方案可能是最好的，但我想添加一个单行解决方案，它实际上更面向未来(而不是挖掘未记录的传单绘制方法)和最简单的。

document.querySelector('.leaflet-draw-draw-polygon').click();

就是这样。你只是利用了工具栏的存在，但实际上，你没有使用它。您可以以任何方式以编程方式初始化绘图。你也可以使用CSS隐藏工具栏。

如果你想开始绘制一个不同的形状，使用以下类之一:

.leaflet-draw-draw-polyline
.leaflet-draw-draw-rectangle
.leaflet-draw-draw-circle
.leaflet-draw-draw-marker
.leaflet-draw-draw-circlemarker

对于圆我已经算出来了，但是对于多边形也是一样的。其实很简单。希望下面的代码回答你的问题，但如果不是让我知道，我可以张贴更多的要点或其他东西。

// 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()
  }
}
},

对不起，很多只是噪音，但它应该给你一个如何去做的想法。您可以像前面所说的那样使用edit .enable()/.disable()来控制编辑。

如果有问题一定要留言。祝你好运。