摘 ?要： 為實現(xiàn)對地理信息資源利用情況的展示和分析，基于天地圖API，以地理信息資源利用數(shù)據(jù)為業(yè)務(wù)數(shù)據(jù)，系統(tǒng)采用B/S的應(yīng)用體系架構(gòu)，采用ECharts可視化、GIS、數(shù)據(jù)庫等技術(shù)對地理信息資源利用數(shù)據(jù)進行管理與可視化分析。系統(tǒng)設(shè)計實現(xiàn)了基于地理信息資源利用數(shù)據(jù)的可視化Web應(yīng)用功能，能更加高效地對地理信息資源利用數(shù)據(jù)進行管理分析，對地理信息資源的生產(chǎn)要素配置具有分析參考作用。

關(guān)鍵詞： ECharts;可視化;地理信息資源利用

中圖分類號： P208;TP39 ? ?文獻標識碼： B ? ?DOI：10.3969/j.issn.1003-6970.2020.08.039

本文著錄格式：王鳳嬌. 地理信息資源利用可視化分析系統(tǒng)設(shè)計[J]. 軟件，2020，41（08）：147-149

【Abstract】： In order to display and analyze the utilization of geographic information resources， based on the MapWorld API， taking the utilization data of geographic information resources as business data， using B/S architecture and ECharts visualization technology， GIS， database technologies to manage and visualize the utilization data of geographic information resources. The system realizes the visualization Web application function based on the geographic information resource utilization data. The system can manage and analyze the utilization data of geographic information resources more efficiently， and has an analysis reference function for the allocation of production factors of geographic information resources.

【Key words】： ECharts; Visualization; Geographic information resource utilization

0 ?引言

地理信息資源是通過測繪形成的數(shù)據(jù)、信息、圖件以及相關(guān)的技術(shù)資料，是地理信息的主要載體，和社會經(jīng)濟發(fā)展、城市規(guī)劃建設(shè)、廣大人民的生產(chǎn)生活都有密切關(guān)系，國家及各省都高度重視促進地理信息產(chǎn)業(yè)高質(zhì)量發(fā)展。而數(shù)據(jù)可視化是利用計算機圖形圖像理論和處理手段，以可視化方式直觀呈現(xiàn)復雜、多維度的數(shù)據(jù)，便于人們快速掌握信息變化趨勢和規(guī)律，為制定科學準確的決策提供有力支撐[1]。

地理信息資源利用分析主要是通過傳統(tǒng)的統(tǒng)計報表形式來進行匯總上報，或者利用傳統(tǒng)辦公軟件進行數(shù)據(jù)處理與統(tǒng)計圖表制作進行分析，缺乏對地理信息資源利用數(shù)據(jù)的圖表可視化分析。因此探索可視化、圖表等技術(shù)在地理信息資源利用上的應(yīng)用，為地理信息資源的要素配置提供參考，具有一定的研究價值[2]。本文基于天地圖、地理信息資源利用數(shù)據(jù)，利用可視化、GIS、數(shù)據(jù)庫等技術(shù)對可視化編程模式進行探索，提出了采用AJAX和ECharts圖表控件等在地理信息資源利用可視化應(yīng)用中的解決方案。

1 ?總體設(shè)計

1.1 ?總體框架

系統(tǒng)采用B/S體系架構(gòu)，從下到上包括基礎(chǔ)層、數(shù)據(jù)層、業(yè)務(wù)層和用戶層，如圖1所示。

基礎(chǔ)層以軟硬件基礎(chǔ)環(huán)境為基礎(chǔ)，包含應(yīng)用服務(wù)器、數(shù)據(jù)庫服務(wù)器、網(wǎng)絡(luò)設(shè)備、安全設(shè)備等;數(shù)據(jù)層包括系統(tǒng)數(shù)據(jù)庫及天地圖API等;業(yè)務(wù)層則是基于數(shù)據(jù)層實現(xiàn)的統(tǒng)計分析業(yè)務(wù)功能;用戶層主要指用戶在客戶端進行數(shù)據(jù)可視化呈現(xiàn)。

