测绘与空间地理信息
GEOMATICS & SPATIAL INFORMATION TECHNOLOGY
第44卷第5期2021年5月
Vol.44，No.5May ， 2021
组件式三维WebGIS 系统设计与实现
邱天，董敬儒，颉耀文
（兰州大学资源环境学院，甘肃兰州730000）
摘要：针对传统三维WebGIS 系统通常需要安装浏览器插件且存在前期开发效率低、系统后期可维护性差的问
题，本文提出利用Cesium 三维地球框架结合Vue 前端框架开发三维WebGIS 的思路。系统通过Vue 组织代码进 行组件式开发，以天地图在线影像服务和本地发布的地形服务为数据源，利用Cesium 构建三维场景，将“祁连 山一阿尔金山”专题地图集在此三维场景上叠加显示，同时提供测量、等高线填充和坡度坡向分析等功能。结果
表明，系统具有开发周期短、后期可维护性高、操作方便、界面流畅的特点，并且能立体、直观、全方位角度展示专 题地图。研究结果不仅能满足第二次青藏科考的需要，还能服务于祁连山国家公园建设和其他研究工作。
关键词：三维WebGIS ； Vue.js ； Cesium.js ；组件式；专题地图中图分类号：P208
文献标识码：A 文章编号：1672-5867（ 2021） 05-0021-04
Design and Implementation of Component-based 3D WebGIS System
QIU Tian , DONG Jingru, XIE Yaowen
(The Institute of Remote Sensing and GIS , Lanzhou University , Lanzhou 730000, China )
Abstract : In view of the problems in the traditional 3D WebGIS system , for example , it needs to install browser plug-in and has low
development efficiency in the early stage and poor maintainability in the later stage , the idea of developing 3D WebGIS with cesium 3D Earth framework and Vue front-end framework is proposed in this paper. Taking “TIANDITU ” online image service and local terrain service as th
e data source, the system conducts component development through Vue and constructs 3d scene with Cesium. The the
matic atlas of “Qilian-altun mountain ” is superimposed on this 3d scene , and it also provides functions such as measurement , contour
generation, and slope and aspect analysis. The result shows that the system has the characteristics of short development cycle, high
maintainability , easy operation, and smooth interface, and can display the thematic map from a three-dimensional, intuitive, and all round perspective. The results can not only meet the requirements of the second Qinghai-tibet scientific expedition, but also serve the
construction of Qilian mountain national park and other research work.
Key words : 3D WebGIS ; Vue.js ； Cesium.js ； components ； thematic map
0 引 言
目前，第二次青藏高原综合科学考察研究关键 区一祁连山一阿尔金山地区综合考察研究工作已经开
始。作为西北地区重要生态屏障的祁连山［1］，在过去50 年间环境发生了剧烈变化［2］。但即将要开展的科考缺乏 对区域现势地理基础概况的了解和相关软件系统支持，
给考察工作带来不便，因此有必要对该地区进行地理基
础情况现势调查，并开发三维WebGIS 系统对考察结果进
行展示。与二维WebGIS 相比，三维WebGIS 接近人眼视
觉习惯，地物显示更真实，可更好地呈现出空间关系
因此，在三维WebGIS 中进行专题地图可视化，使其以更 加清晰直观的方式展示，发掘隐藏在专题地图的隐含信 息，能发挥专题地图中数据的最大作用。
传统的三维WebGIS 技术通常需要安装客户端或插 件，且具有显示效果不佳、兼容性差等缺陷［4］。WebGL 技 术的出现提出了一种在浏览器中绘制三维图形的新方
法，它能直接与GPU （ Graphics Processing Unit，图形处理 器）通信绘制三维场景，提供硬件3D 加速渲染［5］o 因此, 基于WebGL 技术涌现了一大批三维地球框架，如Cesium.
收稿日期：2020-05-12
基金项目：兰州大学祁连山研究院开放课题项目（504000-87080306）资助
作者简介：邱天（1994-），男，湖北十堰人，地图学与地理信息系统专业硕士研究生，主要研究方向为三维GIS 开发与应用。
通讯作者：颉耀文（1969-），男，甘肃天水人，教授，博士,2003年毕业于兰州大学自然地理学专业，主要从事基于地理信息技术的干
旱区环境变化研究与教学工作。
22测绘与空间地理信息2021年
js、three.js、和MarsGIS for Cesium等。Cesium是由AGI公司开发的一款用于创建三维地球的开源JavaScript地图引擎，无须安装插件就能在支持HTML5标准的浏览器上运行，支持多种格式地理空间数据的可视化，适合表达地理信息。许多学者研究基于Cesium框架，对模型加载［6］、交互建模等⑺进行了探究。上述研究侧重于Cesium框架本身，在实际开发过程中，为了提高开发效率和系统可维护性，常常需要与其他框架融合开发。Vue是一款当前十分热门的互联网前端框架，它具有高性能、轻量级、响应式和组件式系统构建的特点。毛炎基于百度地图JavaScript API，利用Vue设计用户界面UI交互，构建出通如海启方言地图WebGIS⑻；黄俊勇将Vue作为开发框架，以Leaflet.js提供地图应用方面的功能支持，开发了“故事地图”WebGIS应用［9］。
本文基于上述研究，将Cesium三维地球框架与Vue 前端框架融合，以“祁连山一阿尔及山”专题地图集为数据源开发祁连山专题地图三维WebGIS系统。
1系统设计
1.1总体设计
系统总体技术框架为B/S架构，可以分为数据层、服务层、业务逻辑层和表现层4个层次，如图1所示。
数据层是系统用于展示的数据，包括“祁连山一阿尔金山”专题地图集、地形数据和多源在线影像数据。服务层将数据层中的数据发布为服务后供前端调用，专题地图集通过ArcGIS Server10.2发布为WTMS（Web Tile Map Service，互联网瓦片地图服务）；地形数据通过Tomcat9.0服务器发布为REST（Representational State Transfer ，代表性状态传输）接口类型。IIS服务器将系统发布到网络上，供外界访问。业务逻辑层封装了系统各个功能模块，包括底图模块、基础设置模块、专题地图模块、绘制模块、测量模块和分析模块。在接收到来自于表现层的请求后，业务逻辑层通过互联网抽取服务器上的数据并调用相关代码进行处理，完成后会将结果返回给表现层。表现层是系统与用户交互的部分，通过浏览器显示。系统支持当前主流的浏览器，如谷歌、火狐和Opera等。
|谷歌浏览器11火狐浏览器|〔Opera浏览器|B丙晒
浏览器端-------------------------_互联网---------------------------
服务器端
图1总体框架
Fig.1Overall framework
1.2功能设计
在总体设计的基础上，对系统的各个功能模块进行
W
具体功能设计，如图2所示。
置
设
础
基
|祁连山专题地图三维WebGIS系统|
I~
清
除
测
量
测
量
高
度
测
量
面
积
测
量
距
离
清
除
绘
制
添
加
标
记
点
绘
制
面
绘
制
线
绘
制
点
卷
帘
对
比
地
图
显
示
皮
肤
切
换
全
屏
显
示
拾
取
位
置
昼
夜
交
替
地
形
显
示
显
示
模
式
地
图
标
注
影
像
切
换
地
图
操
作
三
维
场
景
坡
度
坡
向
分
析
_
『
分
丘
高
程
分
析
_
图2功能设计
Fig.2Function design
1）底图模块包含三维场景和地图操作两个功能。三维场景用于模拟祁连山地区的真实地貌；地图操作具有缩放、平移和旋转等功能。
2）基础设置模块的功能包括：切换三维场景中叠加在地形表面的影像；控制地图标注的显示与隐藏；场景以球体模式还是平面模式显示以及地形是否显示；是否打开场景中由昼夜交替所导致的光照变化；拾取鼠标点击位置的经纬度和高程；系统全屏显示；改变主题调。
3）专题地图模块中，用户能选择显示各种类型的专题地图，并能选择地图的年份和透明度。卷帘对比功能用于比较不同年份之间的专题地图。
4）绘制模块包括绘制点、线、面和添加注记的功能，并能删除绘制的元素。
5）测量模块包含距离测量、面积测量和高度测量功能。距离和面积测量能测出贴地的距离和面积，对于实际的距离和面积具有一定的参考意义，高度测量能测量两点间的水平距离、垂直高度和直线距离。
6）分析模块包含高程分析和坡度坡向分析。高程分析有两种模式供用户选择：等高线填充和等高面填充。等高线填充需要定义等高线间距和等高线颜；等高面填充需要输入等高面透明度和填充带。坡度坡向分析需要用户绘制待分析区域，并输入参数：颜条带、起始坡角、终止坡角和透明度。
2关键技术研究
2.1三维场景构建
若想构建出真实感强的三维场景，地形数据是不可或缺的。DEM数字高层模型是一种常用的地形模型，它描述的是某个点的高程信息。而在ArcGIS中打开DEM，只能看到灰度图。因此，仅仅依靠地形数据构建三维场景是不够的，必须借助其他数据才能展示地球表面的高低起伏状态，而结合影像图来展示的效果是最好的。本文利用Cesium三维可视化库构建三维场景的总体流程如下［10］:
1）创建Cesium实例，获取虚拟地球对象viewer；
2）分别创建实现地形和影像的类对象，并在对象内部指定服务器端URL地址。
3）将实现类对象赋值给viewer对象中的TerrainProvider和ImageryProvider属性
。
第5期邱天等：组件式三维WebGIS系统设计与实现23
2.1.1地形服务
Cesium中的地形是一种瓦片数据，有两种类型：STK World Terrain和Small Terrain。STK地形具有分辨率高、效果逼真的特点。但该技术目前未开源，只能通过Web API调用;Small Terrain是一种中等分辨率地形，虽然效果不如STK地形，但也基本体现原有数据精度［11］o由于STK地形服务器远在国外，访问时地形加载速度受到一定限制，故本文采用Small Terrain实现相似效果。制作Small Terrain时，首先从地理空间数据云上下载祁连山地区30m分辨率DEM数据，对数据进行预处理、拼接、裁剪；其次利用开源工具CTB(Cesium-Terrain-Builder)将GeoTIFF格式的DEM数据处理为*.terrain格式的地形数据集，最后用Tomcat发布成地形服务，提供URL供前端调用。
2.1.2影像服务
Cesium支持加载在线影像服务和离线影像切片［12］，本文根据实际需求和网络环境，选择使用在线影像服务。Cesium支持的在线影像服务见表1(/ refdoc.html)。天地图影像的服务器在国内，数据接入速度快、位置服务精度高、数据资源免费，因此，本文选用天地图作为系统的默认影像W根据自身网络情况，用户还可以切换其他影像服务。
表1在线影像服务
Tab.1Online image services
服务类型服务地址特点
天地图v/img_w/wmts?tk-
必'应dev.virtualearth
http：//leapis/m aps/a pi/s taticmap?maptvpe 谷歌
satellite¢er-{y丨，{x丨&zoom-{level}&s ize-256x256&key-{key丨
https：//s ervices.arcgisonline/ArcGIS/r est/services/World ESRI
Imagery/M apServer 速度快、精度高、数据完整且没有偏移，需要申请许可大而全，需要申请许可，偶尔访问异常
需要申请许可，影像有水印，访问困难
能加载ArcGIS Online和Server影像，灵活性好
2.2组件式系统构建
2.2.1前端框架简介
J avaScript是互联网时代开发Web应用的核心语言，但它本身并不具有模块开发的功能［14］o对于WebGIS这种交互和结构十分复杂的单页面应用，如果用户需求发生更改或增加新功能，代码的修改和后期维护工作会十分棘手；并且由于JavaScript的事件冒泡机制，按照传统的方式开发系统经常会出现很多非逻辑性系统错误。因此，在前端开发中，开发者通常需要选择合适的框架来组织大规模的代码、提供应用系统可维护性。当前，互联网前端领域3大主流框架的简单对比见表2o
表2前端框架对比
Tab.2Front-end framework comparison
名称发布时间主要特点学习成本Angular2009由Java迁移而来，功能完善，较笨重高React2013前端组件化的鼻祖中Vue2015轻量级，响应式数据绑定和组件式系统构建低
Angular由谷歌团队研发，是三者中出现最早的。Angular引入了Java相关内容，功能完善，代码复用率较高，但是它庞大的体系和陡峭的学习曲线使得开发者对其褒贬不一［15］o React起源于Facebook项目，它最初将组件化的观念融入前端。对于逻辑复杂的工程，可以对组件进行隔离，降低彼此间的耦合度，出现问题时方便开发人员对其进行修改。
Vue由我国开发者尤雨溪开发，是一套用于构建用户界面的渐进式前端MVVM(Model View ViewModel)
框架，采用自底向上增量开发的设计，具有响应式数据绑定和组件式系统构建的特点［16］。响应式数据绑定指将页面元素DOM(Document Object Model，文档对象模型)和底层数据保持同步，一旦底层数据被修改，DOM会相应地被更新，并且Vue采用虚拟DOM渲染页面，相较于传统方式页面会更加流畅［8］o组件式系统构建是指将页面划分为若干个具有所需的全部的资源的独立区域，这样的每个区域作为一个组件［17］o组件内包含一个或多个功能，组件间可以相互引用或者嵌套。同时,Vue还拥有一系列完整的组件式系统开发工具，女口Vue-router、Vuex和视觉UI 组件库。
2.2.2组件式开发
1)组件拆分。本系统被拆分成如图3所示的若干个组件。App.vue是系统组件，通过Vue-router管理路由。Vue-router是负责前端页面路由跳转的工具，它统一设置各个页面访问路径URL，并且与页面中的组件做映射，制定特定的渲染规则，无需切换网页就可以刷新局部页面［13］。在路由配置文件router.js中设置Home.vue的访问路径，用户访问网页时，Vue-router会解析浏览器地址并将网页导航到根组件Home.vue上。
Home.vue是系统根组件，负责系统内容显示。根组件需要被拆分为多个子组件，由每个子组件承担页面的一部分功能。首先，根据功能模块设计将每个模块作为
图3组件拆分Fig.3Components Split 力，提升了开发效率。3系统实现
一个组件，绘制和测量模块不需要输入参数，所以直接在根组件中实现；底图组件(Map.vue)用于实现底图模块中的三维场景和地图操作功能；基础设置组件(basicSetting. vue)中用于实现基础设置模块中所有的功能；专题地图组件(thematicMap.vue)实现专题地图模块中专题地图展示和卷帘对比功能。其次，为了方便参数输入和降低实现难度，分析模块中的高程分析和坡度坡向分析功能被拆分为两个组件：altitudeAnalysis.vue和slopeAnalysis.vue。
子组件在根组件中使用时，先在根组件中导入并注册，然后在根组件模板中用标签引用。子组件实现的示例代码如图4所示。
<template>严组件实现*/
<Map><ZMap>
<basicS e ttingX basicS e tti n g>
<themeticMapsX/themeticMaps>
</template>
<script>
Import Map from“./components/Map"/*组件导入*/
Import basicSetting from c<./components/basicSetting,?
Import themeticMaps from4<./components/themeticMaps”
Export default{
Name:“Home”,
Components:{
Map,basicSetting,themeticMaps/*组件注册*/
</script>
图4子组件实现实例代码
Fig.4Instance code of subcomponent implementation
2)组件通信。组件式系统开发降低了耦合性，但同 时带来组件之间数据流动的问题。Vuex是一个专门为
Vue应用程序开发的状态管理工具，它统一管理所有组件的状态，并且只能以特定的规则来改变，增强了整个项目的可控性(https：///zh-cn/index.html.)。Vuex由4个部分组成：store、getters、mutation和action。store中维护着系统全局的状态，所有的组件均可通过getters获取数据状态。组件需要修改状态时，则通过action统一派发mutation，再由mutation修改数据状态。
3)基于iView组件库的界面设计。视觉UI(User In-terface)是系统直接面对用户的窗口，它直接影响着整个系统的美观程度。许多国内外厂商都基于Vue开发了视觉组件库，其中比较有代表性的有Element和iView。iView主要适用于PC场景，本文选择iView作为视觉组件库，使用前通过NPM安装依赖包，使用时在模板中用标签引用即可实现，减少了开发人员在界面设计上消耗的精
本文以“祁连山一阿尔金山”专题地图集为数据源，对系统进行了实现。系统界面顶部是系统菜单栏，左上角按键可以将镜头恢复为初始视角，右上角是各个功能模块的按键，窗口中显示的是祁连山地区的三维场景，拖动鼠标可以实现地图的平移、缩放和旋转。在专题地图模块参数输入界面，用户可通过切换选项卡来选择加载的专题地图类型，激活卷帘对比功能可以对不同年份的专题地图进行对比分析。专题地图可以加载在三维场景中，利用质底法进行渲染。
系统的部分功能展示如图5。图5A展示的是测量功能，可以测量三维场景中的距离、面积和高度；图5B展示 的是等高线填充功能；图5C展示的是坡度坡向分析功能，坡度大的地区颜较深，坡度小的地区颜较浅。
图5部分功能
Fig.5Partial functions
4结束语
通过集成Vue和Cesium框架，本文实现了祁连山专题地图三维WebGIS系统。将Vue前端框架引入到三维WebGIS开发中，利用Vue-router、Vuex等组件式开发工具，降低了系统耦合性并提升了后期可维护性；引用iView 组件库设计界面，减少了开发人员在界面设计上耗费的精力，提升了系统开发效率；借助Cesium三维地球框架，利用天地图在线影像和本地发布的地形服务实现了祁连山地区三维场景的构建，并将专题地图和其他地理要素在此场景上加载，提供距离测量、面积测量、高度测量、等高线填充、等高面填充和坡度坡向等功能。系统使用户能从在三维场景中观察专题地图，得到更加真实、生动的体验，对该地区有更直观、全面的了解，具有良好的现实意义和推广使用价值。
参考文献：
[1]汪有奎，郭生祥，汪杰，等•甘肃祁连山国家级自然保护
区森林生态系统服务价值评估[J].中国沙漠,2013,33
(6)：1905-1911.
[2]王根绪，程国栋，沈永平.近50年来河西走廊区域生态
环境变化特征与综合防治对策[J].自然资源学报,
2002(1)：78-86.
(下转第30页
)
sessment of landslide susceptibility using statistical and[8] artificial intelligence-based FR-RF integrated dodel and
multiresolution DEMs[J].Remote Sensing,2019,11
(9),1-24.[9] [2]刘晓.基于遥感与GIS的林芝中部地区地质灾害危险
性评价研究[D].大连：辽宁师范大学,2019.
[3]熊倩莹.基于1：50000地质灾害填图的区域地质灾害[10]
易发性及危险性的评价与区划[D].成都：成都理工大
学,2015.
[4]张晓东.基于遥感和GIS的宁夏盐池县地质灾害风险[11]
评价研究[D].北京：中国地质大学,2018.
[5]邱曼，魏云杰.基于层次分析法的叶城二牧场地质灾害
危险性评价[J].防灾减灾学报,2019,35(03)：9-14.[12] [6]VERSAIN L D,BANSHTU R S,PANDEY D D.Comparative
evaluation of GIS based landslide hazard zonation maps u
sing different approaches[J].Journal of the Geological[13] Society of India,2019,93(6)：684-692.
[7]IRSHAD A B,MIIFTAUL S,PERVEZ A,et al.Multi-cri-[14]
teria evaluation for landslide hazard zonation by
integrating remote sensing,GIS and field data in North[15] Kashmir Himalayas,J&K,India[J].Environmental
Earth Sciences,2019,78(20)：1-15.张向营，张春山，孟华君，等.基于GIS和信息量模型的京张高铁滑坡易发性评价[J].地质力学学报,2018,24 (1):96-105.
孙强，张泰丽，伍剑波，等.基于GIS与层次分析法的龙溪流域滑坡风险评价[J].华东地质，2018,39(3)：227-233.
邱利平，董廷旭，冉锦屏.基于GIS与AHP的旺苍县滑坡灾害危险性评价[J].安徽农业科学,2018,46(2): 51-54+59.
李永红，向茂西，贺卫中，等.陕西汉中汉台区地质灾害易发性和危险性分区评价[J].中国地质灾害与防治学报,2014,25(3):107-113.
吴森，李虎杰，张魁，等.高程因素对平昌县滑坡灾害发育的敏感性分析[J].三峡大学学报(自然科学版)，2015,37(4)：62-66.
李杰.坡面形态对斜坡稳定性影响研究[D].西安：长安大学,2018.
李佳春.降雨入渗对麻湾村滑坡稳定性影响研究[D].北京：中国地质大学,2018.
马秋红.秦巴山区地层岩性与地质构造对地质灾害发育的控制作用分析[D].西安：长安大学，2011.
[编辑：任亚茹]
(上接第20页)
[12]GUAN H,LI J,YU Y,et al.Using mobile LiDAR data
for rapidly updating road markings[J].Intelligent Trans
portation Systems,IEEE Transactions on,2015,16(5):
2457-2466.
[13]XIAO W,VALLET B,SCHINDLERK,et al.Street-side
vehicle detection,classification and change detection
using mobile laser scanning data[J].ISPRS Journal of
Photogrammetry&Remote Sensing,2016(114):166-
178.
(上接第24页)
[3]吴风华，张亚宁.应用WebGIS设计与实现二三维一体
化系统[J].测绘通报,2014(7):125-127.
[4]朱丽萍，李洪奇，杜萌萌，等.基于WebGL的三维
WebGIS场景实现[J].计算机工程与设计，2014,35
(10)：3645-3650.
[5]马洪成，钱建国，杨戈.基于Cesium的三维电网WebGIS
开发与实现[J].测绘与空间地理信息,2018,41(11)：
73-76.
[6]孙晓鹏，张芳，应国伟，等.基于Cesium.js和天地图的三
维场景构建方法[J].地理空间信息,2018,16(1)：
65-67.
[7]姜婷.面向交互建模与专题分析的三维WebGIS平台开
发及应用研究[D].上海：华东师范大学,2017.
[8]毛炎.基于Vue.js框架的Web方言地图的设计与开发
[D].武汉：武汉大学,2018.
[9]黄俊勇.基于Vue.js的WebGIS云管理与服务平台[D].
武汉：武汉纺织大学,201&
[10]高云成.基于Cesium的WebGIS三维客户端实现技术
研究[D].西安：西安电子科技大学,2014.[14]MOHAMMADI M,WOOD R,WITTICH C.Non-temporal
point cloud analysis for surface damage in Civil structures
[J].ISPRS International Journal of Geo-Information,
2019,8(12),527.
[15]HAN X,WANG H,LU J,et al.Road detection based on
the fusion of Lidar and image data[J].International Jour
nal of Advanced Robotic Systems,2017,14(6)：1-10.
[编辑：张曦]
[11]乐世华，张煦，张尚弘，等.基于Cesium的WebGIS流域
虚拟场景搭建[J].水利水电技术,2018,49(5)：90-96.
[12]范俊甫，胡桃英，何惠馨，等.Cesium框架多源电子地图
瓦片数据混搭方案设计[J].遥感学报,2019,23(4)：
javascript基本特点695-705.
[13]穆凯.基于天地图API的综合服务管理系统设计与实
现[J].测绘通报,2016(04):114-116,132.
[14]刘钊，谢美慧，田琨，等.公众平台及移动位置服务
的旅游应用模式[J].测绘科学,2017,42(01)：193
196,202.
[15]韦雪文，高心宇，孙玉辉，等.基于web的城市河流生态
健康评价系统设计[J].电脑知识与技术，2017,13
(26)：92-94.
[16]易剑波.基于MVVM模式的WEB前端框架的研究[J].
信息与电脑(理论版),2016(19)：76-77,84.
[17]江庆，叶浩荣.Vue+Webpack框架在银行App前端开发
的应用[J].金融科技时代,2016(11):15-19.
[编辑：任亚茹]
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论