概述
前面有文章说到了室内地图的展示，在本文讲述如何在mapboxGL中如何实现楼层的展示与单体化选中效果。
实现
实现后效果如下：
实现
1. 实现思路
- 通过
fill-extrusion实现楼层的立体化展示； - 通过
fill-extrusion-height和fill-extrusion-base实现多楼层不同的高度展示； - 通过
fill-extrusion-pattern设置墙面纹理； - 通过
turf计算高亮的数据；
2. 实现代码
1. 数据处理
代码语言：javascript复制const coords = [ [ [ 113.885632905452397, 22.552818892926712 ], [ 113.885771878698918, 22.553046303693751 ], [ 113.886302503822009, 22.553484279985827 ], [ 113.887106864127674, 22.554212836702447 ], [ 113.887443768967728, 22.554246527186454 ], [ 113.888075465542826, 22.55364430978485 ], [ 113.888214438789362, 22.553412687707311 ], [ 113.890008457062649, 22.551715529575528 ], [ 113.889991611820648, 22.55150075273999 ], [ 113.88778909642879, 22.549538282046655 ], [ 113.88754484041975, 22.549454055836641 ], [ 113.887182667716687, 22.549407731421134 ], [ 113.886353039548055, 22.54956776122016 ], [ 113.885784512630451, 22.549727791019198 ], [ 113.88556552448442, 22.550098386343258 ], [ 113.885632905452397, 22.552818892926712 ] ] ]
const floorNums = 10, floorHeight = 20, floorTop = 2
let features = [], featuresH = []
for (let i = 0; i <= floorNums; i ) {
const baseH = i * floorHeight,
topH = baseH floorHeight,
h = topH - floorTop
const feature = {
"type": "Feature",
"properties": {height: h, baseHeight: baseH, type: 'building', floor: i},
"geometry": { "type": "Polygon", "coordinates": coords }
}
features.push(feature)
features.push({
"type": "Feature",
"properties": {height: topH, baseHeight: h, type: 'top', floor: i},
"geometry": { "type": "Polygon", "coordinates": coords }
})
// 高亮图层
const buffer = turf.buffer(feature, 0.001)
featuresH.push(turf.difference(buffer, feature))
}2. 添加数据源和图层
代码语言：javascript复制map.addSource('building', {
type: 'geojson',
data: {
"type": "FeatureCollection",
"features": features
}
.addSource('building-hightlight', {
type: 'geojson',
data: {
"type": "FeatureCollection",
"features": featuresH
}
map.loadImage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAMAAACDi47UAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8 IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODEwRDA1MjcyOUQxMTFFRTkxMjdDMDAyNjdBOUYwNjQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODEwRDA1MjgyOUQxMTFFRTkxMjdDMDAyNjdBOUYwNjQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4MTBEMDUyNTI5RDExMUVFOTEyN0MwMDI2N0E5RjA2NCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4MTBEMDUyNjI5RDExMUVFOTEyN0MwMDI2N0E5RjA2NCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhZsMswAAAI0UExURbWggqmWf7CbgLWfgLSghLSega2XepuMeLCafpKCb7CafMWukZ6PerWhgayUd6yUeK2Xe7 kg66afLmjg7ulg7Wdgb nibaegbSghayZfcq1l8u2lsSqirSegq2Yfcizla2Zf8ewjqybg7WggMSsiq2ZfrWghLWihpGDc8OqjK6bf7OegLCehraef7OegYl2Y6 dgrKdhJqJdq2bg458aMOpicClgrqkio9/a6qXfaeWfrejh7qnjLOcfbOaeamVfrGbfbSfhaKQebCaerGcgWVdVbKbf8uzkMmykaSTeMWujsiykqqUdsevjLihgqeVgqiUg6uTdbOce8OriVBLRllSS8ixlK6Xeq6ZgMCoh8WvkbSafcivirahgqmXgMKskbehhK dgbWiib2nhr6nhqmXgayVdq Zga afbiig7ehgbaggKeUfrGdgK2ZfLSff6ubh6yYfrSgg7WhiZmHdcSrjJiKdrOfgYV1Y76lgbKcf7KghLKegLCbg9jAnLGgidW8mLCafcGqiaqYgcCsirqjhrCZea ficqzl7yjgr6oibahhqCQfLqkh7Gdf7efgKaOc7Seg62VeKGQerqkhcSrjcOqiZiHcrSggaWUe6CPfKqahYJyYpGCcJ6PfMCnhbGafebNqYt6aayTds66nrKdgq6Ye8SqiL6mg6aSer6niLaig5qJdbahhLGafMStjqyXeHFnW66Yep Pe8GujZWEb5GCbJGAbKOPebeli5WDb7ukgql iIEAAADgSURBVHjaANIALf8AVHgoMnR2Cay2nbovt5e1NDicolUAQn6KGyG0Y0d1SE2nllNkeSSFXEkAmlYYYFgqDWlnmJStsFFAsg jFJkAB0s3PLlzRIEGLhNrbz2GFxCQgowABxpiJwQZIFtDHS0 BSOuEo4VXwkADKRhADBoXQOPi6YAAAKgZgSSapMAnh8CfSZBO20KenyrA0YGCAVMu14As4gle3GlkSseDo1OCghSV25yhDoAOaFaShYLryk1EZUcNlmJn6iqgHcARSxsUJt/h3A/AWUzIoNPAam4MbECDAD9/kTiL2dgUgAAAABJRU5ErkJggg==', function (error, image) {
if (error) throw error;
map.addImage('building-wl', image);
map.addLayer({
'id': '3d-buildings',
'source': 'building',
'type': 'fill-extrusion',
filter: ['==', ['get', 'type'], 'building'],
'paint': {
'fill-extrusion-color': '#ffffff',
'fill-extrusion-pattern': 'building-wl',
'fill-extrusion-height': ['get', 'height'],
'fill-extrusion-base': ['get', 'baseHeight'],
'fill-extrusion-opacity': 1
}
});
map.addLayer({
'id': '3d-buildings-top',
'source': 'building',
'type': 'fill-extrusion',
filter: ['==', ['get', 'type'], 'top'],
'paint': {
'fill-extrusion-color': [
'match',
['get', 'floor'],
floorNums, '#bbb4ab',
'#ffffff'
],
'fill-extrusion-height': ['get', 'height'],
'fill-extrusion-base': ['get', 'baseHeight'],
'fill-extrusion-opacity': 1
}
});
map.addLayer({
'id': '3d-buildings-highlight',
'source': 'building-hightlight',
'type': 'fill-extrusion',
filter: ['==', ['get', 'floor'], -1],
'paint': {
'fill-extrusion-color': '#00ffe8',
'fill-extrusion-height': ['get', 'height'],
'fill-extrusion-base': ['get', 'baseHeight'],
'fill-extrusion-opacity': 0.5
}
});
})3. 添加交互
代码语言：javascript复制map.on('click', e => {
map.setFilter('3d-buildings-highlight', ['==', ['get', 'floor'], -1])
})
map.on('click', '3d-buildings', e => {
const { properties } = e.features[0]
map.setFilter('3d-buildings-highlight', ['==', ['get', 'floor'], properties.floor])
})
