美丽乡村专题统计数据的可视化及其地图渲染

李 蝶 李功权 马云龙 戴璐鸾 殷浤益 杨元维

（长江大学 武汉 430100）

1 引言

随着我国美丽乡村［1］建设的推进，产生了一系列的数据，统计图表作为一种重要的信息表达方式，凭借其简单直观、通俗易懂的特点深受各行各业的青睐，图表不仅有突出的视觉和空间特征，而且有表征数量关系的图表构成成分，因此专题地图中大量使用统计图表来表达专题现象特征，结合GIS数据特有的地理位置信息，将其展示在地图上更加的直观，方便游客了解美丽乡村的信息［2］。

传统的统计图表交互性不强，对地理数据的可视化程度低下，ECharts提供了丰富的交互功能，但是对地理数据的可视化表达较弱，本文结合Echarts和ArcGIS API for JavaScrip进行专题数据的表达及制作专题地图，实现对美丽乡村专题信息的展示［3～4］，以此辅助游客制定旅游计划，帮助政府部门决策。

2 关键技术

本文主要利用ArcGIS Server发布的REST风格的 Web服务［5～6］为前端提供JSON对象形式的专题数据，前端页面利用ArcGIS API for JavaScript实现了美丽乡村旅游要素数据的统计图以及统计数据的基于空间位置的可视化，本文所引用的3项关键技术如下所述。

2.1 ArcGIS Server简介

ArcGIS Server是基于Web的企业级GIS解决方案，为创建和管理基于服务器的GIS应用提供了一个高效的框架平台［7］。ArcGIS Server不仅能进行空间分析和处理，而且提供空间信息的互联，促进信息共享。本文利用ArcGIS Server将美丽乡村的各类专题数据发布到服务器端，客户端仅需通过唯一的专题服务URL（Uniform Resoure Locator，统一资源定位器）请求发送到服务器，服务器接受并处理后响应到客户端［8］。

2.2 ArcGIS API for JavaScript简介

ArcGIS API for JavaScript是基于 JavaScript技术和Dojo框架实现的调用ArcGIS Server REST API接口的一组脚本语言［9～10］。其是基于服务、简单易学的语言基础、多种多样的开发方式，为Web GIS的开发提供轻量级的解决方案，能够实现快速高效的创建交互式地图应用程序，且同时调用多个Arc⁃GIS Server的空间地理数据服务，能添加丰富的基于事件机制驱动的交互功能。其继承了JavaScript脚本语言的优点在于能减轻了服务器的负担，使得系统响应更快、交互性更好，为用户提供更流畅美观的浏览效果，大大提高了用户体验［11～12］。

2.3 JSON数据交互语言

JSON（JavaScript Object Notation，JS对象标记）是一种轻量级的数据交换格式，采用完全独立于编程语言的文本格式来存储和表示数据［13］。任何数据支持的类型都能转化成JSON表达。简单的语法格式和清晰的层次结构使得JSON成为理想的数据交换语言，与XML（Extensible Markup Language，可扩展标记语言）相比，JSON更简洁且易阅读，同时也易于解析和生成，可以极大节约传输数据所占用的带宽从而有效地提升网络传输效率［14～15］。几乎所有的前端JavaScript框架都支持JSON对象解析，这为使用JQuery和Echarts等开发框架奠定了基础。

3 美丽乡村数据统计图及其可视化的设计与实现

在后台服务设计中采用ArcGIS Server发布美丽乡村专题服务，步骤是将JSON格式的美丽乡村服务信息回传至前端页面中，利用丰富的前端页面框架进行动态交互展示。以下将从后台服务设计与前端页面设计两个部分介绍美丽乡村数据统计图及其可视化设计。

3.1 后台服务设计

以ArcGIS Server处理美丽乡村专题服务的发布、管理及应用。Feature Service（要素服务）是Arc⁃GIS Server提供的地图服务之一，本文综合考虑美丽乡村实际应用，发布了4个专题服务，包括行政村、景点、农家乐、特产。

页面获取服务器端数据的具体方式：利用Arc⁃GIS REST API调用已发布的专题服务，通过构建URL请求发送到服务器，服务器接受并处理后异步执行查询操作后得到结果数据集，最后以JSON对象形式传递至客户端。

3.2 前端页面设计

本文统计分析页面布局及样式采用了最新的HTML5和CSS3，同时利用Dojo与JQuery相结合的方式实现页面动态效果，采用纯Javascript开源库Echarts展示后台返回的结果数据集。而且采用JQuery插件实现调用JSON格式数据转换为表格数据。此外，本文统计分析所用底图为天地图，采用ArcGIS API for JavaScript扩展美丽乡村专题信息以直方图专题图的形式实现基于空间位置统计信息的可视化。

