Leaflet学习之路五——动态绘制图形(点、线、圆、多边形)

更新日志：
2019.1.14：更新了绘制多边形时tmpline没有移除的问题
2019.1.15：添加绘制矩形的代码

首先定义一个地图：
map = L.map("map-container").setView([51.505, -0.09], 8);

动态绘点

动态绘点就是在鼠标点击位置添加一个固定半径的圆

map.on('click',function(e){
L.circle(e.latlng,{radius:100,color:'red',fillColor:'red',fillOpacity:1}).addTo(map)
})

如果要绘制一个任意半径的圆，整个过程分为三步：

1. 鼠标按下：确定圆心
2. 按住拖动鼠标：确定半径
3. 松开鼠标：绘制
   代码如下：

    var r=0
    var i=null
    var tempCircle=new L.circle()

    map.on('mousedown', onmouseDown);
    map.on('mouseup',onmouseUp);
    map.on('mousemove',onMove)

    //map.off(....) 关闭该事件

    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
    }

动态绘线

动态绘线主要涉及到三个事件:click,dbclick,mousemove
click确定线的折点，dbclick确定线的终点，mousemove绘制鼠标移动过程中图形的变化。如果我们有一个地图map,动态绘线的代码如下：

    var points = [],geometry=[]
        var lines = new L.polyline(points)
        var tempLines = new L.polyline([])
        map.on('click', onClick);    //点击地图
        map.on('dblclick', onDoubleClick);


        //map.off(....) 关闭该事件

        function onClick(e) {

            points.push([e.latlng.lat, e.latlng.lng])
            lines.addLatLng(e.latlng)
            map.addLayer(lines)
            const node=L.circle(e.latlng, { color: '#ff0000', fillColor: 'ff0000', fillOpacity: 1 })
            map.addLayer(node)
            geometry.push(node)
            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) {
            geometry.push(L.polyline(points).addTo(map))
            points = []
            lines.remove();            
            map.off('mousemove')
            tempLines.remove();
        }

动态绘多边形

动态绘多边形同样涉及到三个事件:click,dbclick,mousemove，如果我们有一个地图map，动态绘制多边形的代码如下

        var points = [], geometry = []
        var lines = new L.polyline([])
        var tempLines = new L.polyline([], { dashArray: 5 })

        map.on('click', onClick);    //点击地图
        map.on('dblclick', onDoubleClick);
        map.on('mousemove', onMove)//双击地图

        //map.off(....) 关闭该事件

        function onClick(e) {

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

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

        function onDoubleClick(e) {
            geometry.push(L.polygon(points).addTo(map))
            points = []
            //map.removeLayer(tempLines)
            //tempLines.remove()
            lines.remove()
            tempLines.remove()
            lines = new L.polyline([])

动态绘制矩形

	let rectangle
    let tmprec
    const latlngs=[]
    map.on('mousedown', onClick);    //点击地图
    map.on('mouseup',onDoubleClick);

    //map.off(....) 关闭该事件
    function onClick(e)
    {

       if (typeof tmprec !='undefined'){
            tmprec.remove()
        }
        //左上角坐标
        latlngs[0]=[e.latlng.lat,e.latlng.lng]
        //开始绘制，监听鼠标移动事件
        map.on('mousemove',onMove)

    }
    function onMove(e) {
        latlngs[1]=[e.latlng.lat,e.latlng.lng]
        //删除临时矩形
        if (typeof tmprect!='undefined'){
            tmprect.remove()
        }
        //添加临时矩形
        tmprect=L.rectangle(latlngs,{dashArray:5}).addTo(map)
    }

    function onDoubleClick(e)
    {
        //矩形绘制完成，移除临时矩形，并停止监听鼠标移动事件
        tmprect.remove()
        map.off('mousemove')
        //右下角坐标
        latlngs[1]=[e.latlng.lat,e.latlng.lng]
        rectangle=L.rectangle(latlngs,{
            color:'#3300ff',
            fillOpacity:0,
            weight:2
        })
        rectangle.addTo(map)
        //调整view范围

        map.fitBounds(latlngs)
    }

后记：关于leaflet的学习文档可能短时间不会再更新了，基本的知识大家在文档中都可以找到，更深奥的东西我现在也不会，以后在工作过程中学到我认为有用的新内容还会继续更新，接下来我要学习另一个库openlayers。

2020.3.16更新

一直有人说画的线移除不了，这根本不是什么难事，我想说你压根就没搞清除你添加的图形是哪一个，最笨的办法你可以把map._layers打印出来看。废话我就不说了，针对线和多边形我修改了代码，如果你要移除它们，请这样做：

for(let geo of geometry){
	geo.remove()
}