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

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

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=[]
    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)
        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')
    }

动态绘多边形

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

var points=[]
    var lines=new L.polyline([])
    var tempLines=new L.polygline([])
    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(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([])
    }

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