Bootstrap

js室内地图开发_mapboxgl集成three.js开发

引言

mapbox-gl近日更新到了2.0.0版本,有两个更新对地图的体验和实用性有了相当大的提升。 一是自身完善了地图引擎对高程数据的支持(DEM):

f7ecfb5c1cb2fc6e73deb29e85b6520b.png

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

f07f23adc29c1e74656e51e032fca1b7.png

mapbox-gl的代码开发中,集成了three.js的示例,在地图加载了一个gltf格式的三维模型。 通过在mapbox-g加载自定义图层的形式,实现three.js场景中的对象,实时同步显示。

关键代码示例说明

//three.js类库引用,根据开发的实际引用不同的类库

<script src="https://unpkg.com/[email protected]/build/three.min.js">script>

<script src="https://unpkg.com/[email protected]

;