2024年6月9日发(作者：)

Market

市场

基于 的地铁站SVG地图三维化

的应用研究

图，承载着城市地理随着城市地理空间

信息，其重要意义不仅仅局限于方便人

随

着信息技术的发展，智慧城市的概

念孕育而生。蓬勃发展的电子地

们的出行导航，亦是呈现地理空间、城

市面貌的重要途经，并在此基础上形成

了种类繁多的生活应用服务，改变着人

术的快速发展，并趋于成熟，在各领域

们的生活方式。近年来，随着Web3D技

都得到了广泛的应用。

展了基于SVG技术的数字地图研究工作，

目前，上海市申通地铁技术中心开

并取得相应标准、规范、指导意见等丰

图应用，三维地图较少涉及。

富成果，然而研究内容侧重于SVG二维地

三维地图发展现状

为两种：实景三维地图和虚拟三维地图。

现在出现在网络上的三维地图可分

技术对实物进行扫描拍摄，通过数据抽

实景三维地图使用卫星遥感或激光

象，刻画实体三维模型。它具备直观性

强、信息量大、精确性高等优点。国内

的高德地图作为2010年上海世博会唯一

授权和指定的地图服务商，同样为世博

会提供了三维实景地图的服务，并且如

今正逐步将三维实景地图移植应用到手

机中，让每一位用户都可以享受到三维

地图带来的便利。

错的效果，但各自的特点也相应地限制

近些年来这两种方式都取得了不

了发展：实景三维地图需要进行实地扫

描，若地理环境由于主观或客观原因无

法到达，则无法采集得到数据文件。同

66

世界轨道交通

2019.3

时，这种实景展现所带来的隐私安全问

题也不容忽视，故类似于政府机关、科

研院所、社区小院等地方是无法构建实

景三维地图的。而虚拟三维地图在采集

了地理信息数据后，需要手工为每一个

模型进行建模，工作量巨大。最后，两

种方式其实质都是以伪三维的模式为用

户呈现试图的，用户无法任意改变自己

的视角来观察建筑模型。

技术实现路径与效果展示

技术实现框架

标准二维SVG地图

SVG三维地图建设分为三个步骤：

接口，从平台获取标准化SVG二维平面地

1，调用申通地铁SVG数字地图平台

图；2，对二维平面地图进行模型解析，

特点，对二维地图进行三维建模。

识别SVG图形元素；3，依靠工具

SVG标准地图调用

平台获取地铁标准化站厅图或站台图，作

对接申通地铁SVG数字地图平台，从

为三维地图解析建模的基础。其中标准地

图结构分为区域、对象两层。区域是承载

对象的载体，也可认为是地面。对象可以

是房间、地铁设施设备等类型。例如下面

是一个标准SVG地图样例：

◎ 张立东 纪文莉 孙煜 苏贵民

标准二维SVG地图

SVG地图解析

并不一致，如并不支持直接绘

由于SVG和基础图形元素

制椭圆。为了统一格式需要把SVG基础

图形元素转成所支持的THREE.

ShapePath。在中ShapePath

复

和SVG的path格式类似，都能表达出

ShapePath进行一定高程的拉伸，即可

杂的二维图形，通过对二维平面

表达出各种复杂图形，且在三维引擎中

完成地图的三维化过程。由于path能够

同样支持path，把SVG中特有的复杂图

形解析为path 是当前的最优解。例如通

工具中的圆形表达。

过数学公式将SVG二维图形里圆形转换成

贝塞尔曲线表达圆形示意图

素在WebGL 的接口中并不适用，需要把

SVG标准中特有的CIRCLE（圆）元

圆用平台通用的贝塞尔曲线来表达。已

知，如果一段曲线要用 n段的贝塞尔曲线

来表达，每一段最佳的控制点即为 。

要

圆，最佳的控制点是 。因此，得到

用四段贝塞尔曲线表达出一个单位

四段贝塞尔模拟出同一个圆。

SVG中的圆的圆心以及半径后，便可以用

三维地图建模

口进

首

行

先

三

，

维

利

场

用

景

T

的

h

基

re

本

e.

搭

js

建

封

。

装

包

好

括

的

场

接

景

（ctiveCamera）、平行

Three。Scene、透视投影摄像机

（hereLight）、WebGL

光源（Light）、半球光源

渲染器（enderer）以及

相机控制器（ontrols）。

由于ath本身是二维平面

三维模型。

