mapbox中能像高德地图或者百度地图,在放大到一定程度,显示一些简单模型,并且可以贴一些贴图,达到一个平面的立体三维效果。
在mapbox的示例中,展示了如何加载一些立体模型的效果,这个数据是用的mapbox上的在线切片数据。
https://docs.mapbox.com/mapbox-gl-js/example/3d-buildings/
通过在网上下载建筑物轮廓的数据,也能够实现加载这种模型的效果,一种方式时,将数据转换成geojson的格式,直接进行加载,这种的缺点是在数据量很大的时候,系统性能消耗也很大,另一种就是切片成vector tile进行加载,就像地图切片一样,按照缩放的范围进行加载;这种立体建筑物的效果,需要在数据中,有一个高度的字段,或者也可以设置成一个统一的高度。
代码是加载图层的方法,关键是设置'type': 'fill-extrusion', 'fill-extrusion-height': [ 和 'fill-extrusion-base' 三个属性,通过base和height的设置,也能够达到一种悬浮在空中的效果,具体的实现方法参见官方样例。
不过,按照目前类库的实现,建筑的边线并不能设置,所以并不能显示出一种边框式的效果。