1．目的及意义

本毕业设计所选课题名称为基于高德离线地图的网页地理信息可视化系统。随着物联网技术的发展以及移动设备、传感器设备的不断普及，如今获取地理空间数据的手段越来越多，现在己经处于地理大数据时代。数据可视化能以图表方式展现数据，帮助用户以直观有效的方式进行数据分析，目前在地理空间数据可视化方面己有很多研宄。 1.1 研究目的 当前 GIS 在以服务为主要特征的空间信息共享时代承担着重要的角色。在大数据的时代背景下，电子地图已经展现出极大的应用潜力，但是由于部分行业数据涉密性，需要对实际地理位置进行偏移[1]。针对该实际问题，将主流网络电子地图服务免费对外开放的应用程序接口 API 和部分基础地图数据迁移到本地，并通过坐标系转换算法进行地理位置纠偏，实现离线的电子地图本地化应用。进一步基于主流 GIS软件开发地图切片程序，研究有效的数据组织策略，建立地图瓦片数据库，存储地图数据，为离线电子地图应用提供地图数据服务，优化和改善地图可视化和人机交互界面，最终解决了基于离线电子地图的数据可视化问题。 1.2 国内外研究现状 随着Web2.0时代的到来，基于浏览器端的数据可视化需求日益增长，再加上各大浏览器厂商对HTML5标准规范的认可和越来越多的支持，使用绘图技术在浏览器端实现数据可视化逐渐流行起来。下面将详细介绍国内外支持在浏览器端进行数据可视化的类库。 国外比较著名的类库有HighCharts和D3。HighCharts[2]是一个支持绝大部分图表类型的可视化类库，其地图模块HighMaps是一款基于HTML5的优秀地图组件，用它可以方便快捷的创建用于展现销售、选举结果等其他与地理位置关系密切的交互性地图图表。D3[3]是基于数据驱动的可视化图表类库，使用HTML、CSS和SVG技术实现数据可视化，它将强大的可视化、动态交互和数据驱动的DOM操作方法完美结合，可以充分发挥现代浏览器的功能，其使用方法是根据数据源的特征自由的设计正确的可视化图表。左尧等人[4]利用D3将常用地理空间数据格式，进行了数据的一系列绑定、投影设置以及转换、路径设置和地图绘制后，快速、高效地实现了地理空间数据可视化。使用该方法生成的电子地图不仅具备无限伸缩、可交互等特点，而且支持Chrome、Firefox和IE等主流浏览器，为地理空间数据可视化提供了新的思路。 国内比较著名的有Echarts。Echarts[5]是一个纯Javascript的图表库，它不仅提供了常规的图表类型，还提供了用于地理空间数据可视化的地图、热力图和线图，底层依赖轻量级的Canvas类库ZRender，提供直观、生动、可交互、可高度个性化定制的数据可视化图表。李翠[6]对Web前端地理数据可视化技术进行了研宄与实践，分析了Echarts实例化图表的流程，并以地图模块为例从其初始化配置、地图实例化、地图数据的获取与处理、图形数据的构建、动态效果和交互效果的实现等方面分析了基于地图的地理空间数据可视化的具体实现过程。 随着地理大数据时代的到来，海量地理空间数据需要采用数据可视化技术进行处理，从而得到数据分析的目的。地理空间数据可视化能够利用散点图、折线图、柱状图和曲线图等形象直观的图形图表从展示层对大数据进行表达，以帮助用户用直观有效的方式从海量数据中探索出各种复杂关系[7-8]。用更生动更友好的方式呈现隐藏在瞬息万变海量庞杂的数据背后的业务洞察，在零售、物流、电力、环保和交通领域通过交互式数据可视化来帮助人们发现、诊断业务问题，越来越称为地理大数据解决方案中不可或缺的一环。 严丙辉[9]实现了结合地理信息的三维数值大气数据可视化平台，提供了全球尺度的大气信息的直观呈现，支持气象数据的常规处理操作，并且用户可以通过选择全局或局部数据来进行交互操作和探索式分析。 段颖超[10]通过Hadoop大数据存储和处理技术，将出租车数据、公交车数据和地铁数据等地理空间数据经过数据预处理后进行存储建立起了数据仓库，并应用数据挖掘可视化技术对交通大数据进行可视化，设计并实现了交通数据可视化系统，为交通大数据的可视化分析方法的研究提供了参考。 仝春艳[11]设计实现了四川统计地理信息系统。课题以软件的设计流程和规范为依据，从整体架构、应用支撑层、数据库设计和子系统的功能设计这四个方面，介绍了四川统计地理信息平台的设计与实现的过程，实现了通用模块之间可以复用的、集成多类统计数据资源的、可扩展可定制的通用统计地理信息平台。 张健[12]把地理信息数据可视化运用到农业生产中，利用前端显示技术和后台GIS构件技术，实现茶园环境信息的可视化监控、田间农情的可视化管理、农事数据可视化掌握，使得GIS可视化和农业信息相结合，完成可视化效果。 目前，国内对地图信息可视化的设计仍停留在传统静态页面展示，起步较晚，未能在该板块设计与研究领域，作出视觉特征和新技术的实际应用，缺乏人机交互和用户体验度，采用相似的设计符号和表现手法，缺乏对信息界面的整体设计和艺术性表现的考量，生成的数据图形能达到炫丽的视觉效果，但视觉表现形式仍过于单一，达到了数据图形化表达的目的，却难以打动用户有更深层次的体验，由于缺乏与受众之间的交流性与互动性，因而无法满足当下人性化、情感化的设计趋势。 1.3 研究意义 分析地理信息可视化技术的发展变化以及趋势，可以看出地理信息可视化不断发展的方向为以下几点：(1)实现不同地区或部门之间的数据共享，避免资源浪费；(2)提高浏览页面的动态可视化能力，加强图形信息，特别是三维模型表达真实度与准确度；(3)优化网络数据传输效率，不仅要从硬件设备方面着手，还要保证传输数据的有效性。(4)加强地理信息系统的跨平台性，实现一个系统多个平台共同兼容的局面[13]。根据这些发展趋势，本设计利用 HTML5 和高德API等技术为基础设计和开发的平台具有更加广泛的使用范围和更加快速的开发效率，并且可以在全内网环境下运行，保证了数据的安全性。 本设计能有效解决部分实际难题，总结为以下几点：1.后台数据流可实时显示，有效解决信息的时效性问题。2.带有交互性质的网页设计具有信息分层的特点，可将大容量的信息分层，达到信息渐近展开的效果，避免每个页面内容超负荷或难以展示全面的信息内容。信息分层的另一优势为提升信息获取的效率，用户能根据自己的需求更有针对性地获取信息。3.在视觉呈现上，可不局限于静态元素表现，可通过一定的图形动态效果来丰富画面呈现，提升视觉观赏性，丰富展示风格与元素符号。这些优点能有效解决传统地图的局限性问题，具有实际应用价值与意义[14]。

