基于eCharts和iClient的 二維土壤重金屬動(dòng)態(tài)污染模擬繪制技術(shù)研究

王建　劉曉鳳　任安晶　戴秀清　李燦

【摘 要】eCharts是一個(gè)使用JavaScript實(shí)現(xiàn)的開(kāi)源可視化圖表動(dòng)態(tài)庫(kù)，iClient是SuperMap提供的軟件開(kāi)發(fā)工具包，兩者都具有易學(xué)易用和開(kāi)發(fā)靈活等特點(diǎn)。該文針對(duì)java的SSM（spring、spring MVC、mybatis）框架下二維土壤重金屬動(dòng)態(tài)污染模擬繪制技術(shù)展開(kāi)研究，并結(jié)合AJAX技術(shù)實(shí)現(xiàn)前后端交互，從而為不可見(jiàn)的污染模擬提供一種直觀可視化的繪制技術(shù)手段。

【關(guān)鍵詞】eCharts;iClient;可視化;AJAX;SSM

【中圖分類(lèi)號(hào)】TP311 【文獻(xiàn)標(biāo)識(shí)碼】A 【文章編號(hào)】1674-0688（2020）08-0056-02

0 引言

隨著社會(huì)經(jīng)濟(jì)的快速發(fā)展，人們的生活水平不斷提高，對(duì)于各種自然資源的需求也在不斷地加大。過(guò)去，人們獲得自然資源多以破壞環(huán)境為代價(jià)，例如肆意開(kāi)采礦產(chǎn)資源、亂砍濫伐植被、隨意排放工業(yè)污水等，在嚴(yán)重破壞大自然土壤中生態(tài)平衡的同時(shí)，還導(dǎo)致了因土壤污染而引發(fā)的各種農(nóng)產(chǎn)品食品安全問(wèn)題，給社會(huì)造成了非常惡劣的影響。

回顧近年來(lái)我國(guó)重金屬土壤污染事件，重金屬污染大多呈現(xiàn)出隱蔽性、滯后性、積累性和難可逆性的特征，給人民的身體健康、生態(tài)環(huán)境及食品安全等帶來(lái)了嚴(yán)重的威脅。所以，本文結(jié)合eCharts和iClient技術(shù)實(shí)現(xiàn)二維土壤重金屬污染模擬繪制技術(shù)，從而將重金屬污染的模擬過(guò)程以熱力圖等形式實(shí)現(xiàn)可視化，幫助政府或環(huán)保部門(mén)對(duì)重金屬污染源所在位置的污染進(jìn)行更加直觀的了解，例如污染的重金屬類(lèi)型，每處位置重金屬的污染程度等，進(jìn)而能夠采用更具有針對(duì)性的方法對(duì)土壤中的重金屬污染進(jìn)行治理。

目前，按照?qǐng)D層繪制技術(shù)的實(shí)現(xiàn)方式劃分，可分為HTML控件、組件式控件、服務(wù)器控件三大類(lèi)。使用較多的圖層繪制技術(shù)多為組件試控件，如微軟Office中提供的OWC圖層繪制組件[1-2]。服務(wù)器控件是基于Web服務(wù)器中服務(wù)端實(shí)現(xiàn)的，如微軟提供的Web Chart控件[3]、java中的JFreeChart[4]等。而隨著HTML技術(shù)的發(fā)展，通過(guò)HTML中提供的原生Canvas API為基礎(chǔ)，實(shí)現(xiàn)了多種開(kāi)源的動(dòng)態(tài)圖層繪制技術(shù)，例如D3.js[5]、Highcharts[6]、GChart[7]和eChart[8]等。在此基礎(chǔ)上，結(jié)合SuperMap iClient for JavaScript，實(shí)現(xiàn)了一種二維土壤重金屬動(dòng)態(tài)污染模擬繪制技術(shù)。

1 相關(guān)技術(shù)

1.1 eCharts圖層控件

eCharts（Enterprise Charts）技術(shù)是一個(gè)依靠純Jav-

aScript語(yǔ)言實(shí)現(xiàn)的圖層控件庫(kù)，其底層依賴(lài)H5技術(shù)中的Canvas類(lèi)庫(kù)，基于BSD開(kāi)原協(xié)議，是一款非常優(yōu)秀的可視化前端圖層控件框架，并且兼容當(dāng)前世界上大部分的主流瀏覽器。

eCharts圖層控件庫(kù)在提供常規(guī)的柱狀圖、餅狀圖圖、玫瑰圖、盒形圖的同時(shí)，還提供用于地理空間數(shù)據(jù)和屬性數(shù)據(jù)可視化的各種專(zhuān)題圖地圖，例如表面等值線(xiàn)圖、熱力圖，還有用于表示空間關(guān)系數(shù)據(jù)的旭日?qǐng)D、多維空間數(shù)據(jù)中可視化平行坐標(biāo)等，并且還支持圖層與圖層之間的混搭。

1.2 iClient圖層控件

