Leaflet Draw Plugin: How to hide/show drawing tools by Layer Type dynamically(Leaflet Draw Plugin:如何按图层类型动态隐藏/显示绘图工具)
问题描述
我在我的项目中使用绘图插件,我想知道如何按图层类型隐藏/显示绘图工具?
I'm using draw plugin in my project and I would like to know how can I hide/show drawing tools by layer type?
例如,假设我有 2 层,其中一层是多边形,另一层是线.
For example, let's say I have 2 layers one of them type is Polygon and the other one is Line.
如果用户选择多边形图层,我想隐藏画线工具.
之后,如果用户选择Line layer,我想隐藏多边形绘图工具.我看过 here 但这个例子使工具静态化,我想动态地改变.我该怎么做?
After that, If user select Line layer, I want to hide Polygon drawing tool. I've looked here but this example is making tools static, I want to change dynamically. How can I do that?
我们将不胜感激.
推荐答案
我自己解决了.我在地图初始化时添加了这个绘制控件.
I solved it myself. I'm adding this draw control when map initialized.
drawControl = new L.Control.Draw({
draw : {
position : 'topleft',
polygon : false,
polyline : false,
rectangle : false,
circle : false
},
edit : false
});
map.addControl(drawControl);
之后,我写了一个重置绘图工具的函数.
After that, i wrote a function for resetting drawing tools.
function setDrawingTools(layerType) {
map.removeControl(drawControl);
if (layerType == 'Polygon') {
drawControl = new L.Control.Draw({
draw : {
position : 'topleft',
polygon : {
title : 'Draw a sexy polygon!',
allowIntersection : false,
drawError : {
color : '#b00b00',
timeout : 1000
},
shapeOptions : {
color : '#bada55'
},
showArea : true
},
polyline : false,
rectangle : false,
circle : false,
marker : false
},
edit : false
});
} else if (layerType == 'Line') {
drawControl = new L.Control.Draw({
draw : {
position : 'topleft',
polygon : false,
polyline : {
metric : false
},
rectangle : false,
circle : false,
marker : false
},
edit : false
});
} else if (layerType == 'Point') {
drawControl = new L.Control.Draw({
draw : {
position : 'topleft',
polygon : false,
polyline : false,
rectangle : false,
circle : false
},
edit : false
});
}
map.addControl(drawControl);
}
这篇关于Leaflet Draw Plugin:如何按图层类型动态隐藏/显示绘图工具的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:Leaflet Draw Plugin:如何按图层类型动态隐藏/显示绘图工具
基础教程推荐
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- 直接将值设置为滑块 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01