标签：专题地图 2021.12 WebGIS 系统 三维 29 Cesium Vue 组件
通过集成 Vue 和 Cesium 框架，文章实现了祁连山专题地图三维 WebGIS 系统。将 Vue 前端框架引入到三维WebGIS 开发中，利用 Vue－router、Vuex 等组件式开发工具，降低了系统耦合性并提升了后期可维护性; 引用 iView组件库设计界面，减少了开发人员在界面设计上耗费的精力，提升了系统开发效率; 借助 Cesium 三维地球框架，利用天地图在线影像和本地发布的地形服务实现了祁连山地区三维场景的构建，并将专题地图和其他地理要素在此场景上加载，提供距离测量、面积测量、高度测量、等高线填充、等高面填充和坡度坡向等功能。系统使用户能从在三维场景中观察专题地图，得到更加真实、生动的体验，对该地区有更直观、全面的了解，具有良好的现实意义和推广使用价值。
在三维 WebGIS 中进行专题地图可视化，使其以更加清晰直观的方式展示，挖掘隐藏在专题地图的隐含信息，能发挥专题地图中数据的最大作用。WebGL 技术的出现提出了一种在浏览器中绘制三维图形的新方法，它能直接GPU( Graphics Processing Unit，图形处理器) 通信绘制三维场景，提供硬件3D加速渲染，基于 WebGL 技术涌现了一大批三维地球框架，如 Cesium．js、three．js、和 MarsGIS for Cesium 等。Cesium 是由 AGI 公司开发的一款用于创建三维地球的开源 JavaScript 地图引擎，无须安装插件就能在支持 HTML5 标准的浏览器上运行，支持多种格式地理空间数据的可视化，适合表达地理信息。Vue 是一款当前十分热门的互联网前端框架，它具有高性能、轻量级、响应式和组件式系统构建的特点。
系统设计
总体设计：
系统总体技术框架为 B/S 架构，可以分为数据层、服务层、业务逻辑层和表现层 4 个层次
数据层是系统用于展示的数据，包括“祁连山—阿尔金山”专题地图集、地形数据和多源在线影像数据。服务层将数据层中的数据发布为服务后供前端调用，专题地图集通过 ArcGIS Server 10．2 发布为 WTMS( Web Tile Map Service，互联网瓦片地图服务) ; 地形数据通过 Tomcat 9．服务器发布为 REST(代表性状态传输) 接口类型。IIS 服务器将系统发布到网络上，供外界访问。业务逻辑层封装了系统各个功能模块，包括底图模块、基础设置模块、专题地图模块、绘制模块、 测量模块和分析模块。表现层是系统与用户交互的部分，通过浏览器显示。
功能设计：
关键技术研究
三维场景构建
利用 Cesium 三维可视化库构建三维场景的总体流程如下:1) 创建 Cesium 实例，获取虚拟地球对象 viewer;2) 分别创建实现地形和影像的类对象，并在对象内部指定服务器端 URL 地址。3) 将实现类对象赋值给viewer对象中的TerrainProvider和ImageryProvider 属性。
地形服务
Cesium 中的地形是一种瓦片数据，有两种类型: STK World Terrain 和 Small Terrain。STK 地形具有分辨率高、 效果逼真的特点。但该技术目前未开源，只能通过 Web API 调用; Small Terrain 是一种中等分辨率地形，虽然效果不如 STK 地形，但也基本体现原有数据精度,其次利用开源工具 CTB( Cesium－Terrain－Builder) 将GeoTIFF 格式的 DEM 数据处理为* ．terrain 格式的地形数据集，最后用 Tomcat 发布成地形服务，提供 URL 供前端调用。
影像服务
Cesium 支持加载在线影像服务和离线影像切片
前端框架简介
在前端开发中，开发者通常需要选择合适的框架来组织大规模的代码、提供应用系统可维护性。当前，互联网前端领域 3 大主流框架的简单对比见表 2。
Angular 由谷歌团队研发，是三者中出现最早的。Angular 引入了 Java 相关内容，功能完善，代码复用率较高，但是它庞大的体系和陡峭的学习曲线使得开发者对其褒贬不一。React 起源于 Facebook 项目，它最初将组件化的观念融入前端。对于逻辑复杂的工程，可以对组件进行隔离，降低彼此间的耦合度，出现问题时方便开发人员对其进行修改。Vue 由我国开发者尤雨溪开发，是一套用于构建用户界面的渐进式前端 MVVM( Model View ViewModel) 框架，采用自底向上增量开发的设计，具有响应式数据绑定和组件式系统构建的特点。
组件式开发
1) 组件拆分。本系统被拆分成若干个组件。App．vue 是系统组件，通过 Vue－router 管理路由。Vue－router 是负责前端页面路由跳转的工具，它统一设置各个页面访问路径 URL，并且与页面中的组件做映射，制定特定的渲染规则，无需切换网页就可以刷新局部页面。Home．vue 是系统根组件，负责系统内容显示，底图组件( Map．vue) 用于实现底图模块中的三维场景和地图操作功能; 基础设置组件( basicSetting．vue) 中用于实现基础设置模块中所有的功能; 专题地图组件( thematicMap．vue) 实现专题地图模块中专题地图展示和卷帘对比功能。高程分析和坡度坡向分析功能被拆分为两个组件: altitudeAnalysis．vue 和 slopeAnalysis．Vue。
2) 组件通信。组件式系统开发降低了耦合性，但同时带来组件之间数据流动的问题。Vuex 是一个专门为Vue 应用程序开发的状态管理工具，它统一管理所有组件的状态，并且只能以特定的规则来改变，增强了整个项目的可控性。
3) 基于 iView 组件库的界面设计。视觉 UI( User Interface) 是系统直接面对用户的窗口，它直接影响着整个系统的美观程度。
标签：专题地图,2021.12,WebGIS,系统,三维,29,Cesium,Vue,组件 来源： https://www.cnblogs.com/codbish/p/15744454.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。