1.2 ?數(shù)據(jù)庫設(shè)計

系統(tǒng)業(yè)務(wù)數(shù)據(jù)為地理信息資源利用數(shù)據(jù)，主要包括地理信息資源訂單信息表和用戶信息表，訂單信息表記錄了用戶所利用的地理信息資源數(shù)據(jù)類型、圖幅、圖名、日期、項目所在地等信息，用戶信息表主要記錄用戶注冊基本信息、所屬的行業(yè)領(lǐng)域、與訂單信息的關(guān)聯(lián)關(guān)系等。

1.3 ?功能設(shè)計

系統(tǒng)主要實現(xiàn)對地理信息資源利用數(shù)據(jù)的可視化分析，按照時間、類別、行業(yè)、空間位置等多維度進行統(tǒng)計，對地理信息資源利用數(shù)據(jù)進行圖表統(tǒng)計分析，并以可視化形式動態(tài)展示數(shù)據(jù)的規(guī)律，展示形式包括實時熱力圖、動態(tài)飛行圖、多維柱狀圖、復合餅狀圖、專題統(tǒng)計圖等。

1.4 ?關(guān)鍵技術(shù)

（1）ECharts可視化技術(shù)

作為近些年流行的商業(yè)級圖表庫，ECharts是使用 JavaScript實現(xiàn)的開源可視化開發(fā)框架，可以流暢的運行在PC端和移動設(shè)備上，兼容當前絕大部分瀏覽器，它底層依賴輕量級的矢量圖形庫ZRender，提供直觀、交互豐富、可高度個性化定制的數(shù)據(jù)可視化圖表，ECharts 支持多類型的圖表可視化，并通過豐富的交互組件和高度個性化的可視化解決方案，靈活地實現(xiàn)各種圖表元素的聯(lián)動和混搭，實現(xiàn)用戶和數(shù)據(jù)的交互，從而增強用戶獲取知識、優(yōu)化數(shù)據(jù)分析的能力[3]。

（2）AJAX異步傳輸技術(shù)

AJAX異步傳輸技術(shù)是用于創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)，其特點主要是通過與服務(wù)器進行少量數(shù)據(jù)交換便可實現(xiàn)網(wǎng)頁的異步更新，這樣可以在不重復加載或刷新網(wǎng)頁的前提下，只需通過在服務(wù)端和客戶端之間傳送所需的分析業(yè)務(wù)數(shù)據(jù)便可以對網(wǎng)頁的某部分進行更新[4]。這種模式比較適合Web 應(yīng)用程序中進行業(yè)務(wù)數(shù)據(jù)的請求和響應(yīng)，節(jié)約了服務(wù)端響應(yīng)更替的耗時操作，從而通過少量的數(shù)據(jù)交換實現(xiàn)異步更新[5]。

（3）AJAX框架下ECharts可視化實現(xiàn)

AJAX框架下ECharts的可視化開發(fā)流程模式中，將通過AJAX傳遞用戶交互需求中所獲取的數(shù)據(jù)，以ECharts圖表控件的形式在客戶端實現(xiàn)對交互數(shù)據(jù)的圖表可視化展示。因此，在Web應(yīng)用程序中使用ECharts進行統(tǒng)計圖表繪制的開發(fā)流程如圖2所示。

AJAX框架下ECharts的可視化開發(fā)流程主要分為六個步驟[6]：（1）將ECharts控件庫添加到項目工程中;（2）在網(wǎng)頁端創(chuàng)建DIV容器用于顯示圖表;（3）利用JavaScript程序進行 ECharts 圖表實例的初始化;（4）利用AJAX技術(shù)獲取繪圖所需的交互數(shù)據(jù);（5）配置ECharts圖表數(shù)據(jù)和參數(shù)項，主要通過調(diào)用ECharts圖表實例的setOption方法完成配置;（6）將繪制的圖表結(jié)果導入DIV容器中，完成圖表可視化。

