javascript Leaflet.draw 映射：如何在没有工具栏的情况下启动绘图功能？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15775103/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Leaflet.draw mapping: How to initiate the draw function without toolbar?
提问by SamEsla
For anyone experienced with leaflet or leaflet.draw plugin:
对于任何有传单或传单.draw插件经验的人：
I want to initiate drawing a polygon without using the toolbar from leaflet.draw. I've managed to find the property that allows editing without using the toolbar (layer.editing.enable();) by searching online (it's not in the main documentation). I can't seem to find how to begin drawing a polygon without the toolbar button. Any help would be much appreciated!
我想开始绘制多边形而不使用leaflet.draw. 我设法layer.editing.enable();通过在线搜索找到了允许在不使用工具栏 ( ) 的情况下进行编辑的属性（它不在主文档中）。如果没有工具栏按钮，我似乎无法找到如何开始绘制多边形。任何帮助将非常感激！
Thank you :)
谢谢 ：）
回答by BaCH
This simple code works for me:
这个简单的代码对我有用：
new L.Draw.Polyline(map, drawControl.options.polyline).enable();
Just put it into the onclick handler of your custom button (or wherever you want).
只需将其放入自定义按钮的 onclick 处理程序（或您想要的任何位置）。
The variables mapand drawControlare references to your leaflet map and draw control.
变量map和drawControl是对传单地图和绘图控件的引用。
Diving into the source code (leaflet.draw-src.js) you can find the functions to draw the other elements and to edit or delete them.
深入研究源代码 (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
})
I hope this will be useful for you too.
我希望这对你也有用。
EDIT:
The L.EditToolbar.Editand L.EditToolbar.Deleteclasses expose the following useful methods:
编辑：L.EditToolbar.Edit和L.EditToolbar.Delete类公开了以下有用的方法：
- enable(): to start edit/delete mode
- disable(): to return to standard mode
- save(): to save changes (it fires draw:edited / draw:deleted events)
- revertLayers(): to undo changes
- enable(): 启动编辑/删除模式
- disable()：返回标准模式
- save(): 保存更改（它会触发 draw:edited / draw:deleted 事件）
- revertLayers(): 撤销更改
回答by Gowiem
So I've figured this out for circles, but it should be the same for polygons. It's actually really simple. Hopefully the following code answers your question, but if not let me know and I can post more to a gist or something.
所以我已经为圆想出了这个，但对于多边形应该是一样的。其实很简单。希望下面的代码能回答您的问题，但如果没有让我知道，我可以发布更多内容到要点或其他内容。
// 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()
}
}
},
Sorry a lot of that is just noise, but it should give you an idea of how to go about this. You can control editing like you said with editing.enable()/.disable().
抱歉，其中很多只是噪音，但它应该让您了解如何解决这个问题。您可以像使用editing.enable()/.disable() 所说的那样控制编辑。
Make sure to comment with any questions. Good luck man.
确保对任何问题发表评论。祝你好运。
回答by schmijos
I think it's worth mentioning Jacob Toyes answerto this problem. You're always drawing with handlers in leaflet.draw- not directly with layers. If you want to edit a layer, you use the handler saved in a layers editingfield like that: layer.editing.enable();. And if you want to create a new layer, you first create a new handler:
我认为值得一提的是Jacob Toyes对这个问题的回答。您总是在Leaflet.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();
});
By now there actually is an example on the leaflet.drawgithub page: https://github.com/Leaflet/Leaflet.draw/blob/develop/docs/examples/edithandlers.html
现在实际上在leaflet.drawgithub页面上有一个例子：https: //github.com/Leaflet/Leaflet.draw/blob/develop/docs/examples/edithandlers.html
Nevertheless I think handlers aren't well documented there yet.
尽管如此，我认为处理程序在那里还没有得到很好的记录。
Like stated above, L.EditToolbar.Editand L.EditToolbar.Deleteexpose interesting methods and events like editstartand editstop. What's not mentioned is that these two classes themselves are derived from L.Handler.
如上所述，L.EditToolbar.Edit并L.EditToolbar.Delete公开有趣的方法和事件，如editstart和editstop。没有提到的是，这两个类本身是从L.Handler.
