基于WebGL的三维数字城市的设计与实现

王星捷，李春花

(成都理工大学 工程技术学院，四川 乐山 614007)

0 引 言

随着信息技术与三维引擎技术的发展，Web三维GIS技术的需求也变得越来越大，在不动产登记中的房产数据涉及到的房产分层分户管控，需将房产建筑按高程分布来分层展示和分析；城乡建设中的填挖方计算和洪水淹没分析通过三维可视化来展示实际影响的范围以模拟演算；环境气象监控不同高程的大气质量分析需要更加直观的三维效果展示。因此三维GIS的研究具有重大意义。

WebGL具有以下优点[1-2]：不用安装额外的插件程序就可以直接在网页中加载和渲染三维场景；可以直接调用设备的硬件来加速渲染三维场景；开发Web三维场景时调用Web的3D图形库非常方便。

国内基于WebGL技术[3-4]实现Web三维GIS效果较好的产品是超图的SuperMap平台的iClient产品，但是它还是借助国外开源的js插件库Cesiumjs来实现，实现的GIS功能仅仅是属性显示、查询和基本的浏览功能，目前该技术在国内仍处于研究探索阶段。Cesiumjs是一个用JavaScript编写的基于WebGL的三维GIS引擎插件库，专门针对地理信息数据开发，可以很方便地将影像图和二维地图数据加载到三维地球模型中，也可加载在线地形数据，能够很好地实现地理坐标向WebGL坐标的转换。但是它仅仅作为一个将GIS数据进行三维可视化的插件[5-6]，没有GIS分析功能，而且目前支持的数据来源有限。

文中结合WebGL技术和ArcServer平台提出一种三维数字城市的实现方法，实现了二三维同步、定位查询、缓冲分析、三维路径分析等多项功能。

1 框架设计

技术框架采用了面向资源服务的模式，以异步通信处理方式设计，分为四层：二维地图服务层、二维业务层、三维业务层和展示层。具体设计如图1所示。

图1 技术框架

二维地图服务层主要利用ArcGIS Server平台，该平台主要是为系统提供二维地图数据服务，将二维电子地图矢量图数据、空间数据信息、网络分析图、地理分析等数据发布为WebGIS数据服务。提供了地理查询、缓冲区分析、网络路径分析等WebGIS服务，同时提供了可访问的REST资源服务，通过REST的URL方式进行访问，可以实现二维地图的各项功能。

二维业务层主要利用ArcGIS API For JavaScript进行二次开发，通过调用ArcGIS Server服务中的REST资源，实现相关的二维地图基本操作，调用服务中提供的网络分析、缓冲分析等功能实现二维地图的相关的空间分析功能。该层是地图业务实现的基础层，也是二、三维业务实现的基础层。

三维层主要实习三维场景的加载以及二、三维数据的联动。三维场景方面主要是利用WebGL提供的标准JavaScript库Three.js来创建三维场景，通过场景坐标转换和模型UV处理，可以让模型和坐标无误地加载到三维场景中。三维数据上的操作处理分为两个部分，第一部分是获取二维地图操作的基本信息，可以通过二维业务层得到；第二部分是让二维信息在三维中进行显示，从而实习三维空间操作的业务功能，需要通过二、三维视图同步处理，将二维的业务无误地联动到三维中，从而实现三维GIS功能。在路径分析方面，设计了三维路径分析算法，对二维的路径分析进行了优化处理，实现了三维路径分析功能。

展示层主要是三维显示和业务操作在三维中的展现，利用Three.js技术实现，并且无需任何插件可以浏览三维场景和模型。在没有任何处理的情况下，三维模型、三维漫游和三维场景旋转显得比较生硬，运动轨迹不平滑，需要通过三维对象运动控制算法进行处理。

2 三维路径分析算法

文中研究的三维GIS平台实现的三维路径分析算法[7]是基于ArcGIS的最短路径分析完善A-Star(A*)算法实现的。A*算法是一种静态路网中求解最短路径最有效的直接搜索算法，也是在交通网络分析中寻找最优路径用得最多的启发式搜索算法。它的原理是通过从起点开始遍历网络中的每一个节点并计算其到起点和终点所需要的代价直到遍历到终点时，所遍历出的路径就是需要找出的最优路径。A*算法计算代价的估价函数表达式为：

