企业官网建设流程全解析

nVisual FiberMap 全面介绍：零依赖的光缆网 GIS 竣工录入与出图工具

摘要：室外光缆工程的竣工资料录入，长期面临"数据量大、字段多、表格多、图数分离"的难题。nVisual FiberMap 是一个在浏览器中运行的本地化工具：在 GIS 地图上录入接头包、ODF、OLT、ONU、分光器、光纤跳线、井、管段、光缆段与管孔敷设关系，记录接头包内的纤芯接续，一键导出 Excel、PDF、PNG、DXF 四类竣工资料，并可回传管理平台。本文从功能全景、四视图工作流、数据质量与交付、AI 助手与快速上手几个角度，对这套工具做一次完整拆解。

一、先看问题：光缆竣工资料为什么难录

做过室外光缆工程的人，对下面这套流程不会陌生：

• 现场测量回来，先在 CAD 里画路由、标井位、标接头包；
• 再在 Excel 里逐条登记接头包、光缆段、井、管段、敷设记录、纤芯接续；
• 交付时把图纸、台账、照片、PDF 打成一个包，甲方核对一次就要翻一遍；
• 一旦现场变更，图改了、表没改，或者表改了、图没改，两边对不上；
• 想查"某根纤芯从哪儿来、到哪儿去"，只能靠人对着接续表逐行推。

问题的根源不是工具不好用，而是数据被拆成了"图"和"表"两份，各记各的。CAD 保存的是线条，Excel 保存的是字段，两者之间没有引用关系，也就无法自动校验、自动出图、自动统计。

nVisual FiberMap 的思路很直接：把地理空间数据（点线位置）和逻辑连接数据（纤芯接续、管孔占用）统一成一份结构化数据，先录入数据，再由数据生成图和表。工具运行在浏览器里，后端只有一个本地的零依赖静态服务，项目数据以 JSON 文件保存在本机。

二、产品定位与整体面貌

2.1 一句话定位

nVisual FiberMap 是一个面向光缆网工程竣工资料的高效录入与出图工具：在 GIS 地图或示意图上录入光缆网资源与连接关系，自动完成接续校验、合规自检，并一键导出四类交付物，同时提供只读三维查看与自然语言 AI 助手。

2.2 功能全景

2.3 一个容易忽略的设计立场：零依赖、无构建

这套工具在技术选型上做了一个比较极端的决定：不引入任何前端框架、不引入打包器、不引入 npm 依赖树。

• 前端是原生 HTML + Canvas + ES Modules，直接由浏览器加载；
• 后端有两个等价实现：460 行的 Node.jsserver.js（只用标准库）和单文件 Gomain.go（零第三方依赖，go:embed把整个前端打进可执行文件）；
• 构建产物是一个约 12.7 MB 的单文件可执行程序，拷进内网就能跑，不需要装 Node、不需要配环境、不需要联网。

对一个要在内网、离线、甲方现场长期使用的工程工具来说，这套路线的价值很实际：没有依赖升级带来的瘫痪风险，没有构建环境，十年后打开源码仍然能直接改、直接跑。

三、四视图工作流：一条从设计到竣工的主线

工具把整个光缆工程的数据录入拆成四个视图，右上角用一条步骤条串联：

① 光缆图（GIS：设备 + 光缆 + 跳线） ↓ ② 纤芯图（逻辑：谁和谁熔接、谁成端到哪个端口） ↓ ③ 管井图（管道：井 + 管段 + 断面结构） ↓ ④ 路由图（空间 + 逻辑合流：光缆敷设进管孔） ↓ 合规自检 → 导出 Excel / PDF / PNG / DXF → 回传管理平台

四个视图共用同一份项目数据，只是关注点不同。下面逐一展开。

3.1 光缆图：GIS 地图上的资源录入

光缆图是默认视图，也是一切数据的起点。它是一张带底图的 GIS 地图（支持 OSM、Google、高德、天地图、自定义瓦片源，以及完全离线的经纬网格；无本机配置时启动默认即离线经纬网格，切换在线源后按视图各自记忆），上面放置各类点对象，点与点之间画线对象。

