mapbox-gl近日更新到了2.0.0版本，有两个更新对地图的体验和实用性有了相当大的提升。
一是自身完善了地图引擎对高程数据的支持（DEM）：
二是调整了观看视角，以前限制到只能以60度的倾角观看，现在放宽到可以以85度的视角观看，基本达到平视的效果，同时添加了天空盒的效果，优化平视观看到的场景：
mapbox-gl的代码开发中，集成了three.js的示例，在地图加载了一个gltf格式的三维模型。
通过在mapbox-g加载自定义图层的形式，实现three.js场景中的对象，实时同步显示。
关键代码示例说明
//three.js类库引用，根据开发的实际引用不同的类库
//设置地图上一点的坐标为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/
标签：...,three,js,mapbox,var,gl 来源： https://blog.csdn.net/wclwksn2019/article/details/119342119
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。