Leaflet中如何动态勾画polygon

这篇文章主要介绍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”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

文章标题：Leaflet中如何动态勾画polygon
标题来源：https://www.cdcxhl.com/article22/ghidcc.html

成都网站建设公司_创新互联，为您提供软件开发、网站改版、Google、面包屑导航、定制开发、自适应网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联