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

leaflet动态绘制图形

动态绘点
动态绘线
动态绘多边形
动态绘制矩形
2020.3.16更新

更新日志：
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)
})

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

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

    var r=0var i=nullvar 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=nullr=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 rectanglelet tmprecconst 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()
}