在Vue中使用Mapbox和Three.js時,如何確保三維物體的坐標點與地圖視角一致?

vue中Mapbox和Three.JS三維物體坐標與地圖視角同步

本文解決在vue項目中使用mapbox和three.js渲染三維物體時,拖動地圖視角導致物體底部偏移的問題。 目標是確保三維物體始終固定在指定的地圖坐標位置。

在Vue中使用Mapbox和Three.js時,如何確保三維物體的坐標點與地圖視角一致?

問題描述:

三維物體成功渲染在Mapbox地圖上,但拖動地圖時,物體底部會發生偏移,不再保持在初始經緯度位置。

解決方案:

立即學習前端免費學習筆記(深入)”;

核心在于同步Three.js場景矩陣和Mapbox視圖矩陣。需要修正物體位置,使其與Mapbox的墨卡托投影坐標系匹配,并考慮視角變化對三維物體投影的影響。

代碼調整:

以下代碼片段展示了render函數和calculateModelTransform函數的修改:

1. 調整render函數

使用mapboxgl.MercatorCoordinate設置物體位置,并考慮地圖視角變化。

render: (gl, matrix) => {   console.log(`custom layer rendering: ${customlayer.id}`);    const m = new THREE.Matrix4().fromArray(matrix);    // 使用墨卡托坐標系的位置   const modelPosition = mapboxgl.MercatorCoordinate.fromLngLat([point.lng, point.lat], this.modelAltitude);    const l = new THREE.Matrix4().makeTranslation(modelPosition.x, modelPosition.y, modelPosition.z)       .scale(new THREE.Vector3(modelTransform.scale, -modelTransform.scale, modelTransform.scale)) // 注意Y軸縮放的負號       .multiply(new THREE.Matrix4().makeRotationFromEuler(new THREE.Euler(this.modelRotate[0], this.modelRotate[1], this.modelRotate[2])));    customLayer.camera.projectionMatrix = m.multiply(l);   customLayer.renderer.resetState();   customLayer.renderer.render(customLayer.scene, customLayer.camera);   customLayer.map.triggerRepaint(); }

2. 調整calculateModelTransform函數:

translateZ參數設為0,確保物體底部固定在地圖上。 同時,使用meterInMercatorCoordinateUnits()獲取合適的縮放比例。

calculateModelTransform(point) {   const modelAsMercatorCoordinate = mapboxgl.MercatorCoordinate.fromLngLat([point.lng, point.lat], this.modelAltitude);   return {     translateX: modelAsMercatorCoordinate.x,     translateY: modelAsMercatorCoordinate.y,     translateZ: 0, // 物體底部固定     rotateX: this.modelRotate[0],     rotateY: this.modelRotate[1],     rotateZ: this.modelRotate[2],     scale: modelAsMercatorCoordinate.meterInMercatorCoordinateUnits() // 使用墨卡托單位下的米數進行縮放   }; }

通過以上調整,三維物體底部將始終固定在預設的經緯度位置,無論地圖視角如何變化。 請注意代碼中THREE和mapboxgl的正確引用。 Y軸縮放的負號確保物體方向正確。 使用meterInMercatorCoordinateUnits()可以更準確地控制縮放比例,使其與地圖比例一致。

? 版權聲明
THE END
喜歡就支持一下吧
點贊14 分享