{title}

2. 研究的基本内容与方案

{title} 本毕业设计通过学习和掌握地理信息可视化、HTML5.0动态网页设计、高德地图API等技术，利用长江航运交通大数据平台，以长江航运交通实际应用为背景，最终实现一个适用于全内网环境的、基于高德离线地图的网页地理信息可视化系统。

2.1 基本内容与研究目标

阐述地理信息可视化、动态网页设计、大数据、数据库、高德地图API的基本原理和方法，论述选题的国内外发展现况和研究意义，充分查阅国内外的相关研究成果，分析和研究现有同类系统的工作原理、特点和所存在的问题；在此基础上，针对长江航运交通大数据系统的应用需求，基于JavaScript等语言，开发一个适用于全内网环境的、基于高德离线地图的网页地理信息可视化系统。

2.2 拟采用的技术方案及措施

根据任务书本设计实现的功能总体上分为五个部分：1. 完成长江流域地图各级地图瓦片的抓取工作和离线高德地图API修改工作，支持纯内网环境下的高德离线地图多级可视化缩放展示；2. 基于JavaScript等语言，选择合适流式开发框架，实现后台海量数据流的实时展示；3. 支持前端船舶等交通航运单元数据的单击详情展示功能；4. 支持前端船舶等交通航运单元数据的动态缩略信息展示功能；5. 支持线图、柱状图、热力图、散点图、动态路径图等多种可视化方式展示地理信息。下面分别介绍每个功能的实现方案。

地图瓦片数据一般采用金字塔结构对不同分辨率（比例尺）的数据进行组织，由于数据坐标系统和地图用途的不同，采用的投影和瓦片切割算法也可能不同。特定级别的地图范围可以确定每块瓦片的地理跨度和实际分辨率，进而计算出该瓦片在地图图层中的相对位置，即行列号。确定地图等级，行列号便对应于网络地图中的一块瓦片。本设计通过网络爬虫来获取网络地图瓦片，主要因为这些网络地图服务提供了获得每一块瓦片的接口，通常每一块瓦片均由独立的 URL 地址唯一确定，可以通过 Request 请求获取指定位置和级别的地图瓦片。以Google Map影像为例，用户 request 请求以下 URL http://mt0.google.cn/maps/vt?lyrs=s@699amp;hl= zh-CNamp;gl=CNamp;amp;x=1amp;y=0amp;z=1，可以获得1张瓦片，其中的主要参数x、y、z分别表示瓦片的行号、列号和级别^[15]。本设计中通过通过相同的原理，对离线状态下CGCS2000坐标转换为GCJ－02坐标的算法进行整理，对地理坐标值进行纠偏处理，以获得坐标所在瓦片的行号、列号和级别，解决了离线状态下真实CGCS2000坐标在离线地图上显示偏移的问题，再利用 Python 爬虫程序获取高德地图长江流域各级瓦片地图数据。在浏览器开发者模式加载百度地图过程中查看加载的网络资源，将Http 请求返回的依赖模块API文件、图标素材获取至本地，主要包括基础API JavaScript文 件apiv1．3．min．js，基础css样式文件 bmap． css，基本图标素材 images 以及 map、oppc、tile、control 等基础 mod-ules 文件。将地图程序引用的网络 API JavaScript 地址修改为本地文件路径，完成API的修改工作。地图实际工作中通过调用地图瓦片来工作，地图每次展示的都是一个等级的地图瓦片，在交互界面设计缩放按键，通过JavaScript语言调用显示不同等级的地图瓦片，即可完成地图的缩放功能。

