扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇文章主要介绍Leaflet中如何动态勾画polygon,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
10年积累的成都网站建设、网站制作经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有额济纳免费网站建设让你可以放心的选择与我们合作。
Leaflet是适用于桌面端和移动端交互地图的开源JavaScript类库。JS库的大小经过压缩后有38k左右,拥有开发者需要的全部地图功能。
Leaflet保持着简单、性能和实用性的设计思想。可以在所有主要的桌面和移动端平台上高效的运转,可以扩展插件,它有一个漂亮、易用和文档清晰的API,有一个简单、易读的源代码。
下边根据代码,简单列举一下如何在地图上动态标绘polygon:
模式是点击按钮开始画polygon,左键每点击一次,动态变化polygon,在地图上双击,结束标绘。
$(document).ready(function () { //在按钮中设置启动标绘 $("#_createBtn").click(function (e) { //添加地图上的左键、鼠标双击事件 map.on('click', MapLeftClick); map.on("dblclick", MapDoubleClick); //定义地图的polygon对象,初始化传入空数组,设置颜色等属性 _polygon = L.polygon(_pointArr, { color: 'red', fillColor: '#f03', fillOpacity: 0.5 }); //将polygon添加到地图上 _polygon.addTo(map); }); }); var _polygon = null; var _pointArr = new Array(); //双击结束地图标绘 function MapDoubleClick(e) { //关掉地图的鼠标点击事件 map.off('click', MapLeftClick); map.off("dblclick", MapDoubleClick); alert("doubleClick"); } //启动地图左键事件 function MapLeftClick(e) { //每点击一下在地图上画一个小红点 L.circleMarker(e.latlng, { radius: 2, color: 'red' }).addTo(map); //polygon上动态添加点 _polygon.addLatLng(e.latlng); }
以上是“Leaflet中如何动态勾画polygon”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流