Mapbox API 能否高亮用户自定义绘制多边形范围内的地图要素？

针对已经可以正常绘制自定义多边形、需要替换原有包围盒查询逻辑实现范围内要素高亮的场景，可直接复用Mapbox官方包围盒高亮示例的交互链路，仅替换范围匹配的核心环节即可。

核心实现步骤 #

• 适配queryRenderedFeatures的能力边界
  该方法原生仅支持传入屏幕像素坐标的矩形包围盒作为查询范围，不支持直接传入自定义多边形几何作为查询参数。因此首先调用无范围限制的map.queryRenderedFeatures()，指定需要查询的业务要素对应图层ID，一次性提取当前视口下所有符合要求的已渲染要素列表。
  参考代码：
  const viewportFeatures = map.queryRenderedFeatures({}, { layers: ['你的业务要素图层ID列表'] })
• 完成多边形空间关系筛选
  对提取到的所有视口要素，逐次判断要素和自定义绘制多边形的空间包含关系，筛选出落在多边形范围内的命中要素：
  • 点类要素：判断点坐标是否完全落在多边形内部
  • 线、面类要素：判断要素几何和自定义多边形是否存在有效相交
    该环节不需要自行实现复杂的射线相交算法，可直接复用成熟的空间计算能力完成判断。
• 复用原有高亮交互逻辑
  把筛选得到的命中要素集合，替换原本包围盒查询的返回结果，通过Mapbox的样式表达式调整对应要素的填充、描边属性，即可完成范围内要素的高亮效果。

落地注意事项 #

• 性能优化：先计算自定义多边形的外接矩形包围盒，用这个矩形做第一轮快速过滤，把完全落在矩形外的要素提前剔除，再针对剩余要素做精细的多边形空间判断，可大幅降低大要素量下的计算开销
• 排除干扰图层：提取视口要素的时候，记得把你用来绘制自定义多边形的临时图层ID排除在查询范围外，避免把多边形本身的图形算成命中结果

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