3D地图倾斜后模型位置偏移该怎么解决？

问题应该出在你用的 map.project 方法上。这个方法本质上是把经纬度坐标转换成屏幕上的二维像素坐标，但它并不考虑地图的倾斜角度（pitch）和高度信息。当地图设置了一个较大的倾斜角时，模型的三维位置就不能单纯用二维投影来计算了，否则就会出现偏移甚至飞出屏幕的情况。

要解决这个问题，需要引入三维空间的坐标转换，而不是仅仅依赖二维投影。具体来说，可以借助 map.unproject 或者直接使用 Three.js 的场景坐标系来处理。这里推荐一个更靠谱的思路：通过 Mapbox 提供的自定义图层功能，将 Three.js 的场景与地图的相机同步起来。

下面是一个改进的代码示例：

// 在初始化 Three.js 场景时，确保与 Mapbox 相机同步

function setupThreeJSScene(map) {

  const scene = new THREE.Scene();

  const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);

  const renderer = new THREE.WebGLRenderer({ alpha: true });



  // 设置渲染器大小并插入到 DOM 中

  renderer.setSize(window.innerWidth, window.innerHeight);

  document.body.appendChild(renderer.domElement);



  // 自定义图层用于同步相机

  const customLayer = {

    id: '3d-model-layer',

    type: 'custom',

    renderingMode: '3d',

    onAdd: function (map, gl) {

      this.map = map;

    },

    render: function (gl, matrix) {

      // 同步 Three.js 相机与 Mapbox 相机

      const cameraMatrix = map.transform.cameraMatrix;

      camera.projectionMatrix.fromArray(cameraMatrix);

      camera.projectionMatrixInverse.getInverse(camera.projectionMatrix);



      // 渲染 Three.js 场景

      renderer.render(scene, camera);

    }

  };



  // 添加自定义图层到地图

  map.addLayer(customLayer);

}



// 转换 WGS84 坐标到 Three.js 场景中的世界坐标

function convertWGS84ToWorld(coords, map) {

  const { lng, lat } = coords;

  const altitude = 0; // 如果有地形高度，可以从地形数据中获取

  const point = map.project(new mapboxgl.LngLat(lng, lat), map.getZoom());

  const worldPosition = map.unproject([point.x, point.y, altitude]);

  return new THREE.Vector3(worldPosition.lng, worldPosition.lat, altitude);

}



// 使用示例

const modelPosition = convertWGS84ToWorld({ lng: 120, lat: 30 }, map);

const model = new THREE.Mesh(geometry, material);

model.position.copy(modelPosition);

scene.add(model);

关键点在于：
1. 通过 map.unproject 方法将屏幕坐标反向映射到世界坐标系，同时带上高度信息。
2. 使用 Mapbox 的自定义图层功能，让 Three.js 的相机与 Mapbox 的相机保持同步。
3. 如果你的模型需要贴合地形，还需要从地形数据中获取具体的海拔高度，并将其作为第三个参数传入。

这种做法能确保模型在地图倾斜时仍然正确地贴合在地形上，不会飞出去或者偏移。调试起来可能稍微有点复杂，但效果会很稳定。如果还有问题，可以再细聊。

你遇到的问题主要是因为地图倾斜后，二维投影坐标已经不足以正确描述三维空间中的位置了。Mapbox的project方法只返回屏幕上的xy坐标，但倾斜视角下还需要考虑高度信息，也就是z轴。

试试这个方法：在转换坐标时，除了xy平面，还要加上地形高度或海拔数据。可以通过Mapbox的queryTerrainElevation方法获取指定点的高程值，然后将这个值作为模型的z坐标。

具体可以这么改你的代码：

async function convertWGS84ToMapbox3D(coords) {

  const {lng, lat} = coords;

  const mbcoords = map.project(

    new mapboxgl.LngLat(lng, lat),

    map.getZoom()

  );



  // 获取地形高度

  const elevation = await map.queryTerrainElevation(

    [lng, lat],

    { exaggerated: true }

  );



  return {x: mbcoords.x, y: mbcoords.y, z: elevation || 0};

}

另外，记得检查模型的缩放比例和单位是否和Mapbox一致。Mapbox用的是米为单位，如果你的模型是厘米或者其他单位，还需要做一次单位转换。

最后吐槽一句，处理三维投影真是个坑，我之前也被这个问题折腾过好几次，尤其是地形数据不准的时候更头疼。不过加上高程后应该能解决你的问题了。