1）对象体系

2）高效率的录入交互

光缆图在交互上下了不少功夫，核心是"少点击、少切换、可撤销"：

• 连接点拖拽：鼠标移到井、接头包、ODF、OLT、ONU 上即显示四个青色连接点（无需选中）；从连接点拖到空白处自动新建对端对象并成段，拖到已有同类对象则直接吸附成段，还能链式连续拖出多段；拖拽过程中实时显示距离，一次拖拽创建的全部对象记一步撤销。
• 线上吸附与自动分隔：把接头包/ODF/OLT/ONU/分光器放到光缆段上、把井放到管段上时自动吸附并"一分为二"，端点挂接、属性继承、皮长分摊、接续与敷设记录的归属全部自动处理。
• 连续绘制：按G画光缆段，点起点接头包后，每点下一个接头包就完成一段并自动从该节点续画；管段同理。
• 折点编辑：选中光缆段后可直接拖动折点、双击线上插入折点、选中折点删除，皮长随路径自动重估。
• 多选与格式刷：Ctrl+点击加选/减选、Ctrl+拖动框选、Ctrl+A全选，支持批量删除与整体移动；按M进入格式刷，拾取一个对象的属性后单击或框选刷给同类型对象（芯数、孔数缩小有安全校验）。
• 50 步撤销/重做：Ctrl+Z/Ctrl+Y，删除时自动清理引用。

3）坐标一致性

工程坐标是最容易"埋雷"的地方。这套工具的策略是：

• 内部存储统一使用WGS-84；
• 在 GCJ-02 底图（高德、腾讯等）上点放/拖动对象时自动反解为 WGS-84 存储，显示时再加偏移对齐底图；
• 切换 WGS-84 ↔ GCJ-02 底图时，视野中心自动同步换算，屏幕中心始终对准同一地面位置，不会出现"切换底图后整体偏移约 500 米"的现象；
• 地图可无限平移，跨 180° 经线时经度自动归一到 ±180°。

3.2 纤芯图：把接续关系画清楚

光缆图解决"缆在哪"，纤芯图解决"芯在哪"。切到纤芯图，工具会完全由光缆图数据自动派生出一张纤芯调度示意图：不加载 GIS 底图，也不改动任何光缆图的几何数据。

1）自动布局

• 按缆段连通关系做 BFS 分层（左 → 右），层内用重心法排序减少连线交叉；
• 同层节点垂直堆叠、列内居中对齐，多个连通分量与孤立接头包分开排布后按行打包，保证节点互不重叠；
• 同一起终点的多条缆画成平行线（垂直错开、端口互异）；
• 光缆自由端在节点外侧生成盘留框（标注盘留位置与芯数），同侧多个盘留框纵向错开，保证与接头包、其他盘留框都不重叠；
• 布局结果可手动拖动调整，移动后缆线出线侧随实际方位自动换边，入盒分线点沿边框滑动，盒外缆线按"避障直连"重新布线（不穿框、不与其他缆共线、折弯最少）。

2）框内逐芯接线图

这是纤芯图最有技术含量的部分：每个接头包渲染成一个方形节点，框内自动绘制完整的逐芯接线图。

• 分线节点 = 光缆入盒点：每根挂接光缆恰好一枚实心圆点，落在缆线与边框的交点上；
• 自圆点向各条合并束斜线扇出，同向连续芯合并为一条细实线，每条束独占一条水平轨道；
• 斜线/竖线跨其他线时画半圆跳线（表示交叉不相接）；
• 轨道上的空心圆环是熔接点，两端标注各缆的芯号区间；
• 标注排在分线带之外，文字方向与所接缆线平行（左右侧水平、上下侧竖排），同一面上两根缆相接时标注写在斜线上、字号再小一倍。

对分光器，则改用空心三角光分路器符号：顶点永远朝左（进线角，1 路进）、底边永远朝右（出线面，N 路出），出缆分光点沿底边按端口次序均匀错开。

3）批量接续编辑

左侧面板按 A/B 两侧分组，每侧是"缆名下拉 + 芯号范围输入"：

