Mapbox GL构建室内地图展示

  最近朋友有个项目需要帮忙，于是抽空用mapbox gl帮他实现了一个室内地图展示的Demo。先来看看最终呈现效果吧：

室内地图展示.gif

CAD数据处理

  首先是室内设计图纸要从CAD转换为shp文件。主要通过Arcmap的CAD至地理数据库的功能先将其转换为地理数据库中的数据，得到结果如下图所示：

CAD至地理数据库.jpg

结果.jpg

由于这边对于地理位置没有精确要求，就选了个合适的位置做了处理，最终室内图的原始shp数据展示如下：

室内图shp.jpg

代码实现：

  这里偷了个懒，直接用了同事从高德抠过来的楼层列表进行楼层的展示控制。同时，为了方便demo的部署，直接将shp转成了json文件进行加载，省去了图层服务的发布。
  楼层控制主要通过layer的setFilter和source的setData的方法来改变的：

       function changeData(layerName, FlrCode, BKUID) {
            var data = map.getSource(layerName)._data;
            for (var i = 0; i < data.features.length; i++) {
                if (data.features[i].properties.BKUID == BKUID) {
                    if (data.features[i].properties.FlrCode == FlrCode) {
                        data.features[i].properties.Visible = 1
                    } else {
                        data.features[i].properties.Visible = 0
                    }
                }
            };
            map.getSource(layerName).setData(data);
        }
        function changeVisible(FlrCode, BKUID, FlrID, index) {
            currentFloorId = FlrID;
            changeData(floorLayer, FlrCode, BKUID)
            changeData(unitLayer, FlrCode, BKUID)
            changeData(textLayer, FlrCode, BKUID)
            // 调整 docker 的位置
            document.getElementById('floorList').scrollTop = (index) * 59;
            // 设置上下按钮的状态
            if (index === 0) {
                document.getElementById('floorPlus').classList.add('disabled');
            } else {
                document.getElementById('floorPlus').classList.remove('disabled');
            }
            if (index === floorList.features.length - 1) {
                document.getElementById('floorMinus').classList.add('disabled');
            } else {
                document.getElementById('floorMinus').classList.remove('disabled');
            }
        }

  最终实现效果就如开头所示。这里还有mapbox的pitch角度>60的设置问题，后面会单独写一篇记录下。
  最近还基于mapbox gl+three做了一些三维可视化的地图效果，后面有时间也记录下。