Market 市场
66
世界轨道交通
2019.3
基于Three.js 的地铁站SVG地图三维化的应用研究
◎ 张立东 纪文莉 孙煜 苏贵民
随
着信息技术的发展，智慧城市的概念孕育而生。蓬勃发展的电子地
图，承载着城市地理随着城市地理空间信息，其重要意义不仅仅局限于方便人们的出行导航，亦是呈现地理空间、城市面貌的重要途经，并在此基础上形成了种类繁多的生活应用服务，改变着人们的生活方式。近年来，随着Web3D技
术的快速发展，并趋于成熟，在各领域都得到了广泛的应用。
目前，上海市申通地铁技术中心开
展了基于SVG技术的数字地图研究工作，并取得相应标准、规范、指导意见等丰富成果，然而研究内容侧重于SVG二维地
图应用，三维地图较少涉及。
三维地图发展现状
现在出现在网络上的三维地图可分为两种：实景三维地图和虚拟三维地图。
实景三维地图使用卫星遥感或激光
技术对实物进行扫描拍摄，通过数据抽象，刻画实体三维模型。它具备直观性强、信息量大、精确性高等优点。国内的高德地图作为2010年上海世博会唯一授权和指定的地图服务商，同样为世博会提供了三维实景地图的服务，并且如今正逐步将三维实景地图移植应用到手机中，让每一位用户都可以享受到三维地图带来的便利。
近些年来这两种方式都取得了不
错的效果，但各自的特点也相应地限制了发展：实景三维地图需要进行实地扫描，若地理环境由于主观或客观原因无法到达，则无法采集得到数据文件。同时，这种实景展现所带来的隐私安全问题也不容忽视，故类似于政府机关、科研院所、社区小院等地方是无法构建实景三维地图的。而虚拟三维地图在采集了地理信息数据后，需要手工为每一个模型进行建模，工作量巨大。最后，两种方式其实质都是以伪三维的模式为用户呈现试图的，用户无法任意改变自己的视角来观察建筑模型。
技术实现路径与效果展示
技术实现框架
标准二维SVG地图
SVG地图解析
由于SVG和Three.js基础图形元素
并不一致，如Three.js并不支持直接绘
制椭圆。为了统一格式需要把SVG基础图形元素转成Three.js所支持的THREE.ShapePath。在Three.js中ShapePath 和SVG的path格式类似，都能表达出复杂的二维图形，通过对二维平面ShapePath进行一定高程的拉伸，即可完成地图的三维化过程。由于path能够
表达出各种复杂图形，且在三维引擎中同样支持path，把SVG中特有的复杂图形解析为path 是当前的最优解。例如通过数学公式将SVG二维图形里圆形转换成
three.js工具中的圆形表达。
标准二维SVG地图SVG三维地图建设分为三个步骤：
1，调用申通地铁SVG数字地图平台
接口，从平台获取标准化SVG二维平面地图；2，对二维平面地图进行模型解析，识别SVG图形元素；3，依靠three.js工具
特点，对二维地图进行三维建模。
SVG标准地图调用
对接申通地铁SVG数字地图平台，从
平台获取地铁标准化站厅图或站台图，作为三维地图解析建模的基础。其中标准地图结构分为区域、对象两层。区域是承载对象的载体，也可认为是地面。对象可以是房间、地铁设施设备等类型。例如下面
是一个标准SVG地图样例：
贝塞尔曲线表达圆形示意图
SVG标准中特有的CIRCLE（圆）元
素在WebGL 的接口中并不适用，需要把
Market 市场
67
www.worldrailway
圆用平台通用的贝塞尔曲线来表达。已知，如果一段曲线要用 n段的贝塞尔曲线来表达，每一段最佳的控制点即为        。要用四段贝塞尔曲线表达出一个单位圆，最佳的控制点是        。因此，得到SVG中的圆的圆心以及半径后，便可以用
四段贝塞尔模拟出同一个圆。
三维地图建模
首先，利用T h re e.j s 封装好的接
口进行三维场景的基本搭建。包括场svg图形
景T h r e e 。S ce n e 、透视投影摄像机（THREE.PerspectiveCamera）、平行
光源（THREE.tionalLight）、半球光源
（THREE.HemisphereLight）、WebGL 渲染器（THREE.WebGLRenderer）以及相机控制器（THREE.OrbitControls）。由于THREE.ShapePath本身是二维平面
图形，需要拉伸、贴材质等操作转换成
三维模型。
关键技术
SVG矢量图
W3C(World Wide Web ConSortium
国际互联网标准组织)在2000年8月制定
的一种新的二维矢量图形格式，即网络矢量图形标准：SVG。SVG是使用XML来
描述二维图形和绘图程序的一种语言。它作为一种网络图形格式，在网络上有着位图不可比拟的优势。他的图形存储容量小，对网络的输入负载小，网络传输延时小，支持交互和动画，图像内的文字信息可以被网络搜索引擎所检索，而且图像的放大、缩小操作不会使图像失真。同时SVG基于XML，有很好的跨平台性。
综上所述，在网络上，SVG有着合
适网络环境而位图无法比拟的特点：
（1）任意缩放，用户可以任意缩放图
像显示，不会破坏图像的清晰度、细节
等；（2）文本独立于图像，文字可编辑可搜索；（3）文件所占内存小，加载速度快，所占带宽少；（4）可扩展标记语言结构，交互性、可操作性和可编程性
较强。
Web3D绘图标准WebGL
本文采用的关键技术包括新一代
Web标准HTML5，3D绘图标准WebGL 以及第三方类库Three.js。其中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可以充分利用底层的图像硬件加速功能实现三维图形的渲染。在GIS领域，当前许多公司都开始推出基于WebGL的3D地图产品，包括谷歌地
图、诺基亚地图、必应地图、百度全景等，还有一些开源的项目，如Cesi-
um，WebGLGlobal，OpenWebGlobal 等。Three．js依据WebGL规范，对底层WebGL代码进行简单
封装，通过掩盖一些麻烦的细节，减轻开发者的开发负
担并加快开发速率，在处理浏览器3D效果方面表现优异。Three.js支持多种渲染器(renderer)进行场景绘制，提供了点、线、面、向量、矩阵等三维创建时所需的基本要素，并可以简单快速地将建镜头(Cameras)、物体(ob-jects)、光线(lights)等对象添加到场景(Scene)中。Three.js具有开放性，并提供的大量实例源代码，开发者可通过逆向工程，充分进行深入研究，进行三维场景创建，快速有效。
三维地图应用展望
基于three.js的SVG矢量三维地图是
对二维数字地图应用的补充和拓展，在信息表达、图形展示、场景应用上有着不同程度的优化和推广，其快速绘制、界面美观、标准统一、对象操作的优点能够使得室内三维地图具有更多领域的应用，聚焦智慧地铁建设，室内三维地图在公众乘客地图应用、地铁运营维保、商业资产管理等维度具有较强的推广意义，对上海市智慧地铁、智慧城市
的建设具有显著的推动作用。
结束语
关于WebGL三维地图在国内目前的
研究还不是很多，由于WebGL是使用了三角剖分（triangulation）算法来实现三
维效果，与SVG图形实现有很大不同，在
部分复杂图形的兼容性和可用性还有一定缺陷，同时该方法在功能和性能上都存在进一步研究的余地。文中虽然是以地铁站作为应用示例，但在如停车场、大型交通枢纽、商场等室内场景都有相同的应用场景，希望通过这些研究和实践，能够为开发者带来一定的借鉴意义。
（作者单位：上海申通地铁集团有限公司技术中心、上海电科智能系统股份有限公司）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。