在Web應(yīng)用程序中，聯(lián)合使用Echarts和AJAX技術(shù)解決數(shù)據(jù)傳輸造成的頁面刷新等待問題，可以提升系統(tǒng)訪問速度，頁面無刷新、用戶無等待，使用戶獲得較好的操作體驗[7]。

2 ?系統(tǒng)實現(xiàn)

基于系統(tǒng)的總體設(shè)計，系統(tǒng)采用JavaScript、JAVA、CSS等搭建B/S的Web應(yīng)用體系架構(gòu)，前端采用ECharts圖表控件進行圖表分析展示，后端使用Spring Boot作為系統(tǒng)框架，以Tomcat作為應(yīng)用服務(wù)器，采用MySQL數(shù)據(jù)庫存儲業(yè)務(wù)數(shù)據(jù)。

2.1 ?技術(shù)路線

系統(tǒng)的關(guān)鍵在于數(shù)據(jù)可視化，可視化流程的實現(xiàn)主要通過引用ECharts控件庫，基于AJAX異步傳輸技術(shù)實現(xiàn)Web應(yīng)用程序客戶端的動態(tài)數(shù)據(jù)異步加載，完成動態(tài)圖表的繪制。

（1）在客戶端引入ECharts包

根據(jù)系統(tǒng)體系架構(gòu)需求，系統(tǒng)選用微服務(wù)構(gòu)架進行系統(tǒng)功能開發(fā)，開發(fā)時采用基于模塊化的開發(fā)方式，將ECharts控件庫所提供的js包文件引入開發(fā)項目的Html文件中，在項目文檔中加載ECharts主文件（echart.js），根據(jù)所需的圖表類型再動態(tài)加載圖表類型引用[8]。

（2）動態(tài)數(shù)據(jù)異步加載

按照圖表控件的可視化步驟，在項目中引入ECharts控件庫js包文件以后，需要對ECharts進行實例化，實例化后的ECharts，可以通過setOption方法進行數(shù)據(jù)和參數(shù)的配置，從而完成各類圖表的繪制[1]。在進行系統(tǒng)數(shù)據(jù)可視化時，所需的繪圖數(shù)據(jù)需要從服務(wù)器端實時讀取并進行動態(tài)加載，具體的動態(tài)數(shù)據(jù)異步加載流程如圖3所示。

在客戶端瀏覽器使用JavaScript通過AJAX技術(shù)發(fā)起請求參數(shù)，參數(shù)為URL形式，主要包括后臺服務(wù)地址及相關(guān)的統(tǒng)計參數(shù)等，服務(wù)器端通過后臺程序?qū)φ埱筮M行解析處理，調(diào)用JAVA封裝的數(shù)據(jù)庫訪問方法，將參數(shù)傳入后對MySQL數(shù)據(jù)庫表進行庫表關(guān)聯(lián)查詢，并將獲取的查詢數(shù)據(jù)序列化為JSON格式返回客戶端，在客戶端ECharts不能直接讀取JSON數(shù)據(jù)，需要利用AJAX解析JSON格式數(shù)據(jù)后，通過setOption方法設(shè)置ECharts實例的數(shù)據(jù)和參數(shù)配置，諸如legend、tooltip、title、grid、xAxis、yAxis、series等參數(shù)項，從而實現(xiàn)統(tǒng)計圖表的動態(tài)繪制。

2.2 ?數(shù)據(jù)庫建設(shè)

數(shù)據(jù)庫選用MySQL作為存儲數(shù)據(jù)庫，并使用InnoDB作為數(shù)據(jù)庫引擎，業(yè)務(wù)數(shù)據(jù)以二維表形式存儲在MySQL數(shù)據(jù)庫中;地圖數(shù)據(jù)通過調(diào)用天地圖API獲取顯示。

2.3 ?功能實現(xiàn)

系統(tǒng)實現(xiàn)了地理信息資源利用數(shù)據(jù)的可視化展示功能，主要形式有實時熱力圖、動態(tài)飛行圖、多維柱狀圖、復合餅狀圖、專題統(tǒng)計圖等，提高了地理信息資源利用知識的可視化分析效率[9]。

