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

动态绘点

动态绘线

动态绘多边形

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