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

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

中圖分類號(hào)： P208;TP39 ? ?文獻(xiàn)標(biāo)識(shí)碼： B ? ?DOI：10.3969/j.issn.1003-6970.2020.08.039

本文著錄格式：王鳳嬌. 地理信息資源利用可視化分析系統(tǒng)設(shè)計(jì)[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 ?引言

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

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

1 ?總體設(shè)計(jì)

1.1 ?總體框架

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

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

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

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

1.3 ?功能設(shè)計(jì)

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

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

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

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

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

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

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

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

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

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

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

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

2.1 ?技術(shù)路線

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

（1）在客戶端引入ECharts包

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

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

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

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

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

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

2.3 ?功能實(shí)現(xiàn)

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

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

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

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

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

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

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

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

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

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

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

3 ?結(jié)束語(yǔ)

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

參考文獻(xiàn)

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

[2] 王桃蘋， 王加勝， 王健， 等. 南海艦船數(shù)據(jù)可視化分析系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J]. 計(jì)算機(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簡(jiǎn)介[EB/OL]. 2020-3-26. https：//www. w3school.com.cn/ajax/ajax_intro.asp.

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

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

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

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

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