集成ECharts和GIS地图服务的社会管理大数据可视化实现

1、引 言

近年来，“加强社会管理信息化建设，提高社会管理效能和服务质量”已经成为越来越多政法部门的工作要求。武汉市现有的社会管理与服务信息系统，经过对多个政务部门数据融合已经建成了数据海量、体积庞大的数据仓库。对人、地、事、物、情等社会管理要素进行多维度统计分析，以揭示人口、房屋对社会事件的影响和潜在规律，对于维护社会的稳定具有重要的意义[1]。ECharts作为一个开源的可视化统计图表库，其可视化成果不仅具有突出的视觉特征，而且具有表征数量关系的功能，因此将ECharts统计图表作为信息展示的载体，不但能够以友好、直观的方式进行信息展示，而且还能够突出展示需要关注的统计信息，便于分析和决策，十分契合社会管理信息化的要求[2]。然而，尽管ECharts具有很好的可视化效果，但其缺乏较强的空间表达能力，如空间查询、空间分析等。通过ArcGIS Server发布GIS地图服务，利用ArcGIS API for JavaScript对空间数据进行分析与表达，能够有效的解决这一问题。因此，在实际生产过程中，我们需要将Echarts与GIS地图服务相结合起来，对社会管理与服务信息系统中的海量数据进行清洗、重新组织进而用于协助政务管理及决策。如何解决二者的集成问题，正是本文所讨论的重点。

2、GIS地图服务与ECharts集成的关键技术

ECharts是一个开源的使用JavaScript进行开发的图表库，它是基于百度轻量级的矢量图形库ZRender 开发出来的。它除了提供了常规的折线图、柱状图、饼状图等用于制作专题图的图表外，还提供了可用于地理数据可视化的散点图、热力图、轨迹图等[3,4,6]。尽管ECharts提供了地图数据渲染的方法，但是它的地图数据是以js格式或者geojson格式的地图文件引用的，在实际生产过程中具有较大的局限性，对于实现空间查询、空间分析等功能的实现具有诸多限制。ArcGIS API for JavaScript是由ESRI提供的一组在Web应用程序中嵌入地图和任务的方法。它可用于构建轻量级的、高性能的、纯浏览器的GIS服务，同时为ArcGIS Server发布的地图服务提供了快捷高效的应用操作。它适配大部分的浏览器，支持HTML5和CSS，并且与jQuery等JavaScript框架具有良好的兼容性[5]。使用ArcGIS API for JavaScript，以ArcGIS Server发布的地图服务为底图，来实现ECharts地图数据的渲染，这便是GIS地图服务与ECharts集成的核心。

2.1 ECharts与Arcgis地图的坐标匹配

在ECharts中，geoCoord属性为标注点提供了重要的地理位置信息，它是决定了标注点能否在地图上成功渲染的关键参数，此属性中的地理位置坐标与地图的空间位置信息相匹配时，图表方能正确的渲染在地图上。ArcGIS Server发布的地图服务为我们提供了空间单元的坐标数据，如何将该坐标与ECharts标注点的位置相匹配是我们需要解决的主要问题。geoCoord的数据格式如图2.1所示。

 

图2.1 geoCoord的数据格式

ECharts中内置了在geoCoord和data中读取数据并将其转化为标注点屏幕坐标的方法，因此当给标注点注入名称和地理信息后，它们能够在地图上顺利显示。在此基础上，本文使用ECharts3Layer插件完成了Arcgis地图地理坐标与屏幕坐标之间的转换，Echarts3layer是在Arcgis的基类Layer上拓展出来的，其主要思路是首先初始化ECharts表格和DOM容器，然后将Echarts3layer添加到Arcgis map中，此后遍历Option中的配置项和数据，利用Arcgis内置的toScreen方法直接将geoCoord中的标注点坐标转化为图表渲染所需要的屏幕点坐标，并赋予标注点的X，Y值，以此解决坐标匹配问题。其主要函数如下：

//坐标转换函数

o.geoCoord2Pixel = function (e) {

var t = new n(e[0], e[1]),

i = o._map.toScreen(t);

return [i.x, i.y]

},

o.pixel2GeoCoord = function (e) {

var t = o._map.toMap(new i(e[0], e[1]));

return [t.lng, t.lat]

}

2.2 ECharts图表的重绘

除了要解决坐标的匹配问题之外，我们还需要注意到由于地图的平移，缩放等操作，ECharts图表将会进行刷新重绘，因此我们仍需要对地图事件绑定函数来控制ECharts图表的绘制。其方法主要包括重新设置参数或者只对标注点的X，Y进行重新转换。在ECharts3Layer中用到的函数方法示例如下：

