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

    }

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