由于工作状态是离线的，所以本设计中还需要使用一个数据库，用来存放和调用前端船舶等交通航运单元的具体数据信息，后台数据流的实时显示则需要把数据库中的每一条数据依次显示在交互页面中。这里有两种方案完成实时数据流的显示：（1）轮询是最早的一种实现实时 Web 应用的方案，客户端以一定的时间间隔向服务端发出请求，以频繁请求的方式来保持客户端和服务器端的同步，这种同步方案的最大问题是，当客户端以固定频率向服务器发起请求的时候，服务器端的数据可能并没有更新，这样会带来很多无谓的网络传输，所以这是一种非常低效的实时方案。（2）流技术方案通常就是在客户端的页面使用一个隐藏的窗口向服务端发出一个长连接的请求，服务器端接到这个请求后作出回应并不断更新连接状态以保证客户端和服务器端的连接不过期，通过这种机制可以将服务器端的信息源源不断地推向客户端，这种方式在每次客户端和服务器端交互的时候都进行一次 HTTP 的请求和应答的过程，并且每一次的 HTTP 请求和应答都带有完整的 HTTP 头信息。本设计中选择采用流技术这种方式，通过向本地服务器发送长连接的请求，来连续不断地获取数据库的海量数据。

后面三项任务均属于交互型功能的实现。前端船舶等交通航运单元数据的单击详情展示功能可以通过超链接的方式来完成。使用HTML语言中的a标签给每一个单元设计一个超链接，单击船舶单元则首先发送HTTP 请求获取这一单元的具体数据，然后跳转到超链接的显示界面，将具体数据填写在显示界面，即可完成这一功能。前端船舶等交通航运单元数据的动态缩略信息展示功能与详情展示功能类似，使用一个隐藏的窗口向服务端发送请求来获得船舶单元的所有数据，选取其中较为重要的部分信息，放在每一单元的title属性中，鼠标移到每一单元即可显示缩略信息。多种可视化方式展示地理信息的功能通过借用高德API给出的开源代码完成。高德地图API给出了热力图、散点图等可视化方式的实现函数及实现代码，只需要修改代码地址，导入数据库信息等，即可完成对数据的分析并生成对应图片。

3. 参考文献
[1] 郭啟倩,郑蕊,刘珠妹,等. 地震行业网的电子地图本地化应用研究[J]. 计算机技术与发展, 2018, 28(11):198-202.

[2] 田坤瑞，张志华．基于Highcharts与天地图的动态网络统计专题图研宄[J]．测绘与空间地理信息，2016,39(10):84-86,90．

[3] 杨锐、刘夏、王超,等．D3.js数据可视化实践手册[M]．北京：人民邮电出版，2014:3-8．

[4] 左尧，王少华，蔡文文,等．基于D3的空间数据可视化设计与实现[J]．测绘与空间地理信息，2016, 39(12):80-82．

[5] 王子毅，张春海．基于ECharts的数据可视化分析组件设计实现[J]．微型机与应用，2016,35(14)：46-48,51.

[6] 李翠．Web前端地理数据可视化技术研究与实践[D]．华东师范大学，2016．

[7] Julie Steele，Noah Iliinsky. Beautiful Visualization [M]. Sebastopol:O’Reilly Media，2017,9:6-10.

[8] Ramakrishnan N, Kumar R. Big Data [J]. Computer, 2016, 49(4):20-22.

[9] 严丙辉．结合地理信息的气象数据可视化平台设计与实现[D]．浙江大学，2013．

[10] 段颖超．城市交通大数据的地图可视化研宄[D]．北京建筑大学，2016．

[11] 仝春艳．四川统计地理信息系统的设计与实现[D]．河北师范大学，2010．

[12] 张健．基于WebGIS的农业地理数据可视化技术研宄及应用[D]．浙江大学，2015．

[13] Lu M, Lai C, Ye T, et al. Visual Analysis of Multiple Route Choices Based on General GPS Trajectories[J]. IEEE Transactions on Big Data, 2017, 3(2):234-247.

[14] 郭楚燕. 专题地图信息可视化在网页应用中的方法研究[D]. 西南交通大学, 2018.

[15] 周海,谢雨芮,葛平,等. 局域网条件下的瓦片地图应用研究[J]. 地理空间信息, 2017, 15(12): 18-21.