Mapbox瓦片尺寸与位置计算咨询及Threebox适配问题

嘿，我刚好对Mapbox GL的瓦片系统和Threebox的3D集成比较熟悉，帮你梳理清楚这个问题：

一、先澄清：Mapbox GL和Slippy Maps的逻辑是一致的 #

你觉得两者不符，大概率是混淆了投影方式或者坐标原点——Mapbox GL默认采用Web墨卡托投影（EPSG:3857），而我们常用的经纬度（LngLat）是WGS84（EPSG:4326），这两种坐标系统的转换是理解瓦片计算的核心，也是容易踩坑的地方。Slippy Maps的规范本身就基于Web墨卡托，所以本质逻辑是通的，只是Mapbox默认用512px瓦片（早期Slippy Maps多是256px），这点注意区分就行。

二、瓦片尺寸与位置的核心计算逻辑 #

1. 瓦片的尺寸（地理范围+像素） #

• 像素尺寸：Mapbox GL默认是512x512像素，你也可以通过配置修改，但绝大多数场景下用默认值。
• 地理范围：
  • 缩放级别z时，整个世界横向有2^z个瓦片，Web墨卡托投影下世界的总宽度是2 * π * 6378137米（地球半径约6378137米），所以每个瓦片的横向地理宽度是(2 * π * 6378137) / 2^z。
  • 纬度方向因为Web墨卡托的非线性拉伸，瓦片的纵向地理范围不能直接用固定值计算，必须通过经纬度和Web墨卡托坐标的转换来获取。

2. 瓦片位置（bbox）的正确计算 #

要得到瓦片的经纬度边界，正确步骤是：

1. 确定瓦片的x、y坐标（Slippy Maps规范中，x从0到2^z -1，y从0到2^z -1，原点在左上角）。
2. 将瓦片坐标转换为Web墨卡托坐标，再转成经纬度。Mapbox GL已经内置了这个转换工具：mapboxgl.MercatorCoordinate，不用自己写复杂的公式。

比如，获取某个瓦片的中心经纬度：

// 假设瓦片的x=1，y=1，缩放级别z=2
const tileX = 1;
const tileY = 1;
const zoom = 2;

// 计算瓦片左上角的Web墨卡托坐标
const worldSize = 2 * Math.PI * 6378137;
const tileSize = worldSize / Math.pow(2, zoom);
const mercatorX = -worldSize/2 + tileX * tileSize;
const mercatorY = worldSize/2 - tileY * tileSize;

// 转换为经纬度
const lngLat = new mapboxgl.MercatorCoordinate(mercatorX, mercatorY).toLngLat();

三、Fix你的Threebox 3D平面偏移问题 #

你硬编码的40.97度偏移，本质是因为直接对经纬度做线性加减，但Web墨卡托中纬度的投影是非线性的，高纬度地区的经纬度间隔对应的地理距离会被拉伸，所以简单的平均计算会出错。

正确的做法是先把经纬度转换为Web墨卡托坐标（线性的），计算中心后再转回去，或者直接用Threebox的坐标转换工具：

修正后的代码：

// 假设bounds是瓦片的经纬度边界 [minLng, minLat, maxLng, maxLat]
const minLngLat = new mapboxgl.LngLat(bounds[0], bounds[1]);
const maxLngLat = new mapboxgl.LngLat(bounds[2], bounds[3]);

// 用Mapbox内置方法转成Web墨卡托坐标
const minMercator = mapboxgl.MercatorCoordinate.fromLngLat(minLngLat);
const maxMercator = mapboxgl.MercatorCoordinate.fromLngLat(maxLngLat);

// 计算Web墨卡托坐标的中心（线性空间，平均是准确的）
const centerMercator = {
  x: (minMercator.x + maxMercator.x) / 2,
  y: (minMercator.y + maxMercator.y) / 2
};

// 转换回经纬度（如果需要显示用）
const centerLngLat = new mapboxgl.MercatorCoordinate(centerMercator.x, centerMercator.y).toLngLat();

// 用Threebox将经纬度转换为3D世界坐标，这才是Threebox空间中正确的位置
const worldPos = tb.convertLngLatToWorld(centerLngLat);

// 设置3D平面的位置
const loc_x = worldPos.x;
const loc_y = worldPos.y;
const loc_z = 0;

这样就不需要硬编码偏移了，完全遵循Mapbox的投影逻辑，不管什么缩放级别和纬度，位置都会准确。

四、推荐的学习资源 #

1. Mapbox GL JS官方文档-瓦片系统：里面详细讲解了Web墨卡托投影、瓦片坐标与经纬度的转换，还有Mapbox的具体实现细节，是最权威的资料。
2. Mapbox GL JS API参考：MercatorCoordinate类：这个类是处理坐标转换的核心，一定要仔细看它的方法和属性。
3. 手动验证小实验：拿缩放级别0、1、2的瓦片手动计算bbox，对比Mapbox返回的结果，很快就能吃透逻辑。

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