mapbox实现3d建筑物分层效果（类似单体化）

mapbox实现3d建筑物分层效果

---

前言

大家再使用mapboxgl做前端webgis可视化的时候有时候需要遇到加载的矢量白膜如何能分楼层呢（类似于单体化），下面我们就给大家讲下如何mapbox实现建筑物的单体化。

---

一、效果展示

效果展示如下图：将建筑物可以进行分层展示，基于目前mapbox自带的fill-extrusion图层实现效果，逻辑相对简单无需修改mapbox源码

二、实现过程

1.数据格式相关示例

数据格式可以参考以下，关键字段楼层的索引，楼层的高度（距离地面），当然这里可以根据自己的逻辑和需求做相关调整优化：

2.可视化代码

主要核心逻辑就是根据同一个面的楼层通过 fill-extrusion-height（高度） 和 fill-extrusion-base（底部高度）两个参数去实现

代码如下（示例）：

			var map = new mapboxgl.Map({
				container: 'map',
				antialias:true,
				style: '底图服务路径'
			});


			map.on('load', function() {

				//加入建筑物数据源
				map.addSource('3dbuilding', {
					"type": "geojson",
					"data": "数据路径"
				});

				//根据数据源添加对应的图层
				map.addLayer({
					"id": "3dbuildlayer", // 唯一 id （必填）
					"type": "fill-extrusion", // 类型（必填）
					"source": "3dbuilding", // 数据源的名称
					"paint": { // 绘制类属性
						"fill-extrusion-color": "#308cd3",
						"fill-extrusion-height": ["get", "height"],
						// "fill-extrusion-base": ["*",["get","floorIndex"]-1,5]
						"fill-extrusion-base":["-",  ["*",["get","floorIndex"],5], 5]
					}
				})
				
				//高亮显示临时图层
				map.addLayer({
					"id": "3dbuildlayer-highlight", // 唯一 id （必填）
					"type": "fill-extrusion", // 类型（必填）
					"source": "3dbuilding", // 数据源的名称
					"paint": { // 绘制类属性
						"fill-extrusion-color": "#d31cac",
						"fill-extrusion-height": ["get", "height"],
						"fill-extrusion-base":["-",  ["*",["get","floorIndex"],5], 5]
					},
					"filter": ["==", "floorIndex", 0]
				})

				//鼠标移入事件
				map.on('mouseenter', '3dbuildlayer', function(e) {
					map.getCanvas().style.cursor = 'pointer';
					//选择的要素高亮展示
					var feature = e.features[0];
					map.setFilter('3dbuildlayer-highlight', ['==', 'floorIndex', feature.properties.floorIndex]);
				});

				//鼠标移出事件
				map.on('mouseleave', '3dbuildlayer', function(e) {
					map.getCanvas().style.cursor = '';
					map.setFilter('3dbuildlayer-highlight', ['==', 'floorIndex', 0]);
				});
			});