//地图事件绑定函数

o._bindEvent = function (){

o._ec.getZr().on("mousewheel", function (e) {

o._lastMousePos = o._map.toMap(new i(e.event.x, e.event.y));

var t = e.wheelDelta,

n = o._map,

a = n.getZoom();

t = t > 0 ? Math.ceil(t) : Math.floor(t), t = Math.max(Math.min(t, 4), -4), t = Math.max(n.getMinZoom(), Math.min(n.getMaxZoom(), a + t)) - a, o._delta = 0, o._startTime = null, t && n.setZoom(a + t)})

}

3、社会管理大数据统计分析可视化的实现

本文以武汉市社会管理大数据分析可视化的实现为例，介绍了GIS地图服务集成ECharts在实际生产中的应用。

3.1 统计分析可视化设计

武汉市社会管理数据处理及统计分析可视化的总体设计框架如下图3.1所示，从底层的基础支撑到顶层的实现终端依次包括基础数据库、经过数据预处理后用于可视化的数据仓库、支持基于Chorme浏览器的数据可视化应用系统、以及用于终端计算机显示的终端系统。

 

图3.1 统计分析可视化总体设计框架

 

本文提到的可视化方法是基于浏览器实现的，其主要流程是通过Chorme浏览器加载ArcGIS Server发布的地图服务，同时使用Ajax技术进行数据异步加载，浏览器向服务端发出统计数据请求，服务端经过处理返回JSON格式编码的统计结果，以此来实现ECharts图表的更新[10]。其可视化流程图如图示3.2所示

3.2  数据准备及预处理

武汉市现有的社会管理与服务系统以数字武汉地理空间框架为基础，通过融合叠加卫计委、人社局、公安、房管、计生、民政、卫生等部门已有的数据，按照统一的数据标准，对相关的信息资源进行整合，已建成了一个数据种类全面、数据规模庞大的数据中心。但由于数据体量大，数据库结构复杂，在对其进行可视化实现的工作之前我们需对数据进行清洗以及预

处理。

图3.2 统计分析可视化流程图

对数据的预处理的工作主要是指从基础数据库中检索、筛选出可用于开展可视化工作的感兴趣的人、事、物等指标数据。本文涉及到的数据库中，数据以网格、社区、街道、行政区等不同的空间尺度为单元进行组织，针对人口组成与分布、社会管理事件和社会经济地理要素三种不同的兴趣指标，分别做了如下的准备：

1）人口组成与分布的统计数据清洗

以不同的空间尺度为研究单元，根据人口户籍数据库数据表之间的连接关系，提取人口总数、常住人口数、流动人口数、农业人口数、非农业人口数以及各年龄段人口数等信息；根据特殊人群和重点人群数据库、人口户籍数据库、个人就业状态库、劳动就业管理库、居民医保个人资料库、武汉职工社会保险缴费库表之间的关联关系，提取各类人群的年龄、性别、学历、婚姻状况，收入层次等信息，将抽取后的信息与不同尺度的空间单元进行空间关联。最终得到不同空间尺度下人口组成、特殊与重点人员的分布数据。

2）社会管理事件统计数据清洗

以不同空间尺度为研究单元，根据矛盾事件数据库中的数据表，抽取不同时间单元（年，季度，月，周）下各类社会管理事件的数量，并与对应的空间划分单元进行关联。针对某一类特定的社会管理事件，基于矛盾事件数据库，以网格为空间划分单元抽取不同时间单元下此类社会管理事件数量，结合相关人口信息以及空间属性，以便于社会管理事件可视化的实现与分析。

3）社会经济地理要素数据清洗

以不同空间尺度为研究单元，统计空间单元内的学校、商品房、商铺、公园等地理要素的数量。将地理要素统计后的信息与空间单元进行关联，以方便其空间分布可视化工作的开展。

本文中用于可视化实现的网络架构为B/S模式，数据库通过使用SQL语句来进行运算与控制，使用Jetty作为Web的运行容器，使用Spring搭建后台架构[6]。生产过程中所涉及到的所有数据处理均由Python编程实现，用到的主要Python模块为cx_Oracle，在进行数据预处理时，首先将数据从源Oracle数据库中抽取出来，经过计算、清洗后，存入中间数据库。此后，可根据前端的可视化需求，在服务端编写特定的接口来读取Oracle数据仓库中的统计数据，再将它们以JSON格式的编码返回，供前端调用以实现可视化。

3.3 统计分析可视化的实现

统计分析可视化的实现的主要步骤可分为一下三步：

1）配置html文件，引用Javasript库的相关文件。在html文件中建立DOM元素，将echarts、Arcgis API以及Echarts3Layer等JavaScript文件使用<script>标签引用，在文件引用时需注意文件的配置顺序与路径[8]。

