概述

前文讲述如何在mapboxGL中如何实现楼层的展示与单体化选中效果，本文在前文的基础上优化高亮方式，实现点击楼层时弹出楼层。

实现效果

map1.gif

实现代码

1. 数据处理

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 ] ] ]
let lon = []
coords[0].forEach(([x, y]) => {
    lon.push(x)
})
lon = lon.sort((a, b) => a - b)
const deltX = lon[lon.length - 1] - lon[0]
const coordsHighlight = [
    coords[0].map(([x, y]) => [x - deltX, y])
]
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 }
    })
    featuresH.push({
      "type": "Feature",
      "properties": {height: h, baseHeight: baseH, type: 'building', floor: i},
      "geometry": { "type": "Polygon", "coordinates": coordsHighlight }
    })
}

2. 添加数据源和图层

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-pattern': 'building-wl',
            'fill-extrusion-height': ['get', 'height'],
            'fill-extrusion-base': ['get', 'baseHeight'],
            'fill-extrusion-opacity': 0.5
        }
    });
    map.addLayer({
        'id': '3d-buildings-top-highlight',
        'source': 'building-hightlight',
        'type': 'fill-extrusion',
        filter: ['==', ['get', 'floor'], -1],
        'paint': {
            'fill-extrusion-color': '#bbb4ab',
            'fill-extrusion-height': ['+', ['get', 'height'
            'fill-extrusion-base': ['get', 'height'],
            'fill-extrusion-opacity': 1
        }
    });
})

3. 添加交互

map.on('click', e => {
    map.setFilter('3d-buildings', ['!=', ['get', 'floor'], -1])
    map.setFilter('3d-buildings-highlight', ['==', ['get', 'floor'], -1])
    map.setFilter('3d-buildings-top-highlight', ['==', ['get', 'floor'], -1])
})
map.on('click', '3d-buildings', e => {
    const { properties } = e.features[0]
    map.setFilter('3d-buildings', ['!=', ['get', 'floor'], properties.floor])
    map.setFilter('3d-buildings-highlight', ['==', ['get', 'floor'], properties.floor])
    map.setFilter('3d-buildings-top-highlight', ['==', ['get', 'floor'], properties.floor])
})