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