动态绘点
动态绘线
动态绘多边形
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)