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

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

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

【關鍵詞】eCharts;iClient;可視化;AJAX;SSM

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

0 引言

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

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

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

1 相關技術

1.1 eCharts圖層控件

eCharts（Enterprise Charts）技術是一個依靠純Jav-

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

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

1.2 iClient圖層控件

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

2 基于eCharts和iClient繪制技術

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

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

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

聲明繪圖技術中所需的相關變量Iserver_Map、Iserver_Layer、Iserver_Url

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

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

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技術的動態(tài)圖表繪制技術中，整個過程分為6步。

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

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

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

cript實例進行初始化。

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

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

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

3 應用實例

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

C=■e■+■e■

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

4 結論

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

參 考 文 獻

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

[2]楊劍勇.基于Chart控件的Web動態(tài)圖表實現(xiàn)技術[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數(shù)據(jù)庫的方法研究[J].曲阜師范學院學報，2004，23（6）：54-57.