3.2.1 统计图设计与展示

为方便用户对统计图样式的任意切换，以便于对安吉县各镇进行了解，辅助用户按照个人喜好做出决策。本文页面采用多个选项卡来分别表示行政村、景点、农家乐、特产的专题内容。

图1 统计图设计流程图

Echarts是纯Javascript的图表库，兼容当前绝大部分浏览器，底层依赖轻量级的Canvas类库ZRender，能够提供直观、生动、可交互、可个性化定制的数据可视化图表［16］。在应用Echarts图表库时，首先通过echarts.init（）初始化Echarts实例并放置在div容器中；然后采用JQuery提供的获取JSON文件的语句$getjson（）异步加载数据；最后通过setOption（）方法配置框架并装填数据后动态生成各种各样的统计图，如图1所示。

其统计结果如图2所示，图2（a）为统计主窗口分为乡镇、景点、农家乐、特产四个部分，点击相应的部分会出现图2（b）、（c）、（d）、（e）所示统计图（条形图、玫瑰图、折线图、环形图），且当鼠标悬停红色方框标记的图标上时，可以选择切换统计图的样式。条形图和折线图体现了数据数量的大小和走势；而玫瑰图和环形图是饼状图的升级版，增强了分析数据占比的大小，使用户感受更直观。在文字标记或图形上鼠标悬停均会出现气泡窗口显示具体数量，并且悬停的对象会高亮放大，实现用户交互。

图2 统计图结果展示

3.2.2 统计表设计与展示

本文不仅提供了形象直观的统计图，还提供信息详细的统计表。在图2（a）显示面板上有一个JSON数据转成表格的功能按钮，为用户提供多种查看方式。利用JQuery将JSON对象动态构建Html Table表格（table）框架，通过判断统计数据的最大行数来创建行（row），根据行（rowTag）后是否还紧跟数据来动态添加单元格。例如，点击图3中灰色方框内的图标，实现JSON数据转换成表格，将乡村旅游要素统计数据统计图与统计表的一体化展示，实现同源数据多方式对比查看，辅助用户做出决策。

图3 JSON数据转换成表格数据

3.2.3 可视化交互实现

除了统计图和统计表，本文不仅提供丰富的统计图表展示功能，而且提供基于空间位置的美丽乡村统计直方图专题地图化，实现了统计数据基于空间位置的可视化以及分布情况。具体步骤：先调用后台服务获取到要素对象的地理坐标，然后在该类型统计对象对应区域创建一个直方图，使用户可以直观地对比直方图分析该专题对应特性。由于ArcGIS API for JavaScript并未提供对应的类来实现基于空间位置可视化［17～18］，因此本文采用 DojoX Charting框架提供的图表来实现，将直方图放置在一个自定义的信息窗口中，指定该窗口的位置来为各要素创建直方图，并响应用户地图操作，包括漫游、放大、缩小等。

实现流程共分为三个步骤，具体如图4所示：1）调用天地图作为底图，使用ArcGIS Server发布的REST风格的要素图层（FeaturLayer）服务，同样以JSON格式返回，获取到各村镇的地理坐标后扩展ArcGIS API中infowindow实现创建直方图窗口；2）在窗口里面动态创建div容器，以该统计数据中的最大值为纵轴最大值，在容器中绘制直方图，依照数值大小来控制直方图的高度；3）进行统计直方图的地图绘制与渲染，实现对应统计区域内美丽乡村信息的可视化；4）设置鼠标悬停鼠标响应事件，其相应函数主要处理包括将对应悬停选中的直方图高亮，并弹出显示具体数值的气泡窗口，使本文统计分析增强了交互性和灵活性。

图4 可视化实现流程图

如图3所示，当点击图中的黑色方框内图标时，当前面板自动收起，在地图上动态生成每个乡镇当前类别的直方图，如图5（a）所示；当鼠标悬停在直方图上时，即会弹出图5（b）所示气泡窗口“孝丰镇：15”。

图5 效果展示

4 结语

美丽乡村的建设与乡村旅游相互促进，在整合与开发乡村旅游资源的同时将数据信息化。本文提出了将乡村旅游要素数据以统计图表展示及其地图可视化，利用ArcGIS API for JavaScript在前端页面实现了对乡村旅游要素统计数据的动态渲染，并结合Echarts图表框架动态生成统计图表。本文不仅实现美丽乡村专题信息的统计，而且实现统计信息与地理位置的交互。本文实现对美丽乡村专题统计不但能为乡村游客提供丰富的相关专题统计信息，便于其制定旅游方案，而且能辅助美丽乡村管理者提升决策管理水平。