千家信息网

Leaflet中如何动态勾画polygon

发表于:2024-11-20 作者:千家信息网编辑
千家信息网最后更新 2024年11月20日,这篇文章主要介绍Leaflet中如何动态勾画polygon,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!Leaflet是适用于桌面端和移动端交互地图的开源JavaScript类
千家信息网最后更新 2024年11月20日Leaflet中如何动态勾画polygon

这篇文章主要介绍Leaflet中如何动态勾画polygon,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

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"这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!

0