F(n)=G(n)+H(n)

(1)

其中，F(n)表示估计经过n节点所花费的总的代价的估价函数；G(n)表示起点到n节点所花费的实际代价；H(n)表示n节点到终点的估价值。

以D(n)表示状态n到目标状态的距离，那么H(n)的选取大致有如下三种情况：如果H(n)D(n)，搜索的点数少，搜索范围小，效率高，但不能保证得到最优解。

从式1可以看出G(n)为已知的，关键在于对H(n)的设计，H(n)的取值决定了算法的简化程度。对于H(n)的设计有多种方法，常见的有曼哈顿距离、欧几里得距离、对角线距离等。其中，欧几里得距离最短，但是运行的时间较长。为了简化查询，提高算法执行的速度，在文中研究的三维GIS平台中，结合空间分析的缓冲分析算法，其中G(n)为起点到n节点所经过的道路边长度总和，H(n)为n节点到终点的直线距离[8]。在寻找节点时，结合缓冲分析算法，得出附近的节点，简化遍历搜索的范围。

首先，需要对每一个道路边和节点进行遍历，在制作网络分析数据集时需要将每条道路路线[9]进行打断相交线处理，建立网络路径，以保证每个道路节点通畅[10]，方便路径分析算法遍历[11]。当执行最短路径分析功能时，服务器将从起点开始向周围节点进行启发式搜索，以设定的H(n)值作为参考，进行缓冲分析，得出附近的节点，遍历节点，估算F(n)，得出代价值，求出最小代价节点。优先遍历估算代价最小道路节点和道路边，并进行标记。通过不断的递归判断，当搜索到终点时，所标记经过的路径即为需要的最优路径，这时只需要返回将标记过的道路边遍历出来就得到了路径分析的结果。具体的算法过程如图2所示。

图2 基于A*算法的最优路径分析过程

3 系统实现

(1)平台搭建过程。

文中研究的基于WebGL搭建的Web三维数字城市平台采用B/S架构，使用强大的GIS数据处理软件进行GIS基础数据的制作与处理，使用3DsMax进行部分人工建模，利用可靠、安全、高性能的IIS服务建立站点，使平台的性能进一步提升。借助ArcGIS Server地理信息服务实现强大的地理分析功能，使用WebGL技术通过将ArcGIS Service的地理信息数据和分析服务在网页进行三维可视化，从而搭建出一个功能强大、安全可靠的Web三维GIS分析基础平台。

(2)数据发布。

数据发布的工作是将准备好的数据通过服务发布到互联网上，使互联网中的终端设备能够调用到本机(即服务器)发布的服务。主要分为两种：地理信息服务和基础数据服务。地理信息服务包含GIS数据服务和GIS分析服务两种。数据服务以及网络分析服务的发布方法比较简单，直接将制作好的基础地图和网络分析地图文档在ArcMap或者ArcCatalog中的目录树中使用右键的共享为服务功能将地图文档发布到ArcGIS Server站点即可，发布参数按ArcGIS默认的参数即可满足平台需求。基础数据服务发布包括系统的模型数据、贴图文件以及系统的影像地图数据的发布，这些数据可以直接放在平台对应的IIS站点根目录下，待平台调用。

(3)坐标转换。

ArcGIS Server数据服务提供的矢量数据为ArcGIS特有的数据格式，也就是包含基本的点、线、面等信息。这些点、线、面都是由一系列的点集合组成，点、线、面都属于空间信息，空间信息都具有坐标信息的特性，在数据导入和加载时，因空间参考的因素而造成空间位置的变化和发送偏移，因此需要Three.js场景坐标转换算法将这些点集中的每一个点转换为平台场景中的坐标点，以便平台可以利用Three.js使用这些矢量数据。

(4)模型创建。

