leafletjs添加标记轨迹线与删除标记轨迹线

Posted 2021-06-11 lisicn

三、添加标记

案例一，添加船标并绘制行驶轨迹：

var myMap = L.map(\'mapMain\').setView([37.55, 122.08], 10);

/*定义标记*/
var boatIcon = L.icon({
    iconUrl: "{% static \'http_app/index/img/boat3.png\' %}",
    iconSize: [23, 30],   //icon的大小
    iconAnchor: [15, 15]  //icon指定点与实际坐标点的偏移量，此处为底部中心点
});

var boatMarker = L.marker([], {   //坐标留空，方便后续添加
    icon: boatIcon,
    draggable: false,  //不允许拖动
})

var boatLineGroup = L.layerGroup([])  //轨迹线图层组，方便管理
boatLineGroup.addTo(myMap) 
var boatLines = L.polyline([], {color: \'#3fe522\', weight: 2,}) //轨迹线的样式设定

var boatLineList = []   //绘制轨迹用的

function addBoat(lat_value, long_value) {
    boatMarker.setLatLng([lat_value, long_value])
    boatMarker.addTo(mymap)

    boatLineList.push([lat_value, long_value]) //添加至轨迹数组，绘制轨迹用
}
function moveBoat(lat_value, long_value, yaw) {
    //parse: 经纬度、角度
    boatMarker.setLatLng([lat_value, long_value]) //设定船的新坐标
    boatMarker.setRotationAngle(yaw);   //旋转船标,1~360，需要leaflet.rotatedMarker.js

    const boat_line_line = boatLineList.push([lat_value, long_value])

    boatLineGroup.addLayer(boatLines)    //向图层组添加轨迹线
    if (boat_line_line > 1) { 
        redrawLine(boatLines, boatLineList)
    }
}
function redrawLine(line_obj, line_list) {
    //接收一个线对象、坐标数组，重绘
    line_obj.setLatLngs(line_list) //给轨迹线设定坐标值，参数为数组
    line_obj.redraw()
}

标记的实际图片为：

案例二，添加坐标标记并绘制连接线：

/*双击添加标记，绘制连接线，拖动标记重绘连接线*/
var marker_group = L.layerGroup([]) //图层组，存放marker
marker_group.addTo(mymap)

var line_group = L.layerGroup([])  //图层组，存放绘线为marker计数，不可放置同一组
line_group.addTo(mymap)

var polylinelist = []    //拖动期间该值将被修改
var polylinelist_cache = []   //拖动结束后该值将被修改

var marker_lines = L.polyline([], {color: \'#25db71\', weight: 1, dashArray: [5, 5],})  //定义线的样式


mymap.on("dblclick", function (e) {
    //双击事件
    addMarker(e.latlng.lat, e.latlng.lng)
})

function redrawLine(line_obj, line_list) {
    //接收一个线对象、坐标数组，重绘
    line_obj.setLatLngs(line_list)
    line_obj.redraw()
}


function IniDivIcon(marker_id) {
    //初始化marker，使其具有编号
    return L.divIcon({
        className: \'my-div-icon\',
        html: "<p class=\'text-center\' style=\'margin-bottom:0;font-size:22px;color:#00ff3a;\'>" +
        marker_id +
        "</p>" +
        "<img src=\'{% static \'http_app/index/img/position.png\' %}\' height=30 width=22>",
        iconSize: [23, 30],
        iconAnchor: [11, 63],
    });
}


function addMarker(lat, long) {
    //增加新的marker
    const marker_id = Object.keys(marker_group._layers).length + 1
    const marker = L.marker([lat, long], {
        icon: IniDivIcon(marker_id),
        draggable: true,  //允许拖动
    })
    console.log(lat, long,"marker_id",marker_id)
    marker_group.addLayer(marker)
    //绑定弹出框

    //为每个marker绑定事件
    marker.on("drag", function (e) {
        //拖动事件
        IconOnMove([e.latlng.lat, e.latlng.lng], [e.oldLatLng.lat, e.oldLatLng.lng])
    })
     marker.on("dragend", function (e) {
         //拖动停止事件
         polylinelist_cache = Array.from(polylinelist)  //深copy
     })
     marker.on("contextmenu", function (e) {
         //右键事件
         alert("删除标记？")
         console.log(e)
     })

     //根据marker增加轨迹线
     const latlngs_length = polylinelist.push([lat, long])  //push返回新的长度
     polylinelist_cache.push([lat, long])
     if (latlngs_length >= 3){
         redrawLine(marker_lines, polylinelist)
     } else if (latlngs_length < 3 && latlngs_length > 1) {
         marker_lines.setLatLngs(polylinelist)
         line_group.addLayer(marker_lines)
     }
}

function IconOnMove(new_latlng, old_latlng) {
    //移动marker，更新轨迹线
    if (polylinelist_cache.length < 2) {
        return
    }
    polylinelist_cache.forEach(function (value, index) {
        // 遍历连接线的数据列表，与 old_latlng对比，根据index赋予新值
        const result = value.toString() === old_latlng.toString()

        if (result) {
            polylinelist[index] = new_latlng
            redrawLine(marker_lines, polylinelist)
        }
    })
}

标记的实际图片为：

四、删除标记

删除标记/图层

var marker_group = L.layerGroup([])  //图层组
marker_group.addTo(mymap)
var line_group = L.layerGroup([])  //轨迹线组
line_group.addTo(mymap)

function clearAllIcon() {
    //清除所有图层组
    marker_group.clearLayers()
    line_group.clearLayers()
}