对于任何经历过传单或leaflet.draw插件:
我要开始绘制多边形,而无需使用工具栏从leaflet.draw
。 我设法找到它允许编辑,而无需使用工具栏(属性layer.editing.enable();
)通过在线搜索(这不是主要的文档)。 我似乎无法找到如何开始绘制多边形没有工具栏按钮。 任何帮助将非常感激!
谢谢 :)
对于任何经历过传单或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()
}
}
},
对不起了很多,这只是噪音,但它应该给你如何去了解这一点的想法。 像你editing.enable()说,你可以控制编辑/。禁用()。
确保有任何问题发表评论。 好运气的人。
我认为这是值得一提的雅各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();
});
现在实际上存在的leaflet.draw GitHub的页面上的例子: https://github.com/Leaflet/Leaflet.draw/blob/master/examples/edithandlers.html
不过我觉得处理程序不是有案可稽那里。
如同上述, L.EditToolbar.Edit
和L.EditToolbar.Delete
显露出十分有趣的方法和事件,如editstart和editstop。 有什么理由不提的是,这两个类本身都源于L.Handler
。