基于eCharts和iClient的 二维土壤重金属动态污染模拟绘制技术研究

王建　刘晓凤　任安晶　戴秀清　李灿

【摘 要】eCharts是一个使用JavaScript实现的开源可视化图表动态库，iClient是SuperMap提供的软件开发工具包，两者都具有易学易用和开发灵活等特点。该文针对java的SSM（spring、spring MVC、mybatis）框架下二维土壤重金属动态污染模拟绘制技术展开研究，并结合AJAX技术实现前后端交互，从而为不可见的污染模拟提供一种直观可视化的绘制技术手段。

【关键词】eCharts;iClient;可视化;AJAX;SSM

【中图分类号】TP311 【文献标识码】A 【文章编号】1674-0688（2020）08-0056-02

0 引言

随着社会经济的快速发展，人们的生活水平不断提高，对于各种自然资源的需求也在不断地加大。过去，人们获得自然资源多以破坏环境为代价，例如肆意开采矿产资源、乱砍滥伐植被、随意排放工业污水等，在严重破坏大自然土壤中生态平衡的同时，还导致了因土壤污染而引发的各种农产品食品安全问题，给社会造成了非常恶劣的影响。

回顾近年来我国重金属土壤污染事件，重金属污染大多呈现出隐蔽性、滞后性、积累性和難可逆性的特征，给人民的身体健康、生态环境及食品安全等带来了严重的威胁。所以，本文结合eCharts和iClient技术实现二维土壤重金属污染模拟绘制技术，从而将重金属污染的模拟过程以热力图等形式实现可视化，帮助政府或环保部门对重金属污染源所在位置的污染进行更加直观的了解，例如污染的重金属类型，每处位置重金属的污染程度等，进而能够采用更具有针对性的方法对土壤中的重金属污染进行治理。

目前，按照图层绘制技术的实现方式划分，可分为HTML控件、组件式控件、服务器控件三大类。使用较多的图层绘制技术多为组件试控件，如微软Office中提供的OWC图层绘制组件[1-2]。服务器控件是基于Web服务器中服务端实现的，如微软提供的Web Chart控件[3]、java中的JFreeChart[4]等。而随着HTML技术的发展，通过HTML中提供的原生Canvas API为基础，实现了多种开源的动态图层绘制技术，例如D3.js[5]、Highcharts[6]、GChart[7]和eChart[8]等。在此基础上，结合SuperMap iClient for JavaScript，实现了一种二维土壤重金属动态污染模拟绘制技术。

1 相关技术

1.1 eCharts图层控件

eCharts（Enterprise Charts）技术是一个依靠纯Jav-

aScript语言实现的图层控件库，其底层依赖H5技术中的Canvas类库，基于BSD开原协议，是一款非常优秀的可视化前端图层控件框架，并且兼容当前世界上大部分的主流浏览器。

eCharts图层控件库在提供常规的柱状图、饼状图图、玫瑰图、盒形图的同时，还提供用于地理空间数据和属性数据可视化的各种专题图地图，例如表面等值线图、热力图，还有用于表示空间关系数据的旭日图、多维空间数据中可视化平行坐标等，并且还支持图层与图层之间的混搭。

1.2 iClient图层控件

iClient是超图开发的面向程序开发组件，全称为SuperMap iClient for JavaScript，是一款包含轻量移动端SDK和浏览器端SDK的开发工具包。在JavaScript技术支撑上面，可以实现地图操作、动画浏览、数据可视化呈现等。在此基础上，该产品具有跨终端和跨浏览器能力、支持客户端无缝聚合GIS服务、客户端缓存加速访问效率、丰富的地图可视化技术、高效客户端绘制能力、无插件感受流畅地图体验及简单、易用的控件式开发方式。

2 基于eCharts和iClient绘制技术

eCharts和iClinet都是纯JavaScript实现的图标类相关技术，使用其进行数据可视化，可以生成用户所需要的各类图表样式，图表的引用及生成主要如下。

下载并配置eCharts和iClient for JavaScript的css及js文件路径，并将其引入html页面中，并创建DIV容器：

<！--引用需要的脚本-->

声明绘图技术中所需的相关变量Iserver_Map、Iserver_Layer、Iserver_Url

Iserver_Url = "http：//127.0.0.1/iserver/services/map-world/rest/maps/World"

接着在页面中创建出所需要的地图相关控件

function init（） {

Iserver_Map = new SuperMap.Map （"map"）;

//对分块动态REST图层进行创建，REST图层主要显示iserver 10i中发布的地图服务

Iserver_Layer = new SuperMap.Layer.TiledDynamicRESTLayer（"World"，Iserver_Url，null，{maxResolution："auto"}）;

Iserver_Layer.events.on（{"layerInitialized"：ad-

dLayer}）;}

function addLayer（）{

//将 Iserver_Layer 图层加载到 Iserver_Map 对象上

Iserver_Map.addLayer（Iserver_Layer）;

//出图，Iserver_map.setCenter 函数显示地图

Iserver_Map.setCenter（new SuperMap.LonLat（0，0），0）;}

在基于eCharts和iClient技術的动态图表绘制技术中，整个过程分为6步。

（1）引入eCharts及iClient中相关js、css文件。

（2）在H5页面中添加用于图层显示的DIV容器

（3）在JavaScript中对eCharts及iClient for JavaS-

cript实例进行初始化。

（4）通过Ajax异步请求技术从后端获取绘图所需数据。

（5）调用eCharts、iClient for JavaScript中相关方法对图层数据及其他相关的属性数据进行配置。

（6）将图表绘制的结果导入之前生成的DIV容器中。

3 应用实例

在以下二维污染扩散模型的基础上，以污染点为原点，循环遍历该点N x N的一个矩形，可得该点附近每一处中重金属污染浓度，若是在多点源覆盖的情况下，将其值进行叠加。

C=■e■+■e■

在计算出重金属污染浓度的基础上，结合eCharts和iClient，提供任意x，y处的污染浓度及其坐标，并结合iClient中与eCharts结合提供的热力图api接口，即可实现土壤重金属二维扩散可视化绘图技术。

4 结论

在各种污染不断加剧的时代，如何更加直观地对污染情况进行展示成为污染治理中至关重要难点之一。本文结合eCharts和iClient技术，实现了污染的可视化展示，在此基础上，能更加直观地展示污染的严重程度，为环保等部门在污染治理上提供一定的可视化数据支持;能节省环保等部门对数据进行整合的时间，并提高污染治理和防治相关事业单位和公司掌握数据的速度，有效地提高工作效率。

参 考 文 献

[1]金栋林.OWC图表组件及其在WEB环境中的开发应用[J].沈阳航空工业学院学报，2006，23（4）：58-59.

[2]杨剑勇.基于Chart控件的Web动态图表实现技术[J].电脑知识与技术，2013，32（9）：8321-8322.

[3]侯俣，刘万军.JFreeChart在JavaWeb项目中的应用[J].科学技术与工程，2008（8）：2699-2700.

[4]Michael Bostock，Vadim Ogievetsky，Jeffrey Heer. D3：Data-Driven Documents[C].IEEE Trans. Visualization & Comp.Graphics（Proc. InfoVis），2011.

[5]Highsoft公司.Highcharts简介[EB/OL].https：//www.hcharts.cn，2017-04-15.

[6]Google公司.GChart官方网站[EB/OL].http：//code.google.com/p/gchart，2017-04-15.

[7]唐金文.ADO.NET访问Web数据库的方法研究[J].曲阜师范学院学报，2004，23（6）：54-57.