WebGIS室内地图怎么做?导航功能如何实现?

当你在商场迷路时，WebGIS 能不能像手机地图一样救你？

上周我陪朋友逛新开的万象城，结果在负二层停车场绕了三圈没找到出口——那一刻我就想：为什么商场自己的 App 不能给我画条导航线？这其实就是 WebGIS 室内地图最典型的用户痛点。和室外 GPS 导航不同，室内没有卫星信号、空间结构复杂、楼层切换频繁，传统 GIS 工具根本玩不转。别急，今天 Dr. Gis 就手把手带你从零搭建一个带导航功能的室内 WebGIS 系统。

室内地图不是“缩小版室外地图”，它的骨架完全不同

很多人以为室内地图就是把商场平面图扫描上传，加个定位点就完事——大错特错。我在腾讯参与智慧园区项目时吃过这个亏：客户拿着 CAD 图兴冲冲跑来，说“你们 GIS 不就是管地图的吗？”结果我们花两周才把 CAD 的“线”转成拓扑正确的“路网”。

类比一下：室外导航像在高速公路上开车（GPS+路网），室内导航则像在宜家仓库里找沙发（WiFi+蓝牙+路径拓扑）。前者靠坐标，后者靠“关系”。

核心差异有三点：

1. 坐标系：室内通常用局部笛卡尔坐标系（比如以商场西南角为原点），而不是 WGS84。
2. 数据源：BIM 模型、CAD 图纸、激光点云才是主力，卫星影像基本无用。
3. 网络结构：必须构建“可行走路径”的矢量网络（含楼梯、电梯、扶梯的连通性）。

四步走：从 CAD 到可导航的 Web 地图

下面以 QGIS + Leaflet + GraphHopper 为例，演示最小可行方案（代码已简化，生产环境需加固）。

第一步：预处理 CAD 数据 —— 把“图画”变“路网”

拿到商场提供的 .dwg 文件后，先用 AutoCAD 或 QGIS 的 DXF/DWG Import 插件导入。重点清理：

• 删除装饰性线条（如店铺 Logo 边框）
• 合并断开的路径（走廊常被柱子打断）
• 为电梯/楼梯添加属性字段：floor_change: true

# 用 PyQGIS 自动化清理（示例）
layer = iface.activeLayer()
with edit(layer):
    for feat in layer.getFeatures():
        if feat["layer_name"] in ["装饰", "文字"]:
            layer.deleteFeature(feat.id())

第二步：构建拓扑网络 —— 给地图装上“血管系统”

使用 QGIS 的 Network Analysis 工具或 Python 库 NetworkX，将走廊、通道转为带权重的图结构。关键操作：

• 节点 = 路径交叉点 + 出入口 + 电梯口
• 边 = 可通行路段（权重=距离或步行时间）
• 跨层连接：为每部电梯生成 N 个虚拟节点（B2-E1, B1-E1, L1-E1...）

第三步：前端渲染 —— 用 Leaflet 让地图“活”起来

切片服务推荐用 Mapbox GL JS 或 Leaflet + GeoJSON。重点解决楼层切换：

// 监听楼层选择器
floorSelector.on('change', function(e) {
    map.eachLayer(function(layer) {
        if (layer.feature.properties.floor === e.target.value) {
            layer.setStyle({opacity: 1}); // 显示当前层
        } else {
            layer.setStyle({opacity: 0.2}); // 隐藏其他层
        }
    });
});

第四步：路径规划 —— GraphHopper 的室内魔改

开源引擎 GraphHopper 默认用于公路网，需修改配置支持室内：

启动命令：

java -jar graphhopper-web-*.jar 
  --graph.flag_encoders=indoor 
  --prepare.ch.weightings=no 
  --routing.non_ch.max_waypoint_distance=1000

避坑指南：三个让我通宵的血泪教训

1. 定位漂移：纯 WiFi 定位在金属货架区误差超 10 米。解决方案：融合蓝牙 Beacon + 惯性传感器（手机陀螺仪）。
2. 跨层路径断裂：电梯在 B1 层的出口坐标和 L1 层入口坐标差 3 像素？导航引擎会认为“不可达”。必须人工校准或写脚本对齐。
3. 实时更新噩梦：商场临时封路怎么办？我们在深圳项目中接入了物业工单系统，自动触发路网权重更新。

总结：室内 WebGIS = 精准数据 + 拓扑智能 + 轻量交互

记住这个公式：好的室内导航不是炫技 3D 渲染，而是让用户三秒内找到最近的洗手间。核心在于把物理空间抽象为计算机能理解的“图”，再用图算法求解最优路径。现在轮到你了——你遇到过最离谱的室内导航 bug 是什么？在评论区告诉我，点赞最高的送《室内 GIS 数据规范》电子书！