leaflet地圖應用-動態標繪polygon

  leafletjs是一款優秀的開源二維地圖，并提供了豐富的開發Api，下面列舉一個在地圖上動態標繪polygon的代碼，實現起來的比較方便、簡單。

  具體實現代碼:

 //定義地圖對象

 map = L.map('_MainMap', {

                    maxZoom: 16

                });

 //加載OSM的開源在線地圖

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

                    attribution: '&copy; <a >OpenStreetMap</a> 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);

        }

     代碼比較簡單，當然在標繪時也可以自定義各個實現的屬性。