Javascript 传单.绘图映射：如何在没有工具栏的情况下启动绘图功能？

对于有传单或传单.draw插件经验的任何人：

我想在不使用

单张中的工具栏的情况下开始绘制多边形。draw

。我通过联机搜索（不在主文档中）找到了允许在不使用工具栏的情况下进行编辑的属性（

layer.editing.enable（）；

）。如果没有工具栏按钮，我似乎找不到如何开始绘制多边形。任何帮助都将不胜感激

---

谢谢：）

所以我已经解决了圆的问题，但多边形的问题应该是一样的。其实很简单。希望下面的代码能回答你的问题，但如果不让我知道，我可以发布更多的要点或东西

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

很抱歉，这只是噪音，但它应该给你一个如何进行的想法。您可以像编辑时所说的那样控制编辑。enable（）/.disable（）

---

请务必对任何问题进行评论。祝你好运

这个简单的代码对我很有用：

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

只需将其放入自定义按钮的onclick处理程序中（或任意位置）

变量

map

和

drawControl

是对传单贴图和绘图控件的引用

深入到源代码（palicate.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（）：撤消更改

---

我认为这个问题值得一提。您总是使用传单.draw中的处理程序进行绘制-而不是直接使用图层。如果要编辑层，可以使用保存在层

editing

字段中的处理程序，如下所示：

layer.editing.enable（）。如果要创建新层，请首先创建一个新处理程序：

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

现在，在传单.draw github页面上实际上有一个示例：

尽管如此，我认为处理程序还没有很好的文档记录

如上所述，
L.EditToolbar.Edit
和
L.EditToolbar.Delete
公开有趣的方法和事件，如editstart和editstop。没有提到的是，这两个类本身是从
L.Handler
派生出来的，虽然的解决方案可能是最好的，但我想添加一个一行的解决方案，它实际上更能证明未来的（比挖掘未记录的传单绘制方法）和最简单的

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

我也需要弄清楚这一点。如果你找到了答案，请把它贴在这里，谢谢。我自己还没有找到答案。请看这个问题的简单演示：谢谢，伙计。非常感谢，伙计，非常感谢。我放弃了，决定告诉用户什么时候单击工具栏。我将回到这里并重构我的页面：）如果您想知道如何以编程方式创建一个标记，该标记可以使用传单.draw进行编辑，请参阅：是的，您可以作为L.draw的第二个参数传递。*不同的选项集。以下是选项参数的引用：。您需要设置的属性是“shapeOptions”Life saver！唯一奇怪的问题是，我在绘制多边形时不再看到该区域。@RayannNayran drawControl是由插件传单.Draw定义的L.Control.Draw类的对象。您只需将其创建为：var drawControl=new L.Control.Draw（options）；这里有一个例子：嘿@schmijos，我似乎无法让这一切顺利进行。我复制了您的代码，但当我完成绘图时，我无法编辑它。我应该向你的代码中添加什么以便编辑？嗨@NikaKhurashvili，对不起，我现在完全不在这里了。我建议你问一个你自己的问题，告诉我你已经试过了。