leaflet实现地图指定区域高亮，区域外变暗(基于Vue3)

本文链接：https://blog.youkuaiyun.com/m0_56023096/article/details/134991748

文章介绍了如何使用Leaflet.js库在地图上绘制多边形区域并实现高亮效果，以及如何添加折线描边。作者提供了封装的函数和经纬度数据，展示了地图拖动事件下的实时更新过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用到的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();
   })
}

实线效果：