leaflet地圖應(yīng)用-動(dòng)態(tài)標(biāo)繪polygon

  leafletjs是一款優(yōu)秀的開源二維地圖，并提供了豐富的開發(fā)Api，下面列舉一個(gè)在地圖上動(dòng)態(tài)標(biāo)繪polygon的代碼，實(shí)現(xiàn)起來的比較方便、簡(jiǎn)單。

  具體實(shí)現(xiàn)代碼:

 //定義地圖對(duì)象

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

 //點(diǎn)擊按鈕開始進(jìn)行標(biāo)繪：

 $(document).ready(function () {

            $("#_createBtn").click(function (e) {

               //注冊(cè)地圖的左鍵點(diǎn)擊事件和雙擊事件

                map.on('click', MapLeftClick);

                map.on("dblclick", MapDoubleClick);

               //創(chuàng)建一個(gè)空的polygon，設(shè)置簡(jiǎn)單屬性

                _polygon = L.polygon(_pointArr, {

                    color: 'red',

                    fillColor: '#f03',

                    fillOpacity: 0.5

                });

                //將polygon加載到地圖上

                _polygon.addTo(map);

            });

        });

        var _polygon = null;

        var _pointArr = new Array();

       //雙擊事件結(jié)束標(biāo)繪polygon

        function MapDoubleClick(e)

        {

            map.off('click', MapLeftClick);

            map.off("dblclick", MapDoubleClick);

        }

       //左鍵點(diǎn)擊事件修改polygon的點(diǎn)

        function MapLeftClick(e) {

       //在地圖上標(biāo)注每個(gè)點(diǎn)的位置

            L.circleMarker(e.latlng, {

                radius: 2,

                color: 'red'

            }).addTo(map);

       //給polygon上增加點(diǎn)

            _polygon.addLatLng(e.latlng);

        }

     代碼比較簡(jiǎn)單，當(dāng)然在標(biāo)繪時(shí)也可以自定義各個(gè)實(shí)現(xiàn)的屬性。