LeaFlet學習之動態繪制圖形

底圖使用mapbox設置樣式加載的，由於mapbox我也只會簡單的應用在這里就不多說了，本文主要講的是動態圖形的繪制寫的比較糙，代碼重復太多，僅為展示所用，可以動態繪畫點，線，圓，多邊形。

一、概述

主要的用的就是事件click、mousedown、mousemove、mouseup事件，Leaflet對繪圖好像沒有怎么封裝，我們要想自己動態繪制主要通過事件自己實現，代碼不難，簡單易懂。

二、底圖加載

        var map = L.map('map').setView([51.505, -0.09], 13);
        var selectValue = null;
        L.tileLayer('https://api.mapbox.com/styles/v1/limogu/cjjjp59s122412rqrk83bafma/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibGltb2d1IiwiYSI6ImNqampva3g1ZjFtZGQzcXFzb2hxaTJ6bGwifQ.pQ4dC_uJrE2-QhBO972B5A', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

三、繪制圖形函數封裝

        //點繪畫
        function DrawPoint() {
            map.on('click', function (e) {
                L.circle(e.latlng, { radius: 100, color: 'red', fillColor: 'red', fillOpacity: 1 }).addTo(map);
            })
        }
        //圓繪畫
        function DrawCircle() {
            var r = 0
            var i = null
            var tempCircle = new L.circle()
            map.dragging.disable();//將mousemove事件移動地圖禁用
            map.on('mousedown', onmouseDown);
            map.on('mouseup', onmouseUp);
            map.on('mousemove', onMove)
            function onmouseDown(e) {
                i = e.latlng
                //確定圓心
            }
            function onMove(e) {
                if (i) {
                    r = L.latLng(e.latlng).distanceTo(i)
                    tempCircle.setLatLng(i)
                    tempCircle.setRadius(r)
                    tempCircle.setStyle({ color: '#ff0000', fillColor: '#ff0000', fillOpacity: 1 })
                    map.addLayer(tempCircle)

                }
            }

            function onmouseUp(e) {
                r = L.latLng(e.latlng).distanceTo(i)//計算半徑
                L.circle(i, { radius: r, color: '#ff0000', fillColor: '#ff0000', fillOpacity: 1 }).addTo(map)
                i = null
                r = 0
                map.dragging.enable();
            }
        }
        //線繪畫
        function DrawLine() {
            var points = []
            var lines = new L.polyline(points)
            var tempLines = new L.polyline([])
            map.on('click', onClick);    //點擊地圖
            map.on('dblclick', onDoubleClick);


            

            function onClick(e) {

                points.push([e.latlng.lat, e.latlng.lng])
                lines.addLatLng(e.latlng)
                map.addLayer(lines)
                map.addLayer(L.circle(e.latlng, { color: '#ff0000', fillColor: 'ff0000', fillOpacity: 1 }))
                map.on('mousemove', onMove)//雙擊地圖

            }
            function onMove(e) {
                if (points.length > 0) {
                    ls = [points[points.length - 1], [e.latlng.lat, e.latlng.lng]]
                    tempLines.setLatLngs(ls)
                    map.addLayer(tempLines)
                }
            }

            function onDoubleClick(e) {
                L.polyline(points).addTo(map)
                points = []
                lines = new L.polyline(points)
                map.off('mousemove')
            }
        }
        //多邊形繪畫
        function DrawPolygon() {

            var points = []
            var lines = new L.polyline([])
            var tempLines = new L.polygon([])
            map.on('click', onClick);    //點擊地圖
            map.on('dblclick', onDoubleClick);//雙擊完成
            map.on('mousemove', onMove)
            function onClick(e) {

                points.push([e.latlng.lat, e.latlng.lng])
                lines.addLatLng(e.latlng)
                map.addLayer(lines)
                map.addLayer(L.circle(e.latlng, { color: '#ff0000', fillColor: 'ff0000', fillOpacity: 1 }))

            }
            function onMove(e) {
                if (points.length > 0) {
                    ls = [points[points.length - 1], [e.latlng.lat, e.latlng.lng]]
                    tempLines.setLatLngs(ls)
                    map.addLayer(tempLines)
                }
            }

            function onDoubleClick(e) {
                L.polygon([points]).addTo(map)
                points = []
                lines = new L.polyline([])
            }
        }

map.off（）如果不加參數就是取消所有的事件，在繪制圓的時候map.dragging.disable()將底圖拖動禁用，完成繪畫之后再次進行啟用，這樣可以避免在繪制圓的時候，地圖也跟着移動。

四、全部源碼

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="Script/leaflet/leaflet.css" rel="stylesheet" />
    <script src="Script/leaflet/leaflet.js"></script>
    <script src="../Scripts/jquery-1.7.1.js"></script>
    <style>
        #map
        {
            width: 2000px;
            height: 800px;
        }
    </style>

</head>
<body>
    <div id="map"></div>
    <input type="button" id="point" value="點 " />
    <input type="button" id="line" value="線" />
    <input type="button" id="polygon" value="多邊形" />
    <input type="button" id="circle" value="圓" />
    <input type="button" id="clear" value="清除所有命令" />
    <script>
        var map = L.map('map').setView([51.505, -0.09], 13);
        var selectValue = null;
        L.tileLayer('https://api.mapbox.com/styles/v1/limogu/cjjjp59s122412rqrk83bafma/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibGltb2d1IiwiYSI6ImNqampva3g1ZjFtZGQzcXFzb2hxaTJ6bGwifQ.pQ4dC_uJrE2-QhBO972B5A', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        L.marker([51.5, -0.09]).addTo(map)
            .bindPopup('這是一個標注')
            .openPopup();
        L.Control
        //畫個圓
        var circle = L.circle([51.505, -0.14], {
            color: 'red',
            fillColor: '#f03',
            fillOpacity: 0.5,
            radius: 50
        }).addTo(map);
        
        //動態畫點
        $("#point").click(function () {
            map.off();
            DrawPoint();
        });
        //動態畫圓
        $("#circle").click(function () {
            map.off();
            DrawCircle();
        });
        //動態繪制線
        $("#line").click(function () {
            map.off();// 關閉該事件
            DrawLine();

        });
        //動態畫多邊形
        $("#polygon").click(function () {
            map.off();// 關閉該事件
            DrawPolygon();
        });
        //清除所有命令
        $("#clear").click(function () {
            map.off();
        });
        //點繪畫
        function DrawPoint() {
            map.on('click', function (e) {
                L.circle(e.latlng, { radius: 100, color: 'red', fillColor: 'red', fillOpacity: 1 }).addTo(map);
            })
        }
        //圓繪畫
        function DrawCircle() {
            var r = 0
            var i = null
            var tempCircle = new L.circle()
            map.dragging.disable();//將mousemove事件移動地圖禁用
            map.on('mousedown', onmouseDown);
            map.on('mouseup', onmouseUp);
            map.on('mousemove', onMove)
            function onmouseDown(e) {
                i = e.latlng
                //確定圓心
            }
            function onMove(e) {
                if (i) {
                    r = L.latLng(e.latlng).distanceTo(i)
                    tempCircle.setLatLng(i)
                    tempCircle.setRadius(r)
                    tempCircle.setStyle({ color: '#ff0000', fillColor: '#ff0000', fillOpacity: 1 })
                    map.addLayer(tempCircle)

                }
            }

            function onmouseUp(e) {
                r = L.latLng(e.latlng).distanceTo(i)//計算半徑
                L.circle(i, { radius: r, color: '#ff0000', fillColor: '#ff0000', fillOpacity: 1 }).addTo(map)
                i = null
                r = 0
                map.dragging.enable();
            }
        }
        //線繪畫
        function DrawLine() {
            var points = []
            var lines = new L.polyline(points)
            var tempLines = new L.polyline([])
            map.on('click', onClick);    //點擊地圖
            map.on('dblclick', onDoubleClick);


            

            function onClick(e) {

                points.push([e.latlng.lat, e.latlng.lng])
                lines.addLatLng(e.latlng)
                map.addLayer(lines)
                map.addLayer(L.circle(e.latlng, { color: '#ff0000', fillColor: 'ff0000', fillOpacity: 1 }))
                map.on('mousemove', onMove)//雙擊地圖

            }
            function onMove(e) {
                if (points.length > 0) {
                    ls = [points[points.length - 1], [e.latlng.lat, e.latlng.lng]]
                    tempLines.setLatLngs(ls)
                    map.addLayer(tempLines)
                }
            }

            function onDoubleClick(e) {
                L.polyline(points).addTo(map)
                points = []
                lines = new L.polyline(points)
                map.off('mousemove')
            }
        }
        //多邊形繪畫
        function DrawPolygon() {

            var points = []
            var lines = new L.polyline([])
            var tempLines = new L.polygon([])
            map.on('click', onClick);    //點擊地圖
            map.on('dblclick', onDoubleClick);
            map.on('mousemove', onMove)//雙擊地圖
            function onClick(e) {

                points.push([e.latlng.lat, e.latlng.lng])
                lines.addLatLng(e.latlng)
                map.addLayer(lines)
                map.addLayer(L.circle(e.latlng, { color: '#ff0000', fillColor: 'ff0000', fillOpacity: 1 }))

            }
            function onMove(e) {
                if (points.length > 0) {
                    ls = [points[points.length - 1], [e.latlng.lat, e.latlng.lng]]
                    tempLines.setLatLngs(ls)
                    map.addLayer(tempLines)
                }
            }

            function onDoubleClick(e) {
                L.polygon([points]).addTo(map)
                points = []
                lines = new L.polyline([])
            }
        }
    </script>
</body>
</html>

五、效果圖

六、總結

代碼參考網上一些已有的代碼和官網給的，自己封裝了一些，代碼很簡單，很容易讀懂。