• 区间接续：输入1-12或1-12,25-36（容错全角逗号），A/B 两侧按序批量配对；只填一侧则另一侧同范围；两侧留空等于按序直通；任一芯已占用则整批拒绝并提示冲突芯号；成功后自动预填下一段等长空闲区间，回车即可连续录入。
• 按序直通：一键把两侧全部空闲芯按序号配对。
• 分光接续 / 一键分光：进缆芯允许重复扇出（1 进 N 出是正常分光），出缆芯一芯一次；单根进缆芯的扇出分支不超过分光比；"一键分光"给尚未分光的出缆各补一条接续。
• 逐芯细编：双击接头包打开"纤芯接续图"模态，支持 Shift 连选、Ctrl 多选，两侧等量自动处理，已接续的两端同选即断开，可录熔接损耗与备注。

4）ODF 成端与跳接

ODF 节点采用独立的成端模型：terms[ODF] = [{c缆, n芯, port端口}]，一芯一端口、一端口一芯；端口之间的互联（跳接）仍走接续记录，与接头包同一机制。双击 ODF 打开"成端图"模态：左侧是缆纤芯列表，右侧是按托盘 × 纤盘规格展开的圆形端口网格（空闲端口虚线圆环、本缆纤芯按色谱填色、备用紫环、跳接青环、其余占用中性灰），点纤芯再点空闲端口即成端，点两个已成端端口即跳接/断开。成端统计口径统一为terms ∪ splices，属性面板、自检、导出使用同一份数据。

5）一跳连通高亮

选中任一光缆段，整条缆高亮，同时把"一跳"范围——框内与本缆相接的合并束、对端光缆的入盒分线点——一并高亮，到对端分线点为止，不再沿对端缆继续。这样既能一眼看清本缆的去向，又不会把整张图标成一片亮色。

3.3 管井图：管道数据的三种来源

管井图管理"井 + 管段 + 断面结构"。井是点，管段是线，管段的每一端挂接井；管段带孔数，孔位由断面结构（观察方向 + 管材包阵列，如栅格管 2×2、3×3，硅芯管 n 孔等）派生。

管井数据有三条获取通路：

1. 依据光缆图生成：按光缆图中接头包与盘留点的位置建井（位置文字同步为井名，≤3 米内已有井自动沿用），按光缆连接关系在井间创建管段（路径沿用光缆路由）。重复执行幂等，一次生成 = 一步撤销。
2. 导入 KMZ/KML：点要素导入为井、线要素导入为管段；支持吸附阈值（1/3/5/10 米可选）与坐标系选择（WGS-84 / GCJ-02），落库时井就近沿用、管段端点自动吸附挂接、同对井去重，整体为幂等合并导入。
3. 从管理平台获取：把每段光缆的起终点位置作为"井对"，提交平台的多路径查询接口（POST /wapi/v1/vis_links/pipe_paths），逐条光缆查询并实时显示进度；返回的候选路径全部采用，多路径取并集（共用井合并、重叠管段去重），并按接口返回的截面数据生成管段断面结构。请求统一经本机服务端代理转发，浏览器不产生跨域请求。

此外还有一个"隐形"的联动机制：管井图上的井发生任何变化（放置、拖动、改名、删除、导入），工具会全量检查光缆图中位置文字与井名匹配的接头包与盘留点，并把它们对齐到井位（按屏幕右下 45° 略偏移约 1.1 米，避免图标完全重叠）。容差内不动作，重复触发幂等。

3.4 路由图：把光缆敷设进管孔

路由图把光缆图与管井图叠加在同一张 GIS 地图上：管段与井整体置灰、绘于下层，光缆与接头包保持亮色、绘于上层，用于回答"这根缆走了哪根管、占了哪个孔"。

交互设计上，路由图取消了一整套录入工具，改用"选中即敷设"：

