leaflet中文文档:https://leafletjs.cn/
使用到的leaflet相关方法:L.polyline(绘制折线) L.polygon(绘制多变形)
1. 封装绘制多边形函数:实现选中区域高亮,区域外变暗
function drawPolygon() { // 获取此时地图的四个角经纬度 let mapNW = map.value.getBounds().getNorthWest(); let mapNE = map.value.getBounds().getNorthEast(); let mapSE = map.value.getBounds().getSouthEast(); let mapSW = map.value.getBounds().getSouthWest(); // 四个角经纬整理成一组数据 let fourLatlng = [[mapNW.lat, mapNW.lng], [mapNE.lat, mapNE.lng], [mapSE.lat, mapSE.lng], [mapSW.lat, mapSW.lng]]; // 要绘制的区域经纬度数据 let checkLatlng = [ [-58.033905029296875, 120.20416259765625], [-58.03733825683594, 120.43418884277344], [-58.13690185546875, 120.42526245117188], [-58.21449279785156, 120.43968200683594], [-58.38958740234375, 120.45616149902344], [-58.44451904296875, 120.38475036621094], [-58.42460632324219, 120.25154113769531], [-58.32366943359375, 120.28312683105469], [-58.19732666015625, 120.24879455566406], [-58.077850341796875, 120.19935607910156] ] let latlngs = [fourLatlng, checkLatlng] // 移除图层-不移除图层会不断叠加遮罩 if (polygonArea.value) { polygonArea.value.remove(map.value); polygonArea.value = null; } // 绘制多边形区域 polygonArea.value = L.polygon( latlngs, { color: "#9cdbff", // 线条颜色,weight为0时不会显示 可以不设置 fillColor: "#000", // 区域颜色 fillOpacity: 0.7, // 区域颜色透明度 weight: 0, // 线条粗细 } ).addTo(map.value); };
在地图初始化和地图拖动事件中调用上述函数
function initMap() { ..... drawPolygon(); // 地图拖动事件(中心点改变会触发) map.value.on("moveend", () => { drawPolygon(); }) }
实现效果:
此时已实现绘制的区域高亮,其他区域变暗,但还需要给绘制的区域添加一个描边效果。
2.封装绘制折线函数:实现给绘制的区域添加描边效果
function drawPolyline() { // 和绘制多边形区域的经纬度数据对应 let latlngs = [ [-58.033905029296875, 120.20416259765625], [-58.03733825683594, 120.43418884277344], [-58.13690185546875, 120.42526245117188], [-58.21449279785156, 120.43968200683594], [-58.38958740234375, 120.45616149902344], [-58.44451904296875, 120.38475036621094], [-58.42460632324219, 120.25154113769531], [-58.32366943359375, 120.28312683105469], [-58.19732666015625, 120.24879455566406], [-58.077850341796875, 120.19935607910156], [-58.033905029296875, 120.20416259765625], ] // // 移除图层-不移除图层会不断画线 if (polygonLine.value) { polygonLine.value.remove(map.value); polygonLine.value = null; } polygonLine.value = L.polyline( latlngs, { color: "#9cdbff", // 线条颜色 weight: 3, // 线条粗细 dashArray: "15,10,5,10" // 线条样式,不填为实线 } ).addTo(map.value); }
dashArray不同字段对应的线条样式(同样适用于polygon):
字段 样式 5,5 5,10 10,5 5,1 1,5 0.9 15,10,5 15,10,5,10 15,10,5,10,15 5,5,1,5 在地图初始化和地图拖动事件中调用上述函数
function initMap() { ..... drawPolygon(); drawPolyline(); // 地图拖动事件(中心点改变会触发) map.value.on("moveend", () => { drawPolygon(); drawPolyline(); }) }
实线效果: