(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210886310.2 (22)申请日 2022.07.26 (71)申请人 上海大学 地址 200444 上海市宝山区上 大路99号 (72)发明人 高新闻　徐政　杨雨蒙　胡珉　 周丽　 (74)专利代理 机构 上海上大专利事务所(普通 合伙) 3120 5 专利代理师 何文欣 (51)Int.Cl. G06F 16/957(2019.01) G06F 16/958(2019.01) G06F 30/13(2020.01) (54)发明名称 一种基于SVG技术的盾构推进平剖面图进度 展示方法 (57)摘要 本发明公开一种基于SVG技术的盾构推进平 剖面图进度展示方法， 包括以下步骤： 1)获取平 面图轴线、 平面图隧道宽度线、 剖面图轴线和剖 面图隧道宽度线的坐标信息； 2)在 平台前端html 文件中添加显示内容的<div>标签以及<svg>标 签； 3)使用JavaScript语言， 根据盾构推进过程 的实时数据对盾构机在该推进平剖面图进度进 行实际推进状态更新。 该方法充分满足了盾构施 工管控平台管理人员的需求， 使其所需相关信息 一目了然。 该方法获取盾构机当前推进环号后把 盾构机图片准确地显示在了平剖面图进度中， 真 实展示了盾构推进的实际状态。 该方法以html格 式的SVG文件展示盾构推进进度， 在不同分辨率 的电脑上对其进行放大缩小也不会变形或者失 真， 极大地 提升了管理人员的操作体验。 权利要求书2页 说明书6页 附图2页 CN 115292626 A 2022.11.04 CN 115292626 A 1.一种基于SVG技 术的盾构推进平剖面图进度展示方法， 其特 征在于， 包括如下步骤： 1)获取平面图轴线、 平面图 隧道宽度线、 剖面图轴线和剖面图 隧道宽度线的坐标信息； 2)在平台前端html文件中添加显示内容的<div> 标签以及<svg> 标签； 3)使用JavaScript语言， 根据盾构推进过程的实时数据对盾构机实际推进状态进行更 新。 2.根据权利要求1所述的基于SVG技术的盾构推进平剖面图进度展示方法， 其特征在 于， 所述步骤1)的坐标信息通过隧道地质图获取， 具体包括以下 过程： 1‑1)采用异步加载的方式将SVG文件加载至网页端； 1‑2)通过JavaScript的lastElementChild函数从SVG文件中获取<svg>标签中的最后 一个<g>标签， 再通过first ElementChild函数和next ElementSibling函数 获取<polyline> 标签， 进而获取到平面图轴线、 平面图隧道宽度线、 剖面图轴线和剖面图隧道宽度线的坐标 信息； 1‑3)声明一个方向变量 来表示盾构推进平剖面图进度展示左右推进方向。 3.根据权利要求1所述的基于SVG技术的盾构推进平剖面图进度展示方法， 其特征在 于， 所述步骤2)包括以下 过程： 2‑1)在平台前端html格式文件中添加一个<div>标签， 用来存放展示平剖面图需要用 到的元素， 其中宽度和高度为平台前端html页面的可视区域的宽度和高度； 2‑2)在平台前端html格式文件中添加一个<svg>标签， 在该标签上添加display属性， 属性值设为inline ‑block； 在该标签上添加preserveAspectRatio属性， 属性值设为 xMidYMid  slice， 使 得缩放平剖面图展示时保留纵横比； 在该标签上添加translate的属性 值， 属性值设为鼠标拖拽两个坐标点之间的差值； 在该标签上添加scale的属性值， 属性值 初始设为1； 2‑3)在<svg>标签内添加一个<path>标签， 在该标签上添加id属性， 属性值设为p lane_ motionPath； 在该标签上添加str oke属性， 属性值设为blue， 用于展示已经推进完成的隧道 部分； 在该标签上添加fill属性， 属性值设为none； 在该标签上添加stroke ‑width属性， 属 性值设为隧道宽度线的长度； 在该标签上添加stroke ‑linecap属性， 属性值设为butt； 在该 标签上添加d属 性， 属性值设为盾构机当前坐标及平面图轴线或剖面图轴线上盾构机之前 的所有点的坐标； 2‑4)在<svg>标签内添加一个<image>标签， 在该标签上添加id属性， 属性值设为 plane_img； 在该标签上添加xlink:href属性， 属性值设为盾构机图片的存储路径； 在该标 签上添加x属性， 属性值设为0； 在该标签上添加y属性， 属性值设为隧道宽度线长度的一半 的相反数； 在该 标签上添加height属性， 属性 值设为隧道宽度线的长度； 2‑5)在<svg>标签内添加一个<animateMotion>标签， 在该标签上添加id属 性， 属性值 设为plane_animimg； 在该标签上添加xlink:href属性， 属性值设为<image>标签的id， 即# plane_img； 在该标签上添加begin属性， 属性值设为0s； 在该标签上添加dur属性， 属性值设 为盾构机平滑 运动动画的时间； 在该标签上添加fill属性， 属性值设为freeze， 使 得动画结 束后， 盾构 机图片停留在相应位置上； 在该标签上添加cy属性， 属性值设为0； 在该标签上添 加rotate属性， 属性值设为auto ‑reverse， 使 得盾构机图片沿着隧道轴线运动， 并且在盾构 机从右往左推进的情况 下盾构机图片能自适应翻转；权　利　要　求　书 1/2 页 2 CN 115292626 A 22‑6)在<animateMotion>标签内添加一个<mpath>标签， 用于建立上述盾构机图片运动 动画和<path>之间的关联， 在该标签上添加i d属性， 属性值设为plane_mpath； 在该标签上 添加xlink:href属性， 属性 值设为#plane_moti onPath； 2‑7)通过getBBox函数， 获取当前电脑展示上实际屏幕的边界框左侧x位置值、 上边缘y 位置值以及边界框的宽度和高度， 然后把 这四个值设为<svg>的属性viewBox的属性 值； 2‑8)在<svg>标签上设置onmousemove事件， 实现用鼠标拖拽平剖面图进度展示图形时 执行相应的JavaScript方法， 该 方法通过改变t ranslate的属性 值实现拖拽操作； 2‑9)在<svg>标签中设置onmousewheel事件， 实现在平剖 面图进度展示图形上滚动鼠 标滚轮时执行相应的JavaScript方法， 该方法通过改变scale的属性值实现对进度展示图 形的放大缩小操作。 4.根据权利要求1所述的基于SVG技术的盾构推进平剖面图进度展示方法， 其特征在 于， 所述步骤3)具体包括以下 过程： 3‑1)设平面图轴线上有点0， 点1， …， 点p共p+1个点， 这些点的横纵坐标是已知的， 点0 位于第0环的位置， 点p位于最后一环的位置， 其 余点的环号是 未知的； 3‑2)计算出平面图轴线的总长度L； 3‑3)计算出平面图轴线上第i个点的累积长度li， 此处的累积长度li指的是前i段线段 的长度之和； 3‑4)采用下式计算出第i个点所对应的环号ri： 其中， R表示隧道总环号， ri所得结果向上 取整； 3‑5)判断盾构施工过程中的当前推进环号rc位于平面图轴线上哪两个点所对应的环号 之间， 如果当前推进环号rc位于ri‑1环和ri环之间， 那么盾构机所对应的点c应当位于点i ‑1 和点i所形成的线段 上； 3‑6)计算出点c的累积长度lc： 根据相似三角形关系计算出点c的横坐标xc为： 进而计算出点c的纵坐标yc为： 权　利　要　求　书 2/2 页 3 CN 115292626 A 3