简介这是一份面向移动端与Web开发者的室内矢量地图实战资源基于HTML5与矢量图形技术实现清晰、可缩放且交互性强的室内导航方案适用于商场、机场、展馆等复杂室内场景的定位与导览开发。压缩包共171个文件约2.47MB以114个JavaScript文件为核心配合8个HTML页面、7个CSS样式、9个JSON数据及PNG、SVG图标资源另含少量Python脚本与字体文件整体结构完整、便于二次开发。资源围绕Canvas与SVG绘图、Leaflet或OpenLayers地图库集成展开涵盖地图拖拽缩放、标记添加、商铺点击变色与区域高亮等交互逻辑并附带GeoJSON格式的室内空间与商铺位置数据。目前已有1355人学习下载适合希望快速搭建室内地图原型、理解矢量渲染与跨平台适配思路的前端及移动开发者参考借鉴。1. 室内矢量地图从 CAD 图纸到可路由导航底图的那条暗线商场里导航 App 让你从奶茶店走到洗手间路径贴着墙根拐了三个弯没穿墙、没跳楼层——这背后不是 GPS而是一张室内矢量地图。它和室外路网最大的区别是室外靠道路中心线室内靠房间轮廓 门洞 连通关系。很多团队第一次做室内导航拿到的是一张 DWG 或 PDF 图纸以为转成图片贴上去就能用结果路径规划直接穿墙或者门在哪都识别不出来。这篇笔记讲的就是这条暗线怎么把一张静态图纸变成带拓扑、可寻路、能渲染的矢量底图。适合做商场/园区/展馆导航的移动端或后端工程师也适合刚接手室内 GIS 数据、手里只有 CAD 和 Excel 的人。读完你能自己跑通一条最小链路知道每一步的参数该调哪里以及哪些坑我替你踩过了。2. 先搞清楚室内矢量地图的数据模型为什么不能直接拿 CAD 当底图2.1 室内矢量地图的三层结构几何层、语义层、拓扑层很多人把“矢量地图”理解成“用线画面”这是不够的。真正能支撑导航的室内矢量地图至少分三层。几何层是点线面坐标描述墙、门、房间轮廓语义层给每个几何对象打标签比如这堵墙是承重墙还是玻璃隔断这个面是店铺、走廊还是电梯厅拓扑层描述谁和谁连通门连接哪两个房间楼梯连接哪两个楼层。三层缺一层导航就残废只有几何层路径会穿墙只有几何语义算不出从 A 到 B 的连通路径三层都有才能做“从店铺到洗手间”的寻路。我一般建议用 GeoJSON 作为交换格式因为它是纯文本、结构清晰、前后端都能读。一个房间在 GeoJSON 里长这样{ type: Feature, properties: { id: room_101, name: 店铺A, category: shop, floor: 1, height: 3.2 }, geometry: { type: Polygon, coordinates: [[[116.1, 39.9], [116.2, 39.9], [116.2, 39.8], [116.1, 39.8], [116.1, 39.9]]] } }这里properties就是语义层geometry是几何层。拓扑层通常单独存成一张边表记录from_room、to_room、via_door、cost。注意坐标顺序是[经度, 纬度]室内场景如果不用经纬度也可以用局部平面坐标但一定要统一单位别一会儿米一会儿毫米。2.2 为什么 CAD 图纸不能直接当矢量底图用CAD 图纸是给施工和设计看的不是给导航看的。它有几个致命问题。第一图层混乱墙、家具、标注、填充可能混在同一图层甚至同一根线既表示墙又表示尺寸线。第二没有房间语义CAD 里房间可能只是几条闭合线没有“这是店铺”的属性。第三门不是独立对象门往往是一段弧线加几条短线程序很难直接识别成“可通行连接点”。第四坐标单位不统一有的图纸用毫米有的用英寸直接转 GeoJSON 会得到巨大或极小的坐标。所以正确做法不是“CAD 转矢量”而是“CAD 提取几何 人工/半自动补语义和拓扑”。常见流程是先把 DWG 导出为 DXF用解析库读出 LINE、LWPOLYLINE、ARC 等实体按图层过滤出墙和房间轮廓再通过闭合区域检测生成房间面最后人工在门的位置打断墙线建立连通关系。这一步没有全自动的银弹但可以做到 70% 自动 30% 人工校验。2.3 用 Python 从 DXF 提取墙线和房间轮廓的最小代码下面这段代码用ezdxf读 DXF按图层提取墙线并输出为 GeoJSON 的 LineString。假设你的 DXF 里墙在WALL图层房间轮廓在ROOM图层。import ezdxf import json def dxf_to_geojson(dxf_path, wall_layerWALL, room_layerROOM): doc ezdxf.readfile(dxf_path) msp doc.modelspace() features [] # 提取墙线 for line in msp.query(fLINE[layer{wall_layer}]): start line.dxf.start end line.dxf.end features.append({ type: Feature, properties: {layer: wall_layer, type: wall}, geometry: { type: LineString, coordinates: [[start.x, start.y], [end.x, end.y]] } }) # 提取房间轮廓假设是闭合 LWPOLYLINE for poly in msp.query(fLWPOLYLINE[layer{room_layer}]): points [(p[0], p[1]) for p in poly.get_points()] if points[0] ! points[-1]: points.append(points[0]) # 强制闭合 features.append({ type: Feature, properties: {layer: room_layer, type: room}, geometry: {type: Polygon, coordinates: [points]} }) return {type: FeatureCollection, features: features} if __name__ __main__: result dxf_to_geojson(floor1.dxf) with open(floor1.geojson, w, encodingutf-8) as f: json.dump(result, f, ensure_asciiFalse, indent2)逻辑说明ezdxf.readfile读入 DXFmsp.query按图层过滤实体。墙线直接取起点终点房间轮廓取多段线顶点并强制闭合。参数说明wall_layer和room_layer必须和图纸里的图层名完全一致大小写敏感如果图纸单位是毫米输出的坐标就是毫米后续要统一除以 1000 转米。这段代码只做了几何提取没有做语义和拓扑所以下一步必须补门和连通关系。3. 从几何到拓扑门洞识别与连通图构建的实操路径3.1 门洞识别的两种常见做法打断墙线 vs 独立门对象门洞识别是室内矢量地图最关键的步骤没有门就没有连通。常见做法有两种。第一种是打断墙线在门的位置把墙线断开留出一个缺口然后判断缺口两侧的房间是否相邻。第二种是独立门对象在 CAD 里门本来就是独立图层直接提取门的位置和朝向再关联到两侧房间。第一种适合图纸质量差、门没有独立图层的情况第二种适合图纸规范、门有专门图层的情况。我一般会先检查 DXF 里有没有DOOR或门图层。如果有直接用门对象如果没有就用几何方法找墙线缺口。找缺口的方法是把同一房间轮廓上的墙线按端点排序计算相邻端点之间的距离如果距离在 0.8 米到 1.5 米之间就认为是一个门洞。这个阈值不是固定的商场主入口可能 3 米宽洗手间门可能 0.7 米需要按场景调。3.2 用 Shapely 做房间相邻判断和门关联有了房间面和门洞位置下一步是判断门洞连接哪两个房间。用 Shapely 的buffer和intersects可以快速做。下面代码假设房间是 Polygon门洞是 Point判断门洞落在哪些房间的缓冲区里。from shapely.geometry import shape, Point import json def build_topology(geojson_path, door_points, buffer_m0.3): with open(geojson_path, encodingutf-8) as f: data json.load(f) rooms [] for feat in data[features]: if feat[properties].get(type) room: geom shape(feat[geometry]) rooms.append({id: feat[properties].get(id), geom: geom}) edges [] for door in door_points: pt Point(door[x], door[y]) connected [] for room in rooms: if room[geom].buffer(buffer_m).contains(pt): connected.append(room[id]) if len(connected) 2: edges.append({ from: connected[0], to: connected[1], via: door[id], cost: door.get(width, 1.0) }) return edges逻辑说明先读 GeoJSON 里的房间面转成 Shapely Polygon。对每个门洞点用buffer(buffer_m)扩大房间边界再判断点是否落在缓冲区内。如果恰好落在两个房间里就建立一条边。参数说明buffer_m是容差因为门洞点可能正好在墙线上不扩大边界可能判断不到cost可以用门宽门越宽通行成本越低路径规划会优先走宽门。注意如果门洞落在三个房间缓冲区里说明缓冲区太大或房间重叠需要调小buffer_m。3.3 连通图存成什么格式边表 邻接表拓扑建好后存成边表最通用。边表每行一条边字段包括from_room、to_room、via_door、cost、floor。如果要做跨楼层导航还要加type字段区分楼梯、电梯、扶梯。边表可以直接导入 SQLite 或 PostgreSQL也可以存成 JSON 给前端用。邻接表适合内存里跑 Dijkstra边表适合持久化和查询。我一般两份都留边表存库邻接表在服务启动时构建。提示门洞识别不要追求 100% 自动人工校验 10% 的异常门洞比调三天参数划算。4. 室内矢量地图的避坑与排查那些让你白干一天的细节4.1 坐标精度丢失导致房间不闭合现象从 DXF 提取的房间轮廓在 GeoJSON 里看是闭合的但用 Shapely 判断is_valid返回 False或者area为 0。原因通常是 DXF 顶点坐标精度不够或者提取时浮点数截断导致首尾点差了一点点。解决在生成 Polygon 前对首尾点做强制闭合并设置一个容差比如距离小于 0.001 米就认为同一点。另外可以用shapely.validation.make_valid修复自相交。4.2 门洞落在墙线上导致关联不到房间现象门洞点明明在门的位置但buffer后还是只落在一个房间甚至零个房间。原因门洞点坐标是从 CAD 直接取的可能正好在墙中心线上而房间面是从墙内边缘生成的两者有偏移。解决把门洞点沿墙法线方向往两侧各偏移 0.1 米生成两个测试点分别判断落在哪个房间。或者直接把房间面做buffer(0.5)但要注意别把相邻房间也扩进来。4.3 楼层字段缺失导致跨层路径断裂现象从 1 楼到 2 楼导航路径在楼梯口断了。原因边表里楼梯边没有floor_from和floor_to或者房间的floor属性没填。解决所有房间必须带floor所有跨层边必须带type和连接的两层。Dijkstra 里跨层边的权重通常设大一点因为上下楼比平走慢。4.4 单位不统一导致路径长度离谱现象算出来的路径长度是几万米实际只有几十米。原因CAD 用毫米GeoJSON 用米没除 1000。解决在提取阶段就统一转米或者在边表里存length_m字段渲染和算路都用这个字段不直接用坐标距离。4.5 房间重叠导致路径穿墙现象路径从一个房间直接穿到另一个房间中间没有门。原因两个房间面有重叠区域或者缓冲区太大导致误判相邻。解决用shapely的intersection检查房间重叠面积超过阈值就报警缓冲区不要超过 0.5 米门洞关联时要求门洞点到两个房间的距离都小于门宽的一半。5. 让室内矢量地图真正跑起来渲染、寻路与增量更新5.1 用 Mapbox GL JS 渲染室内矢量底图的最小配置室内矢量地图最终要给人看渲染层用 Mapbox GL JS 比较顺手因为它支持 GeoJSON 源和表达式样式。下面是一个最小配置把房间面按category上色墙线用深灰色。map.on(load, () { map.addSource(indoor, { type: geojson, data: ./floor1.geojson }); // 房间填充 map.addLayer({ id: room-fill, type: fill, source: indoor, filter: [, [get, type], room], paint: { fill-color: [ match, [get, category], shop, #f2c94c, corridor, #e0e0e0, toilet, #56ccf2, #cccccc ], fill-opacity: 0.6 } }); // 墙线 map.addLayer({ id: wall-line, type: line, source: indoor, filter: [, [get, type], wall], paint: { line-color: #333333, line-width: 2 } }); });逻辑说明addSource加载 GeoJSONaddLayer分别加房间填充和墙线。filter按type区分几何类型。fill-color用match表达式按category上色。参数说明fill-opacity控制透明度室内底图通常 0.5 到 0.7太透明看不清太不透明挡住路径线。墙线宽度 2 像素适合手机屏大屏可以调到 3。5.2 用 Dijkstra 在边表上算最短路径寻路用 Dijkstra 就够了室内节点通常几百到几千个不需要 A* 的启发式也能毫秒级出结果。下面代码从边表构建邻接表然后算最短路径。import heapq def build_graph(edges): graph {} for e in edges: graph.setdefault(e[from], []).append((e[to], e[cost], e[via])) graph.setdefault(e[to], []).append((e[from], e[cost], e[via])) return graph def dijkstra(graph, start, end): pq [(0, start, [])] visited set() while pq: cost, node, path heapq.heappop(pq) if node in visited: continue visited.add(node) path path [node] if node end: return cost, path for neighbor, weight, via in graph.get(node, []): if neighbor not in visited: heapq.heappush(pq, (cost weight, neighbor, path)) return float(inf), []逻辑说明build_graph把边表转成邻接表每条边双向。dijkstra用优先队列每次弹出当前最小成本节点记录路径。参数说明cost可以用门宽或距离门越宽成本越低如果要做无障碍路径把楼梯边的cost设成无穷大只留电梯。注意路径里存的是房间 ID前端拿到后需要再映射到房间中心点坐标来画线。5.3 增量更新图纸改了怎么不重做整张图商场店铺经常换图纸一改就重做整张矢量地图不现实。我的做法是把房间和边表存数据库每次只更新变化的房间和门。具体是给每个房间一个version字段图纸变更时只重新提取变更区域对比version决定插入、更新还是删除。边表同理门洞变了只重算关联到该门的边。这样一次更新可能只动几十条记录不用全量重建。代价是需要维护一个变更检测流程但比每次全量跑 DXF 解析省太多时间。注意增量更新一定要加事务房间和边表要么一起成功要么一起回滚否则会出现房间没了边还在的脏数据。5.4 验证室内矢量地图是否可用的三个硬指标做完别急着上线先跑三个检查。第一连通性检查从任意房间出发能不能到达任意其他房间如果有孤岛房间说明门洞漏了。第二穿墙检查随机抽 100 条路径看有没有线段穿过墙线有就说明房间重叠或门洞误判。第三长度合理性路径长度和直线距离的比值正常在 1.2 到 2.5 之间超过 3 说明绕路严重可能是门洞关联错了。这三个检查用脚本跑几分钟出结果比人工看强得多。我自己的习惯是每次更新完地图先跑连通性检查再跑穿墙检查最后抽几条典型路径人工走一遍。这套流程帮我省过好几次“上线后用户反馈导航穿墙”的后悔药。希望帮到你。本文还有配套的精品资源点击获取