• 点击一条光缆段即自动进入敷设状态（取消选中即退出）；
• 所有可见管段的中部会常驻显示一个缩小的管孔断面图（蓝=本缆、红=他缆占用、白=空闲），随地图缩放同步放大缩小，鼠标移上去以截面中心放大 10 倍，放大后孔号可读、点孔更容易；
• 点空闲孔即敷设，点其他空孔即改孔，点已占用的蓝孔即取消本缆在该管段的敷设；可连续点选多段管段；
• 悬停某个断面图时，对应管段会白晕 + 青绿闪烁高亮，避免"面板太多不知道属于哪条管"。

数据一致性方面有三个关键设计：

1. 走廊预检：点孔前把管段两端投影到待敷设光缆路径，如果管段不在光缆走廊上（垂直岔出、支线、在缆端之外），直接拒绝并提示；覆盖比例低或端点偏差大于 25 米时放行但给出警告。
2. 敷设自动重建路径：新增/取消/删除敷设记录后，自动把光缆路径重建为剩余敷设管段首尾相接的链，中间断链时按间隙跳跃续接；两端始终锚定原接头包/盘留点，敷设只改变中间路由，缆端不会被搬到井位上。
3. 原路由不被修改：光缆自身的 GIS 路由（以及皮长、纤芯图、导出数据）保持不变，取消敷设即恢复原样。

同一管段敷设多根光缆时，工具按孔号自动分车道并行绘制，间距随地图缩放同比变化，并在管段旁标注"共 N 缆"，密集管段也看得清每根缆。

四、数据质量与交付：自检 + 四类导出

4.1 合规自检：导出前的最后一道关

顶栏的盾牌图标打开合规自检面板，按当前视图运行对应规则集，问题分三级：

面板打开期间，数据一有变化（增删对象、属性编辑、接续、敷设、撤销重做、导入）就自动防抖复测；点问题里的对象名即在图中定位选中并叠加大约 3 秒的闪烁雷达圈，密集图面也能一眼找到。问题清单可导出为 CSV（UTF-8 BOM，Excel 直接打开）。

4.2 Excel：单文件十一张表

导出的.xlsx是标准的一份多 sheet 竣工台账：

接头包 / OLT / ONU / ODF / ODF成端 / 分光器 / 井 / 光缆段 / 光纤跳线 / 敷设 / 纤芯接续

其中"敷设"表记录光缆段在哪个管段的哪个孔，"纤芯接续"表记录两端缆芯的配对与熔接损耗，“ODF成端"表记录端口、托盘与跳接去向。所有表的数据源与界面、自检一致，不会出现"表和图对不上”。

4.3 PDF：一份全程矢量的竣工全册

"导出PDF"输出的是单个矢量 PDF：封面（项目信息、对象统计、内容清单与页码）+ 光缆图/纤芯图/管井图/路由图各一页（GIS 三图按 z20 级构建，密集时自动 A3 分幅，邻幅带重叠区可拼接，单页时最大 A3、超出则整页等比缩小）+ 十一张数据表。

技术上有几个细节值得一提：

• 文档中没有任何位图，线路与文字都是矢量，文字可以选中、可以搜索；
• 中文使用标准 CJK 复合字体，以双字节码写入，PDF 体积小且不依赖字体嵌入；
• A3 图幅上图标统一放大到屏幕的 1.5 倍、标注文字再乘 0.5，打印和 100% 阅读都清晰；
• 文字全黑并带白色衬底，压在线路上也可读，附带空间网格避让，标注重叠自动跳过。

4.4 PNG：地图全景图与视图范围出图

PNG 导出支持两种口径：

• 全部对象（默认）：按全部对象的包围盒自动取景居中，与屏幕当前视野无关，导出一张完整地图全景图；
• 当前视图范围：所见即所得，按当前相机与画布尺寸渲染，可选 1×/2× 输出倍率。

导出级别自动取"整幅能放下的最高级别"（上限 z22），同时受单张画布预算约束（长边 ≤ 8192px、总面积 ≤ 6400 万像素），超限自动逐级降档，始终一张图、不分幅。底图可选在线瓦片、离线经纬网格或纯白背景；跨域瓦片先直连、失败自动回退到本地服务端代理，避免画布被污染后导不出图。图面自动带上图名条、比例尺与底图版权。

4.5 DXF：给 CAD 用的竣工图

