MapBox 2D建筑轮廓点击算面积：无法获取Tileset数据求助

Tileset数据无法读取的排查项 #

按优先级从上到下排查，90%的这类问题都是前三个原因导致的：

• 校验Token权限：确认你前端使用的access token已开通目标tileset的读取权限，私有tileset默认不对公开token开放访问，需要在账号后台给对应token勾选tileset:read权限范围；如果账号tileset调用配额超限，瓦片请求会直接被拦截，也拿不到数据
• 核对Source配置：地图初始化加载样式后，检查是否正确注册了建筑轮廓的矢量瓦片源：source类型必须设为vector，tileset ID要和后台显示的完全一致（注意区分大小写，不要漏了账号前缀）；如果是从Mapbox Studio导出的样式，要确认导出时勾选了自定义tileset源，很多人导出时只选了图层没选源，前端加载样式后自然找不到对应数据
• 核对图层关联配置：渲染建筑轮廓的fill/line图层，必须正确绑定对应的source，且source-layer字段值要和tileset生成时设置的图层名完全匹配，这个字段拼写错误是最常见的故障点——瓦片能正常请求，但图层渲染不出来，点击也拾取不到要素
• 控制台请求校验：打开浏览器开发者工具的Network面板，筛选矢量瓦片请求（后缀一般是.pbf），查看请求返回状态：401代表token无效/权限不足，404代表tileset ID或source-layer配置错误，403代表账号被限流或资源被封禁

2D视图点击计算建筑面积实现逻辑 #

Tileset正常加载渲染后，按以下逻辑实现即可：

• 给地图绑定click事件，触发时调用map.queryRenderedFeatures()方法，传入点击的屏幕坐标、指定建筑轮廓图层ID，获取点击位置命中的建筑矢量要素；纯2D视图下要把地图pitch值设为0，避免透视偏移导致拾取不准
• 不要直接用经纬度坐标计算多边形面积，球面坐标直接计算的结果误差会达到20%以上，直接用Turf.js的面积计算方法即可，传入拿到的建筑GeoJSON要素，会直接返回单位为平方米的面积值，参考实现代码：

// 地图加载完成后绑定事件
map.on('click', (e) => {
  // 替换为你自己配置的建筑轮廓图层ID
  const hitBuildings = map.queryRenderedFeatures(e.point, {
    layers: ['building-footprint-fill']
  })
  if (!hitBuildings.length) return
  // 计算面积，单位平方米
  const buildingArea = turf.area(hitBuildings[0])
  // 后续可自定义弹窗展示、要素高亮等逻辑
  console.log(`选中建筑面积：${buildingArea.toFixed(2)} ㎡`)
})

• 如果需要高精度的面积结果，把要素坐标转换到测区对应的本地平面投影（比如美国加州区域用EPSG:3310投影）后再计算，普通展示场景下Turf默认的计算精度足够使用

额外踩坑提示 #

• 如果同时加载了Mapbox默认3D建筑图层，2D视图下要关闭3D建筑的extrusion效果，否则3D图层会遮挡2D轮廓图层，导致拾取失败
• 自定义tileset上传时要检查矢量数据的坐标系，必须是WGS84（EPSG:4326），否则瓦片会出现偏移，点击拾取位置和实际建筑位置对不上

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