Mapbox点击事件返回分片要素：如何获取完整原始多边形？

问题分析与解决方案 #

为什么单个多边形会被分片？ #

Mapbox的GeoJSON数据源默认会做瓦片化切割处理：它会把跨多个地图瓦片（不同zoom级别下的x/y网格单元）的大地理要素，拆分成对应瓦片范围内的片段。这么做是为了优化地图渲染性能，避免超大要素拖慢地图响应。所以点击事件返回的要素、querySourceFeatures查询到的结果，都是当前瓦片内的要素片段，而非原始的完整多边形。

如何获取完整原始多边形保证计算准确？ #

最可靠的方案是提前缓存原始GeoJSON数据，通过要素ID匹配获取完整要素，具体步骤如下：

1. 缓存原始GeoJSON要素集合
   在添加数据源前，把加载的polyData存在全局可访问的变量中：

// 缓存原始县要素数据
const originalCountyFeatures = polyData.features;

2. 在点击事件中通过ID匹配完整要素
   因为你设置了promoteId: 'county'，点击返回的feature的id就是对应县的county字段值，用这个ID去原始数据中匹配完整要素即可：

map.on('click', 'county-active-fill', (e) => {
  // 获取点击片段的县ID
  const clickedCountyId = e.features[0].id;
  // 从原始数据中找到完整的县多边形要素
  const fullCountyFeature = originalCountyFeatures.find(feature => feature.properties.county === clickedCountyId);
  
  // 使用完整要素进行turf计算
  const countyArea = turf.area(fullCountyFeature);
  // 后续交集计算等逻辑都基于fullCountyFeature处理
});

额外说明 #

• 不推荐修改数据源参数禁用瓦片化（比如设置maxzoom: Infinity），虽然能避免分片，但会导致大要素在低缩放级别下渲染性能下降，18个县的场景下缓存原始数据是更高效的选择。
• querySourceFeatures查询的是当前加载的瓦片内的要素片段，无法直接获取完整原始要素，必须依赖缓存的原始数据。

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