DXF 导出按当前视图出图：光缆图/管井图/路由图输出 GIS 竣工图，纤芯图输出接续示意图。

• 以项目数据质心为原点做等距圆柱近似投影，x/y 单位均为米，+Y 指北，同一项目分幅导出的多张图可在 CAD 里对齐；
• 分图层组织（管段、光缆段、接头包、ODF、OLT、ONU、分光器、井、盘留点、光纤跳线及各自标注层，按视图过滤）；
• 点对象用块参照（INSERT），实心填充用 SOLID 三角形序列，老旧 CAD 也能正确渲染；
• 文件为 UTF-8 / AC1021（AutoCAD 2007+），实测用 ezdxf 解析 0 错误；
• 可只导出与当前屏幕视图范围相交的对象，几何完整不裁剪。

4.6 三维查看：只读的立体校验

顶栏的 3D 按钮打开一个只读三维覆盖层（MapLibre GL JS 本地懒加载，离线可用）：接头包是拱顶圆筒、ODF 是配线机柜、OLT 是局端机框、ONU 是用户端小箱、分光器是光交机柜、井是井盖圆台、盘留点是锥形标，光缆与管段带描边呈伪圆管感。可以拖动平移、右键旋转、滚轮缩放，点击对象弹出信息卡，一键"在 2D 图中定位"回到编辑界面。地形是可选项，支持自建 DEM 瓦片或第三方晕渲；地形不可用时自动降级为平面三维。

4.7 提交回平台

光缆图工具栏还有一个"提交"入口：把接头包、光缆、敷设、接续组装成竣工资料提交体，经本机服务端代理调用管理平台的fiber_sync接口，接头包按编号创建/复用、光缆按名称查重，完成后给出新建/复用统计。这样一套数据既能本地出图，也能回灌到资源管理平台，避免二次录入。

五、AI 助手：把重复录入交给自然语言

对"建网 → 接续 → 管井 → 敷设 → 自检 → 导出"这类高度结构化的重复操作，工具内置了 AI 助手，有两条通路：

1. 内置 AI 面板：左侧停靠抽屉，用户自填 API Key（只存本机浏览器，服务端只做无状态转发、不落盘）；
2. 外部 Agent 中继：外部智能体按自托管的 OpenAPI 契约驱动打开中的页面，画布实时呈现，与手工操作共享同一份状态和撤销栈。

核心机制是"计划 → 执行 → 回灌 → 自修"闭环：

模型输出唯一 JSON 计划（reply / plan / calls） ↓ 页面内逐条执行 54 条指令中的 {tool, args} ↓ 结构化结果（真实 id、坐标、统计、合规自检问题清单）回灌 ↓ 模型读结果自我修正，ERROR 未归零不宣告完成

54 条指令按领域分组：

三个设计点值得单独说明：

• 四视图可寻址：指令声明目标视图，执行前后自动切视图并选中聚光，用户始终看得见 AI 在改什么；
• 坐标不过模型：模型只说"对象名 + 方位 + 距离（米）"，经纬度换算全部在本地完成，从根上杜绝模型算错坐标；
• 附件本地解析：拖入 Excel 工程量清单后先在页内解析成导入计划，只有摘要与预检问题进入上下文，整张表不进 token，甲方数据也不出本机。

安全性上，每条指令 = 一步撤销，破坏性操作需要一次确认，可以整体"撤销本轮"；AI 与手工操作之间还有软锁机制，避免机器和鼠标同时写同一份数据。

六、快速上手

6.1 运行

# 方式一：Node.js（零依赖）nodeserver.js# 默认端口 4666，PORT=xxxx 可改# 方式二：Go 单文件后端（零第三方依赖，功能等价）go run.# 开发运行，优先读取同目录 public/go build-oFiberMap.exe.# Windows 构建单文件可执行程序（前端已内嵌）./FiberMap.exe# 启动后自动打开默认浏览器# Linux 交叉编译（CGO_ENABLED=0 静态链接，不依赖 glibc 版本）GOOS=linuxGOARCH=amd64CGO_ENABLED=0go build-oFiberMap_linux_amd64.GOOS=linuxGOARCH=arm64CGO_ENABLED=0go build-oFiberMap_linux_arm64.