经过坐标转换算法处理后，场景数据与对应的地理要素坐标保持一一对应的关系，三维模型都是利用三维建模软件制作的外部模型，需要针对具体的点位置进行导入和加载，对于点数据可以直接按照属性数据中的模型物理路径字段指定的位置加载模型[12]。道路、广场等矢量面数据需要根据具体的位置、宽度进行纹理贴图；粗模建筑矢量面数据需要根据高度字段对其进行拉伸形成立体的建筑，同时按照贴图物理路径字段指向的贴图对模型进行贴图；精细模型则要根据具体的建筑面的长宽，建立尺寸一致的模型，从外部数据中进行导入。

(5)二、三维地图同步。

二、三维同步是实现三维数字城市技术的关键，通过二、三维同步可以将二维数据直接在三维模型中进行实时同步。该技术的实现简化了三维数字城市开发的步骤，降低了开发难度，而且实现的效果好。该系统采用视图同步的方法实现了二、三维地图数据的同步。视图同步实现方法是在二维地图的地图控件的地图范围变化事件中注册三维场景的相机同步控制函数。相机同步控制函数中利用二、三维视图同步算法计算出二维地图当前显示范围场景中相机对应的位置，同时利用三维对象运动控制算法对相机的运动过程进行插值计算。让场景中的相机能够动画过渡到根据二维地图显示范围计算出的相机位置，从而实现视图的同步[13]。

(6)GIS服务三维可视化。

利用ArcGIS Server发布的GIS分析服务来实现平台的三维GIS分析功能[14]。实现过程如下：平台业务层使用AJAX异步请求ArcGIS Server的GIS分析服务，ArcGIS Server返回浏览器请求的数据，平台根据结果数据的ID映射出三维场景中的建筑或街道等对象，最后将这些对象模型在Three.js场景中进行高亮显示，从而实现GIS服务的三维可视化。三维路径分析服务返回结果可根据二维数据的三维可视化方法在场景中创建相应的路径对象。

4 实验分析

文中研究的数据是来自于某一城市某城镇的数据，范围大小为10平方公里。模型数量超过5 000个。城市建筑多样，道路情况较为复杂，交通网络图密度大。分别对定位查询、缓冲分析查询和最短路径等三维功能进行了测试。

三维定位查询功能，针对不同的地址名，在搜索框中输入地名关键字，系统客户端向后台服务器系统发送中执行地址查询关键字，查询结果将通过JSON的数据格式返回到客户端，将查询结果同步展示在二维地图和三维场景中，如图3所示。

图3 三维定位查询

缓冲查询主要是通过缓冲分析来实现区域范围内的数据。可在二维地图界面中绘制矢量的点、线、面来设置缓冲参数对建筑物进行缓冲查询，后台服务器接收到数据参数，通过调用几何服务执行几何查询，并生成相应的几何缓冲区域。将缓冲区范围内的所有目标类型对象查询出来，通过JSON的格式返回给客户端，将分析数据在二维地图上进行显示，通过视图同步处理，将二维空间数据同步在三维地图对应的三维模型中显示，如图4和图5所示。

图4 缓冲查询结果在二维地图中的高亮显示

图5 缓冲查询结果在三维地图中的高亮显示

三维路径分析的实现是通过ArcGIS Server获取二维的网络路径图，将节点和各个节点的联通网络构成矩阵网络，通过文中提出的路径算法进行实现。用户在场景中选中一系列需要设置为途径站点的建筑物，然后点击路径分析，分析结果将展示在二维地图和三维场景中。采用WebGL技术还可以实现三维的路径漫游，在三维路径分析中，可以设计漫游小车，进行路径模拟。三维场景中的展示效果如图6所示。

图6 三维路径分析

5 结束语

将WebGL与ArcGIS Server相结合，以ArcGIS Server实现空间数据和空间分析数据的传输，以WebGL实现在客户端三维数据的加载和处理，而二者结合实现的三维数字城市系统，很好地实现了空间数据与三维模型的快速加载，二、三维数据联动，三维属性查询，三维缓存分析和三维路径分析等功能。测试数据的三维加载和三维功能实验证明了该技术方案先进、实用、扩展性好、算法完善；实现的三维系统界面友好，功能完备，解决了数据加载和浏览需要额外插件的问题。为基于Web的三维数字城市平台的建设，提供了一种新的框架方案和技术参考。