三、添加标记
案例一,添加船标并绘制行驶轨迹:
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()
}