对于有leaflet或leaflet.draw插件经验的人:
我想不使用leaflet.draw
中的工具栏来开始绘制多边形。我设法通过在线搜索找到了允许不使用工具栏(layer.editing.enable();
)进行编辑的属性(它不在主要文档中)。如果没有工具栏按钮,我似乎找不到如何开始绘制多边形的方法。任何帮助将不胜感激!
谢谢:)
此简单代码对我有用:
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
类提供以下有用的方法:
所以我已经为圆形弄清楚了,但是对于多边形应该一样。实际上非常简单。希望以下代码可以回答您的问题,但是如果没有让我知道,我可以发布更多内容。
// 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()来控制编辑。
请确保对任何问题发表评论。祝你好运
我认为这个问题值得一提。您总是在leaflet.draw中使用处理程序进行绘图-而不是直接使用图层。如果要编辑图层,请使用保存在图层Jacob Toyes answer字段中的处理程序,如下所示:editing
。如果要创建新图层,请首先创建一个新处理程序:
layer.editing.enable();
现在,在[[leaflet.draw github页面上实际上有一个示例:// 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();
});
如上所述,https://github.com/Leaflet/Leaflet.draw/blob/develop/docs/examples/edithandlers.html和L.EditToolbar.Edit
公开了有趣的方法和事件,例如
editstart
和editstop。没有提到的是,这两个类本身是从L.EditToolbar.Delete
派生的。