Leaflet系列：动态勾画polygon

eaflet是适用于桌面端和移动端交互地图的开源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);

        }