leaflet地图应用-动态标绘polygon

  leafletjs是一款优秀的开源二维地图，并提供了丰富的开发Api，下面列举一个在地图上动态标绘polygon的代码，实现起来的比较方便、简单。

  具体实现代码:

 //定义地图对象

 map = L.map('_MainMap', {

                    maxZoom: 16

                });

 //加载OSM的开源在线地图

 L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {

                    attribution: '© OpenStreetMap contributors'

                }).addTo(map);

 //点击按钮开始进行标绘：

 $(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();

       //双击事件结束标绘polygon

        function MapDoubleClick(e)

        {

            map.off('click', MapLeftClick);

            map.off("dblclick", MapDoubleClick);

             

        }

       //左键点击事件修改polygon的点

        function MapLeftClick(e) {

       //在地图上标注每个点的位置

            L.circleMarker(e.latlng, {

                radius: 2,

                color: 'red'

            }).addTo(map);

       //给polygon上增加点

            _polygon.addLatLng(e.latlng);

        }

     代码比较简单，当然在标绘时也可以自定义各个实现的属性。