【leafletjs】添加標記、軌跡線與刪除標記、軌跡線

三、添加標記

案例一，添加船標並繪制行駛軌跡：

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