（1）地理信息資源利用熱點統(tǒng)計

使用熱點圖顯示數(shù)據(jù)利用的熱點區(qū)域，支持根據(jù)時間、行業(yè)進行熱度區(qū)域的熱力圖定制，微觀上使用在地圖上疊加各類型數(shù)據(jù)利用數(shù)量展示，宏觀上使用動態(tài)熱力圖展示。

（2）地理信息資源利用過程統(tǒng)計

使用飛行圖動態(tài)展示用戶訂購地理信息資源的過程，主要按照時序統(tǒng)計用戶的區(qū)域和用戶的地理位置的飛行動態(tài)圖，可直觀展現(xiàn)資料的利用過程。

（3）地理信息資源利用數(shù)量統(tǒng)計

按照特定時間、年度時序等，以圖表形式展示各類地理信息資源利用數(shù)量情況，從而發(fā)現(xiàn)各類地理信息資源的利用情況變化規(guī)律。

（4）地理信息資源利用類別統(tǒng)計

根據(jù)特定時間、年度時序、用戶行業(yè)等條件，實現(xiàn)對各類別的地理信息資源利用情況的統(tǒng)計分析，并以多維柱狀圖、餅狀圖形式顯示統(tǒng)計數(shù)據(jù)。

（5）地理信息資源利用區(qū)域統(tǒng)計

根據(jù)特定時間、年度時序等，生成各地所有類別資源利用情況的專題統(tǒng)計圖，從而直觀的展現(xiàn)地理信息資源利用區(qū)域相關(guān)的規(guī)律。

3 ?結(jié)束語

地理信息資源作為地理信息的主要載體，其應(yīng)用的廣度和深度，從一定程度上也影響著地理信息產(chǎn)業(yè)的發(fā)展動向。本文介紹了AJAX框架下的ECharts可視化編程思路，設(shè)計了Web應(yīng)用程序中數(shù)據(jù)的可視化開發(fā)過程，并以地理信息資源利用數(shù)據(jù)為實例進行實現(xiàn)，使得地理信息資源利用數(shù)據(jù)以圖表形式直觀高效的展示。通過可視化技術(shù)展示地理信息資源利用的動態(tài)變化及發(fā)展規(guī)律，有助于促進決策者全面深入的理解與分析數(shù)據(jù)，并制定科學的發(fā)展決策。

參考文獻

[1] 宋佳慧， 劉遠剛， 林琳， 等. 基于eCharts的動態(tài)統(tǒng)計圖表繪制技術(shù)研究[J]. 電腦知識與技術(shù)， 2017， 13（12）： 202-204.

[2] 王桃蘋， 王加勝， 王健， 等. 南海艦船數(shù)據(jù)可視化分析系統(tǒng)設(shè)計與實現(xiàn)[J]. 計算機應(yīng)用與軟件， 2019， 36（08）： 25-30.

[3] Baidu公司. ECharts官方網(wǎng)站[EB/OL]. https：//www.echar-tsjs.com/zh/index.html.

[4] W3Cschool.AJAX簡介[EB/OL]. 2020-3-26. https：//www. w3school.com.cn/ajax/ajax_intro.asp.

[5] 宋文文， 孫力群. 大數(shù)據(jù)可視化數(shù)據(jù)加載模式比較分析[J]. 電腦知識與技術(shù)， 2019， 15（36）： 11-12.

[6] 崔蓬. ECharts在數(shù)據(jù)可視化中的應(yīng)用[J]. 軟件工程， 2019， 22（06）： 42-46.

[7] 趙海國. Ajax 支持下的ECharts 圖形報表技術(shù)的應(yīng)用[J]. 電子技術(shù)， 2018（4）： 66-69.

[8] 王子毅， 張春海. 基于ECharts的數(shù)據(jù)可視化分析組件設(shè)計實現(xiàn)[J]. 微型機與應(yīng)用， 2016， 35（14）： 46-48.

[9] 岳鋼， 王楠. 網(wǎng)絡(luò)學習中知識可視化效率研究[J]. 軟件， 2015， 36（2）： 92-96.