2）初始化Arcgis地图以及ECharts图表，采用Ajax技术异步加载数据，获取统计数据的信息[9]。基于Arcgis内置的方法新建地图容器，并注入地图服务，同时在地图加载阶段，响应Echarts3Layer的方法初始化ECharts图表。其具体函数如下：

//初始化地图

map = new Map("map", {

//option配置项

}); 

var wmtslayer //引用Arcgis Server地图服务

map.addLayer(wmtslayer);//注入底图

//在地图加载时初始化ECharts图表

map.on('load', function () {

var overlay = new Echarts3Layer(map, echarts);

var chartsContainer = overlay.getEchartsContainer();

var myChart = overlay.initECharts(chartsContainer);

overlay.setOption(getECoption());

});

//Ajax获取JSON格式编码的统计数据 

$.ajax({

 dataType: 'json',

 async:false,

 method: 'GET',

 url: url,

 success: function (datajson) {

    if(datajson.status==0){

      datajson=datajson.result; 

      }

 }

}); 

值得注意的是，在初始化ECharts图表时，使用Echart3Layer新建了overlay，它是在进行图表与地图叠加时直接在地图容器上新添加的一个容器，ECharts图表的初始化以及显示就是该新建容器中进行的。

3）使用ECharts可视化插件将数据信息转化为图表渲染在地图上，实现直观的可视化效果[11]。此步骤即为将JSON数据解析，用于配置Option项，实现图表的自定义个性化显示。

在配置Option时需要注意数据的映射关系，其中geo配置项控制了Arcgis Server发布的底图显示，series配置项中包含了图表渲染的类型以及Data的注入。

最终武汉市统计分布可视化的效果如图3.3所示。图示3.3是将武汉市各类帮扶人员在GIS地图上以散点图的形式进行可视化展示，两侧数据仪表盘为使用Echarts制作的统计图表，Search工具条实现了空间搜索的功能。

 

4、结语

本文以武汉市社会管理与服务信息系统的数据库作为数据基础，基于武汉市社会服务与信息管理大数据统计分析可视化的实现介绍了一种集成GIS地图服务和ECharts的方法。随着社会管理信息化的不断深化，使用更加高性能、高效率的组件来实现大数据可视化的要求日益增强，将ECharts丰富的图表库与GIS地图服务相关的空间分析功能相结合，能够优势互补，很大程度上降低开发成本，增强数据使用的灵活性，获得良好的用户体验和更加直观的可视化效果，在实际生产中具有重要的价值。

 

图3.3 武汉市帮扶人员统计分析可视化

 

参 考 文 献

[1] 李冰. 社会管理创新中县政府的角色定位研究[D]. 武汉:湖北工业大学

[2] 张惜杰，李平，张志强，马炅妤，唐涛.基于ECharts 与ArcGIS JavaScript API的Web专题制图研究[J]. 测绘卷2017(12):270-273

[3] 周敏，王红春，高金萍，陈钊.基于ArcGIS API for JavaScript的森林抚育成效监测专题图研究[J]. 测绘与空间地理信息. 2018(01):26-29.

[4] 冯娟，张雅丽，梁栋栋. 基于Echarts的居民出游时空可视化研究——以芜湖市为例[J]. 电脑知识与技术. 2017(31):215-218.

[5] 冀潇，李杨. 采用ECharts可视化技术实现的数据体系监控系统[J]. 计算机系统应用. 2017(6):72-76

[6] 黄宇栋. 百度Echarts在数据可视化分析中的应用[J]. 金融科技时代. 2018(6):43-45

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

[8] 刘华星，杨庚. HTML5——下一代 Web 开发标准研究[J].计算机技术与发展，2011(8):54-58

[9] 郑幸源,洪亲,蔡坚勇等. 基于AJAX异步传输技术与Echarts3技术的动态数据绘图实现[J]. 软件导刊,2017,16(3):143-145

[10] 雷莹. 基于 Web 的可视化数据挖掘分析平台及可视化度量模型的研究与实现[D].北京:北京交通大学,2014. 

[11] 畅玉洁. 大数据背景下web数据的可视化研究分析[J]. 信息系统工程，2018(1):148

作者简介

第一作者简介：刘洪良(1996 - )，男，河南周口人，武汉大学测绘学院测绘工程专业硕士研究生，主要研究方向为地理信息系统。

About the first author

LIU Hong Liang(1996 - ), male, come from Zhoukou of Henan Province ,Master of Surveying and Mapping Engineering, School of Geodesy and Geomatics, Wuhan University, studies mainly in GIS.