iClient是超圖開(kāi)發(fā)的面向程序開(kāi)發(fā)組件，全稱(chēng)為SuperMap iClient for JavaScript，是一款包含輕量移動(dòng)端SDK和瀏覽器端SDK的開(kāi)發(fā)工具包。在JavaScript技術(shù)支撐上面，可以實(shí)現(xiàn)地圖操作、動(dòng)畫(huà)瀏覽、數(shù)據(jù)可視化呈現(xiàn)等。在此基礎(chǔ)上，該產(chǎn)品具有跨終端和跨瀏覽器能力、支持客戶(hù)端無(wú)縫聚合GIS服務(wù)、客戶(hù)端緩存加速訪問(wèn)效率、豐富的地圖可視化技術(shù)、高效客戶(hù)端繪制能力、無(wú)插件感受流暢地圖體驗(yàn)及簡(jiǎn)單、易用的控件式開(kāi)發(fā)方式。

2 基于eCharts和iClient繪制技術(shù)

eCharts和iClinet都是純JavaScript實(shí)現(xiàn)的圖標(biāo)類(lèi)相關(guān)技術(shù)，使用其進(jìn)行數(shù)據(jù)可視化，可以生成用戶(hù)所需要的各類(lèi)圖表樣式，圖表的引用及生成主要如下。

下載并配置eCharts和iClient for JavaScript的css及js文件路徑，并將其引入html頁(yè)面中，并創(chuàng)建DIV容器：

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

聲明繪圖技術(shù)中所需的相關(guān)變量Iserver_Map、Iserver_Layer、Iserver_Url

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

接著在頁(yè)面中創(chuàng)建出所需要的地圖相關(guān)控件

function init（） {

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

//對(duì)分塊動(dòng)態(tài)REST圖層進(jìn)行創(chuàng)建，REST圖層主要顯示iserver 10i中發(fā)布的地圖服務(wù)

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 對(duì)象上

Iserver_Map.addLayer（Iserver_Layer）;

//出圖，Iserver_map.setCenter 函數(shù)顯示地圖

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

在基于eCharts和iClient技術(shù)的動(dòng)態(tài)圖表繪制技術(shù)中，整個(gè)過(guò)程分為6步。

（1）引入eCharts及iClient中相關(guān)js、css文件。

（2）在H5頁(yè)面中添加用于圖層顯示的DIV容器

（3）在JavaScript中對(duì)eCharts及iClient for JavaS-

cript實(shí)例進(jìn)行初始化。

（4）通過(guò)Ajax異步請(qǐng)求技術(shù)從后端獲取繪圖所需數(shù)據(jù)。

（5）調(diào)用eCharts、iClient for JavaScript中相關(guān)方法對(duì)圖層數(shù)據(jù)及其他相關(guān)的屬性數(shù)據(jù)進(jìn)行配置。

（6）將圖表繪制的結(jié)果導(dǎo)入之前生成的DIV容器中。

3 應(yīng)用實(shí)例

在以下二維污染擴(kuò)散模型的基礎(chǔ)上，以污染點(diǎn)為原點(diǎn)，循環(huán)遍歷該點(diǎn)N x N的一個(gè)矩形，可得該點(diǎn)附近每一處中重金屬污染濃度，若是在多點(diǎn)源覆蓋的情況下，將其值進(jìn)行疊加。

C=■e■+■e■

在計(jì)算出重金屬污染濃度的基礎(chǔ)上，結(jié)合eCharts和iClient，提供任意x，y處的污染濃度及其坐標(biāo)，并結(jié)合iClient中與eCharts結(jié)合提供的熱力圖api接口，即可實(shí)現(xiàn)土壤重金屬二維擴(kuò)散可視化繪圖技術(shù)。

4 結(jié)論

在各種污染不斷加劇的時(shí)代，如何更加直觀地對(duì)污染情況進(jìn)行展示成為污染治理中至關(guān)重要難點(diǎn)之一。本文結(jié)合eCharts和iClient技術(shù)，實(shí)現(xiàn)了污染的可視化展示，在此基礎(chǔ)上，能更加直觀地展示污染的嚴(yán)重程度，為環(huán)保等部門(mén)在污染治理上提供一定的可視化數(shù)據(jù)支持;能節(jié)省環(huán)保等部門(mén)對(duì)數(shù)據(jù)進(jìn)行整合的時(shí)間，并提高污染治理和防治相關(guān)事業(yè)單位和公司掌握數(shù)據(jù)的速度，有效地提高工作效率。

參 考 文 獻(xiàn)

[1]金棟林.OWC圖表組件及其在WEB環(huán)境中的開(kāi)發(fā)應(yīng)用[J].沈陽(yáng)航空工業(yè)學(xué)院學(xué)報(bào)，2006，23（4）：58-59.

[2]楊劍勇.基于Chart控件的Web動(dòng)態(tài)圖表實(shí)現(xiàn)技術(shù)[J].電腦知識(shí)與技術(shù)，2013，32（9）：8321-8322.

[3]侯俁，劉萬(wàn)軍.JFreeChart在JavaWeb項(xiàng)目中的應(yīng)用[J].科學(xué)技術(shù)與工程，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簡(jiǎn)介[EB/OL].https：//www.hcharts.cn，2017-04-15.

[6]Google公司.GChart官方網(wǎng)站[EB/OL].http：//code.google.com/p/gchart，2017-04-15.

[7]唐金文.ADO.NET訪問(wèn)Web數(shù)據(jù)庫(kù)的方法研究[J].曲阜師范學(xué)院學(xué)報(bào)，2004，23（6）：54-57.