mapbox-gl集成three.js开发

引言

mapbox-gl近日更新到了2.0.0版本，有两个更新对地图的体验和实用性有了相当大的提升。

一是自身完善了地图引擎对高程数据的支持（DEM）：

二是调整了观看视角，以前限制到只能以60度的倾角观看，现在放宽到可以以85度的视角观看，基本达到平视的效果，同时添加了天空盒的效果，优化平视观看到的场景：

mapbox-gl的代码开发中，集成了three.js的示例，在地图加载了一个gltf格式的三维模型。

通过在mapbox-g加载自定义图层的形式，实现three.js场景中的对象，实时同步显示。

关键代码示例说明
//three.js类库引用，根据开发的实际引用不同的类库
<script src="​​https://unpkg.com/three@0.106.2/build/three.min.js​​"></script>
<script src="​​https://unpkg.com/three@0.106.2/examples/js/loaders/GLTFLoader.js​​"></script>
//设置地图上一点的坐标为three.js的中心点坐标位置，以这个建立转换坐标系
var modelOrigin = [148.9819, -35.39847];
var modelAltitude = 0;
var modelRotate = [Math.PI / 2, 0, 0];
var modelAsMercatorCoordinate = mapboxgl.MercatorCoordinate.fromLngLat(
modelOrigin,
modelAltitude
);
// three.js对象转换成地图位置的转换参数设置（平移、旋转、缩放）
var modelTransform = {
translateX: modelAsMercatorCoordinate.x,
translateY: modelAsMercatorCoordinate.y,
translateZ: modelAsMercatorCoordinate.z,
rotateX: modelRotate[0],
rotateY: modelRotate[1],
rotateZ: modelRotate[2],

scale: modelAsMercatorCoordinate.meterInMercatorCoordinateUnits()
};

自定义图层的onAdd方法中，新建一个three.js的场景，设置灯光、添加模型等场景对象，具体参见示例代码；

render中的代码对three.js场景中的对象进行实时转换，这个是很关键的，平移、旋转、缩放，达到和地图场景保持一致。

render: function (gl, matrix) {
var rotationX =...;

var rotationY = ...;
var rotationZ = ...;
var m = new THREE.Matrix4().fromArray(matrix);
var l = new THREE.Matrix4()
.makeTranslation(
...

)
.scale(
new THREE.Vector3(
...

)
)
.multiply(rotationX)
.multiply(rotationY)
.multiply(rotationZ);
this.camera.projectionMatrix = m.multiply(l);
this.renderer.state.reset();
this.renderer.render(this.scene, this.camera);
this.map.triggerRepaint();

引用内容：

​​https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model/​​