图形，需要拉伸、贴材质等操作转换成

关键技术

SVG矢量图

国际互联网标准组织)在2000年8月制定

W3C(World Wide Web ConSortium

的一种新的二维矢量图形格式，即网络

描述二维图形和绘图程序的一种语言。

矢量图形标准：SVG。SVG是使用XML来

它作为一种网络图形格式，在网络上有

着位图不可比拟的优势。他的图形存储

容量小，对网络的输入负载小，网络传

输延时小，支持交互和动画，图像内的

文字信息可以被网络搜索引擎所检索，

而且图像的放大、缩小操作不会使图像

台性。

失真。同时SVG基于XML，有很好的跨平

适

（1）任意缩放，用户可以任意缩放图

网

综上所述，在网络上，SVG有着合

络环境而位图无法比拟的特点：

像显示，不会破坏图像的清晰度、细节

等；（2）文本独立于图像，文字可编辑

可搜索；（3）文件所占内存小，加载速

度快，所占带宽少；（4）可扩展标记语

较强。

言结构，交互性、可操作性和可编程性

Web3D绘图标准WebGL

Web标准HTML5，3D绘图标准WebGL

本文采用的关键技术包括新一代

以及第三方类库。其中HT-ML5

具体可分为HTML、CSS和JavaScript技

术，致力于打造一个各系统平台无缝链

接、更具交互功能的开放式环境，创建

一种更加丰富、轻便、独立的免插件、

跨平台产品，因此添加了很多新的特性

与元素，包括Firefox，GoogleChrome，

Opera，Safari4+，Internet Explorer9+等

主流浏览器都已支持HTML5。正是利用

这些特性，在进行三维表达时，无须再像

Flash、Siverlight那样安装插，即可实现

对像素级别的位图像进行2D与3D动态渲

染。WebGL是基于OpenGLES(OpenGLfo

rEmbeddedSystems)2.0的JavaScript绑

三维复杂场景与模型的创建。

定，通过前端HTML5的Canvas元素实现

有一

相比其他Web3D实现，WebGL具

JavaScript实现网络交互，克服了开

定的优势。首先，通过脚本语言

发

WebGL是开放的，可提高开发效率;再

网页专用渲染插件的弊端；其次，

次，WebGL可以充分利用底层的图像

硬件加速功能实现三维图形的渲染。在

于WebGL的3D地图产品，包括谷歌地

GIS领域，当前许多公司都开始推出基

图

景等，还有一些开源的项目，如Cesi-

、诺基亚地图、必应地图、百度全

等。Three．js依据WebGL规范，对底

um，WebGLGlobal，OpenWebGlobal

层WebGL代码进行简单封装，通过掩盖

一些麻烦的细节，减轻开发者的开发负

Market

市场

担并加快开发速率，在处理浏览器3D效

果方面表现优异。支持多种渲

染器(renderer)进行场景绘制，提供了

点、线、面、向量、矩阵等三维创建时

建镜头(Cameras)、物体(ob-jects)、光

所需的基本要素，并可以简单快速地将

线(lights)等对象添加到场景(Scene)中。

具有开放性，并提供的大量实例

源代码，开发者可通过逆向工程，充分

进行深入研究，进行三维场景创建，快

速有效。

三维地图应用展望

对二维数字地图应用的补充和拓展，在

基于的SVG矢量三维地图是

信息表达、图形展示、场景应用上有着

不同程度的优化和推广，其快速绘制、

界面美观、标准统一、对象操作的优点

能够使得室内三维地图具有更多领域的

应用，聚焦智慧地铁建设，室内三维地

图

保、商业资产管理等维度具有较强的推

在公众乘客地图应用、地铁运营维

的建设具有显著的推动作用。

广意义，对上海市智慧地铁、智慧城市

结束语

研究还不是很多，由于WebGL是使用了

关于WebGL三维地图在国内目前的

三角剖分（triangulation）算法来实现三

维效果，与SVG图形实现有很大不同，在

部分复杂图形的兼容性和可用性还有一定

缺陷，同时该方法在功能和性能上都存在

进一步研究的余地。文中虽然是以地铁站

作为应用示例，但在如停车场、大型交通

枢纽、商场等室内场景都有相同的应用场

景，希望通过这些研究和实践，能够为开

（作者单位：上海申通地铁集团有限公

发者带来一定的借鉴意义。

司技术中心、上海电科智能系统股份有

限公司）

67