Mapbox GL中3D建筑物的加载

接触Mapbox GL也有一段时间了，一直也没时间将实现的一些demo分享出来，这次就将之前遇到的一个需求分享一下。
UI那边需要分别对建筑物顶层和周身进行渲染，想了半天终于想到个方法。故在此分享一下。

            {
                //建筑物
                "id": "buildingarea",
                'type': 'fill-extrusion',
                "source": "os",
                "minzoom": 15,
                "source-layer": "asset_normal_bdtest",
                'paint': {
                    'fill-extrusion-color': "#0f3662",
                    'fill-extrusion-height': ["to-number",["get", "HEIGHT"]],
                    'fill-extrusion-base': 0,
                    "fill-extrusion-pattern": "sion-material-32",
                    'fill-extrusion-opacity': 1
                }
            },
            {
                //建筑物顶层
                "id": "buildingtop",
                'type': 'fill-extrusion',
                "source": "os",
                "minzoom": 15,
                "source-layer": "asset_normal_bdtest",
                'paint': {
                    'fill-extrusion-color': "#32373b",
                    'fill-extrusion-height': ["to-number",["get", "HEIGHT"]],
                    'fill-extrusion-base': ["to-number",["get", "HEIGHT"]],
                    'fill-extrusion-opacity': 1
                }
            }

效果图如下：

image.png

当然，根据计算出的建筑物高度，可以对每个楼层都分别渲染，以达到更加酷炫的效果。