leaflet-draw绘制圆后,无法编辑圆,只要编辑圆,就会报radius is not definde,解决附上代码
时间: 2023-08-01 19:09:27 浏览: 176
这个问题可能是因为在绘制圆时没有正确设置圆的半径属性导致的。可以尝试在绘制圆时添加正确的半径属性,同时在编辑圆时也需要正确获取半径属性。
以下是一个可能的解决方案:
```javascript
// 初始化绘图控件
var drawControl = new L.Control.Draw({
draw: {
circle: {
shapeOptions: {
color: 'red'
},
// 设置圆的半径属性
radius: 500
},
// 其他绘制工具
}
});
map.addControl(drawControl);
// 监听绘制完成事件
map.on(L.Draw.Event.CREATED, function(event) {
var layer = event.layer;
if (layer instanceof L.Circle) {
layer.on('click', function() {
// 在圆被点击时,获取圆的半径属性
var radius = layer.getRadius();
console.log('Circle radius:', radius);
});
}
map.addLayer(layer);
});
// 监听编辑完成事件
map.on(L.Draw.Event.EDITED, function(event) {
var layers = event.layers;
layers.eachLayer(function(layer) {
if (layer instanceof L.Circle) {
// 在编辑圆时,更新圆的半径属性
var radius = layer.getRadius();
layer.options.radius = radius;
}
});
});
```
在这个例子中,我们在绘制圆时设置了半径属性,并在创建圆的事件处理程序中监听圆的点击事件以获取圆的半径。在编辑圆时,我们遍历每个编辑后的图层,如果是圆,则更新其半径属性。
阅读全文