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/
https://mp.weixin.qq.com/s?__biz=MzU2ODYzNzc4OQ==&mid=2247485642&idx=1&sn=3f013cbf0ea0ea72d1f3b00eadd66b24&chksm=fc8ba8f8cbfc21ee8e72e5846e43c0a11bd5f1f6525a55b3ec9e95dac41321ce7def3a7b46d6&token=1743499510&lang=zh_CN#rd