启动后浏览器访问http://localhost:4666即可。服务器无桌面环境时用-open=false关闭自动打开浏览器，-port换端口。

6.2 典型录入流程

推荐按"① 光缆图 → ② 纤芯图 → ③ 管井图 → ④ 路由图 → 导出"的顺序推进，顶栏"向导"按钮会按步骤给出入口与实时统计：

1. 建项目：新建并填写项目备案号、编号、名称；
2. 录光缆图：按J点接头包、O放 ODF、T放 OLT、N放 ONU、F放分光器、X画跳线，按G画光缆段；已有工程量清单可直接导入，自动生成接头包/光缆段并做拓扑预布局；
3. 设计接续：切到纤芯图，选 A/B 缆做区间接续或按序直通，双击接头包逐芯细编，选中 ODF 做区间/整缆成端；
4. 录管井：切到管井图，可以"依据光缆图生成"，也可以导入 KML/KMZ 或从管理平台获取；井位/井名变化会自动对齐光缆图中的接头包与盘留点；
5. 敷设：切到路由图，点选光缆段后点管孔完成敷设，多缆自动分车道并行显示；
6. 自检：点顶栏盾牌图标，按当前视图跑一遍规则，把 ERROR 清零；
7. 导出：顶栏"导出"菜单选择 Excel / PDF / PNG / DXF；需要时用"提交"按钮把竣工资料回传管理平台。

6.3 常用快捷键

七、适用场景与选型思考

这套工具适合以下几类使用者：

• 通信设计院 / 施工队：把竣工资料的图、表、接续一次性录全，导出交付；
• 运营商与专网代维：把存量光缆资源结构化，查纤芯去向、查管孔占用；
• 甲方与监理：用自检报告和全景图核对资源对象与接续关系；
• 数据治理团队：以 Excel 清单、KML 台账为输入批量入库，再回传到管理平台。

它不替代 CAD 制图：CAD 面向"画图"，FiberMap 面向"记数据"。二者的关系是——FiberMap 先把数据录对，CAD 图纸（DXF）、竣工 PDF、Excel 台账都由数据自动生成；需要精修图形时再把 DXF 拿进 CAD 处理。

选型时可以关注三个判断点：

1. 数据是否留在本地：项目 JSON 通过系统文件对话框存取，AI Key 只存浏览器 localStorage，平台对接经本机代理——对内外网隔离、数据不能出内网的场景比较友好；
2. 离线是否可用：无网环境用经纬网格底图，三维查看、导出、自检都不依赖网络；
3. 交付物是否够用：Excel 十一表 + 矢量 PDF 全册 + 全景 PNG + 分图层 DXF，基本覆盖竣工资料的常规要求。

八、现状与展望

目前这套工具已经形成完整闭环：四个视图、四类导出、三维查看、中英文界面、54 条 AI 指令，Windows / Linux（x86_64 与 ARM64）均可运行。从提交记录看，近期迭代的方向集中在：连接点拖拽的连贯性、纤芯图与三维视图的细节打磨、AI 助手的能力覆盖、多语言覆盖。

从工程角度看，后续可以继续深化的方向大致有三类：

• 数据源：更多测绘与离线数据格式的导入，更多平台接口的双向同步；
• 协作与版本：多人分工录入、项目版本对比；
• AI 场景：把自检、修复、批量调整的闭环做得更稳，让"一句话建网"从演示走向生产。

九、结语

光缆竣工资料的本质是一份关系数据库：设备和缆是记录，接续、成端、敷设是关系。nVisual FiberMap 做的事情，就是把这份数据库搬到浏览器里，用 GIS 地图解决"位置"，用纤芯图解决"关系"，用管井与路由图解决"管道占用"，再用自检和导出把数据变成能交付的图纸与台账。

如果你的团队正在被"图数分离、反复返工、交付物对不上"困扰，这套"零依赖、无构建、数据留在本地、四类交付物自动生成"的思路，值得参考。