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

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

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

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

【中圖分類號】TP311 【文獻標識碼】A 【文章編號】1674-0688（2020）08-0056-02

0 引言

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

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

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

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

1.1 eCharts圖層控件

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

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

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

1.2 iClient圖層控件

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

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

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

下載并配置eCharts和iClient for JavaScript的css及js文件路徑，并將其引入html頁面中，并創(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"

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

function init（） {

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

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

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 函數(shù)顯示地圖

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

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

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

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

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

cript實例進行初始化。

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

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

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

3 應用實例

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

C=■e■+■e■

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

4 結(jié)論

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

參 考 文 獻

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

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

[3]侯俁，劉萬軍.JFreeChart在JavaWeb項目中的應用[J].科學技術(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簡介[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訪問Web數(shù)據(jù)庫的方法研究[J].曲阜師范學院學報，2004，23（6）：54-57.