基于Marker拖拽终点位置从GeoJSON获取对应Polygon区域信息

问题描述 #

我需要基于GeoJSON文件中的数据在Leaflet地图上叠加Polygon以展示区域自定义名称。该GeoJSON文件包含Polygon坐标及对应区域名称，目前已成功在地图上创建Polygon，但需实现Marker拖拽结束时，获取终点所在Polygon的区域信息，现有代码如下：

this.polygons = [];

let self = this;
fetch('assets/Chesapeake_Bay_92_Segments.geojson')
  .then(function (response) {
    console.log("Response")
    return response.json();

  })
  .then(function (data) {
    // use geoJSON
    console.log("Use geoJSON")
    leaflet.geoJSON(data, {
      style: function (feature) {
        return {
          fillColor: 'blue',
          weight: 2,
          opacity: 1,
          color: 'white',  //Outline color
          fillOpacity: 0.7
        };
      }, onEachFeature: function (feature:any, layer) {
        console.log("Feature", feature)
      
        let polygonLocationData: PolygonLocation = {
          polygon: leaflet.polygon(geometry.coordinates, { color: 'red' }),
          location: feature.location,
          shapeArea: feature.Shape_Area
        }
        self.polygons.push(polygonLocationData);
      },
    }       
    ).addTo(self.map);
  });

解决步骤 #

1. 修正Polygon存储逻辑 #

现有代码存在geometry未定义的错误，且无需重复创建Polygon图层（layer参数本身就是Leaflet生成的Polygon实例），修改onEachFeature回调：

onEachFeature: function (feature: any, layer) {
  console.log("Feature", feature);
  // 直接使用Leaflet生成的layer，无需重新创建polygon
  let polygonLocationData: PolygonLocation = {
    polygon: layer, // 替换原错误的polygon创建代码
    location: feature.location,
    shapeArea: feature.Shape_Area
  };
  self.polygons.push(polygonLocationData);
}

2. 给Marker添加拖拽结束事件监听 #

确保Marker已开启拖拽（通过draggable: true配置），添加dragend事件回调来判断点所在区域：

// 假设你的Marker实例是self.marker
self.marker.on('dragend', function(e) {
  // 获取拖拽结束后的坐标
  const endPoint = e.target.getLatLng();
  // 遍历存储的Polygon，判断点是否在Polygon内
  const targetPolygon = self.polygons.find(item => {
    return item.polygon.contains(endPoint);
  });
  if (targetPolygon) {
    console.log("所在区域信息：", targetPolygon.location);
    // 这里可以自定义后续逻辑，比如把区域名称展示到页面上
  } else {
    console.log("未找到所在区域");
  }
});

3. 完整代码示例 #

this.polygons = [];
// 假设已初始化好map和可拖拽的marker
let self = this;

fetch('assets/Chesapeake_Bay_92_Segments.geojson')
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    leaflet.geoJSON(data, {
      style: function (feature) {
        return {
          fillColor: 'blue',
          weight: 2,
          opacity: 1,
          color: 'white',
          fillOpacity: 0.7
        };
      }, 
      onEachFeature: function (feature: any, layer) {
        let polygonLocationData: PolygonLocation = {
          polygon: layer,
          location: feature.location,
          shapeArea: feature.Shape_Area
        };
        self.polygons.push(polygonLocationData);
      },
    }).addTo(self.map);

    // 绑定Marker拖拽结束事件
    self.marker.on('dragend', function(e) {
      const endPoint = e.target.getLatLng();
      const targetPolygon = self.polygons.find(item => item.polygon.contains(endPoint));
      if (targetPolygon) {
        console.log("所在区域名称：", targetPolygon.location);
        // 自定义区域信息的展示逻辑
      } else {
        console.log("该点不在任何区域内");
      }
    });
  });

注意事项 #

• 确保feature.location是GeoJSON中存储区域名称的字段，若实际字段名不同（比如feature.properties.name），需对应修改。
• Leaflet的contains方法仅对Polygon/MultiPolygon图层有效，若GeoJSON包含其他类型要素，需提前过滤。

内容的提问来源于stack exchange，提问作者mobile devteam