Leaflet中如何高亮并获取选中GeoJSON多边形范围内的点要素

现有代码的核心错误点 #

• Turf方法参数顺序错误：turf.within 要求第一个参数为点要素集合，第二个参数为多边形要素集合，多次写反参数顺序会直接导致查询无结果
• 入参格式不符合要求：Turf所有空间计算方法要求传入标准GeoJSON Feature/FeatureCollection对象，直接传入.geometry.coordinates坐标数组会导致方法识别失败
• 变量作用域冲突：GetSelection函数的入参名和全局绘制图层变量名重复，会导致获取到的多边形图层数据异常

可行实现代码 #

首先提前预处理点数据源，保证是标准GeoJSON点要素集合：

// 提前将所有点要素转为标准GeoJSON FeatureCollection，仅需执行一次
const pointCollection = total.toGeoJSON();
// 存储选中的点要素
let selectedPoints = [];

map.on('draw:created', function (e) {
  placesLayer.clearLayers();
  const drawPolygon = e.layer;
  placesLayer.addLayer(drawPolygon);
  getSelection(drawPolygon);
});

function getSelection(polygonLayer) {
  // 清空上次选中结果
  selectedPoints = [];
  // 转换绘制多边形为Turf可识别的GeoJSON Feature
  const polygonFeature = polygonLayer.toGeoJSON();
  
  // 遍历所有点逐个判断是否在多边形内，逻辑更可控
  pointCollection.features.forEach(pointFeature => {
    if (turf.booleanPointInPolygon(pointFeature, polygonFeature)) {
      selectedPoints.push(pointFeature);
      // 此处可补充高亮逻辑，按自身图层存储规则修改对应点图层的样式即可
      // 示例：pointLayer.getLayer(pointFeature.id).setStyle({color: 'red', weight: 2})
    }
  })

  // 现阶段输出结果到控制台
  console.log(`找到${selectedPoints.length}个符合要求的点要素：`, selectedPoints);
  // 后续可直接遍历selectedPoints渲染到侧边面板
}

注意事项 #

• 确保所有点要素和多边形的坐标系完全一致，避免坐标偏移导致判断失败
• 使用Leaflet.draw插件绘制的多边形，直接调用.toGeoJSON()即可得到符合Turf要求的格式，无需额外转坐标
• 如果是多多边形筛选场景，可以先将多个多边形合并为turf.featureCollection，再传入turf.booleanPointInPolygon即可

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