基于JavaScript的地理事件可視分析框架設計

張　偉，邊長春，李海崗，李　峰

(1.信息工程大學，河南 鄭州 450000；2．61175部隊，山東 淄博 255000)

?

基于JavaScript的地理事件可視分析框架設計

張偉1，2，邊長春2，李海崗2，李峰1

(1.信息工程大學，河南 鄭州 450000；2．61175部隊，山東 淄博 255000)

摘要：隨著互聯網的飛速發展，網絡環境下地理信息的可視化表達成為研究的熱點。在JavaScript技術和可視分析技術研究基礎上，對互聯網中地理事件可視分析框架進行設計，目的是探索網絡環境下，地理事件可視化的表達方式和可行性分析，搭建適合互聯網的地理事件可視分析框架，為基于Web的地理信息可視分析系統的實現打下基礎。

關鍵詞：JavaScript；地理事件；可視分析；D3；框架設計

隨著科學技術的不斷進步，尤其是互聯網的飛速發展，人們越來越多的依靠網絡來獲取各類信息。如何將互聯網中各類地理事件快速、直觀的展現給用戶，讓用戶獲得更多的交互體驗，從而分析事件的多維屬性，發現事件之間的各種關聯，挖掘事件的熱點趨勢，尋找事件的發展規律等，已成為目前地理事件可視分析研究的重要內容。

可視分析最早在2004年由國家可視化和分析中心(National Visualization and Analytics Center, NVAC)組織的工作小組提出，是交互式可視化界面支持的分析推理學科[1]，其主要內容有認知科學、數據表示與轉換、可視化與交互技術、分析推理、決策支持等[2]。地理事件可視分析是在可視化的基礎上，利用可視分析技術，對地理事件進行分析。

本文利用JavaScript技術對互聯網中地理事件進行可視分析框架設計，目的是探索網絡環境下，地理事件可視化的表達方式和可行性分析，搭建適合互聯網的地理事件可視分析框架，為基于Web的地理信息可視分析系統提供支撐。

1概念解析

1.1JavaScript技術

JavaScript是一種基于對象的解釋型腳本語言，廣泛應用于Web應用的開發，是對HTML頁面內容進行交互行為操作的技術[3]，具有跨平臺、可交互、動態嵌入等特點。JavaScript的核心包括ECMAScript，DOM，BOM 3部分內容[4]。

本文基于JavaScript的地理事件可視分析框架設計主要從應用界面、前端開發、網絡傳輸、后端服務等4部分實現其整體功能，分別應用JavaScript以下4部分內容：

1)界面UI框架。JavaScript界面框架有很多，例如JUI，JqueryUI，LigerUI，Jquery easyUI等，可以輕松實現系統框架的界面布局。

2)前端可視化框架。JavaScript可視化框架有D3，echart，Kartograph，Three.js等，考慮到對地圖的支持和交互性的要求，本文采用D3(Data Driven Document)框架。

3)Ajax網絡通訊。異步JavaScript和XML技術，通過服務器端少量的數據交換，實現網頁內容的快速瀏覽和異步更新，對于大數據量的地理事件網絡傳輸與更新提供保障。

4)Node.js服務器端框架。其是對Google V8引擎的封裝[5]，具有單線程、非阻塞等特點，使得Node在服務器端的功能更強大，滿足輕量級系統框架的搭建需求。

1.2可視分析技術

可視分析技術是從科學計算可視化[6]和信息可視化[7]發展而來的，是對大規模、動態、模糊或者不一致的數據集進行分析[8]。可視分析的核心是推理，可視化表達是基礎，交互技術為支撐，充分利用人的感知認知能力彌補計算機自動分析的不足，目的是從海量、動態、異構、多層的數據中獲取更深層次的信息。

本文利用JavaScript在交互性上有其得天獨厚的優勢，為可視分析提供很好的技術支撐。可視分析與可視化最大的區別在于其交互分析的過程，傳統的可視化是被動的顯示，將結果以單一固定的形式展現出來，而可視分析注重用戶的交互，是對數據的多方面的動態展示，通過分析比較得到推理結果，如圖1所示。

圖1　可視分析流程[8]

1.3地理事件可視分析

地理事件的分析，概括的分為兩類方法：一種是依靠計算機或機器，以人工智能、數據挖掘、機器學習等技術為支撐，研究計算機性能、挖掘算法及智能處理等，分析客觀存在的地理事件；另一種是依靠人機交互，以人為主體，可視化、人機交互等技術為支撐，研究認知理論、協同可視化、人機交互等，分析符合人的需求和認知規律的地理事件，如圖2所示。

圖2　地理事件分析方法流程

本文地理事件可視分析以人為主體，人機交互、協同可視化等技術為支撐，充分利用人與機器的各自優勢，對地理事件進行分析。地理事件可視分析是“分析-可視化-分析”的一個循環過程。地理事件可視分析主要研究內容包括：地理事件網絡關系可視分析、地理事件多維屬性可視分析、時空數據實時態勢可視分析、時序數據的事件過程可視分析等。

2地理事件可視分析的框架設計

地理事件可視分析框架設計的基本原則如下[9-11]：

1)以用戶為中心，提供豐富、靈活的交互體驗；

2)以事件為驅動，提供快速、準確的內容更新；

3)以技術為支撐，提供穩定、高效的運行環境；

4)以數據為基礎，提供大規模、動態、多樣數據集。

2.1模型架構設計

基于JavaScript的地理事件可視分析框架采用B/S架構設計，客戶端采用MVC的傳統設計模式，可視化層負責圖形的渲染和更新，業務邏輯層負責交互事件的請求和響應，數據處理層負責數據的調度和管理，如圖3所示。

圖3　模型架構設計

本文采用傳統的B/S架構實現基于互聯網的地理事件可視分析框架設計，充分考慮到用戶的頻繁交互和實時響應的需求，通過D3.js數據驅動文檔，采用AJAX異步通信技術按需下載數據，對頁面進行局部刷新，減少服務器的負擔；客戶端通過JavaScript向服務器發出請求，用戶不必等到響應完即可進行其他操作，提高用戶體驗。

2.2邏輯流程設計

基于JavaScript的地理事件可視分析框架設計，目的是實現基于互聯網的地理事件的可視化及用戶交互分析，其邏輯流程可分為表現層、中間層、數據層3層結構，如圖4所示。

圖4　邏輯流程設計

表現層：包括Web瀏覽器和HTML元素插件，瀏覽器負責接收用戶的交互請求，將任務分發給中間層的數據驅動文檔模型，HTML元素插件將數據驅動文檔模型生成或者更新的元素可視化，并將結果展現給用戶。

中間層：主要負責數據驅動文檔，即將數據和HTML元素綁定，根據用戶任務分配向服務器端發送HTTP請求，接收到返回的數據后，在前端進行數據的繪制，驅動HTML文檔元素的可視化。

數據層：主要負責數據的管理和分發，包括數據庫管理和服務器管理。富客戶端的框架設計，減少服務器端的計算負擔，服務器端更多的任務是數據的管理，基于Ajax的數據請求可以減少服務器的頻繁訪問。

2.3功能模塊設計

地理事件可視分析的內容可分為網絡關系可視分析、多維屬性可視分析、時空數據可視分析、時序事件可視分析等4部分，其功能模塊設計也可以按照地理事件可視分析的內容劃分，如圖5所示。

圖5　功能模塊設計

關系分析圖，是指地理事件的主體之間的實體關系表達，是地理事件分析中主體分析的重要組成部分；屬性分析圖，是指地理事件的客體的多維屬性表達，是地理事件分析中客體屬性分析的重要內容；時空數據分析圖，重點分析地理事件的態勢分布和熱點分布，是地理事件依托基礎地理信息框架進行分析的重要內容；時序事件分析，是對地理事件的過程進行分析，按照時間序列回顧事件的發展過程和探索事件的發展規律。

地理事件的功能模塊的實現，首先，需要有基本組件的支撐，例如基礎地理信息平臺、數據查詢組件、數據分析組件、人機交互組件等。其次，也需要JavaScript技術的支持，例如Ajax異步通信技術、D3.js數據驅動文檔、Node.js的服務器端管理以及LigerUI的界面框架等。最后，是基礎數據的管理，包括矢量數據、柵格數據、屬性數據、管理數據等，為可視分析提供數據服務。

3基于JavaScript的地理事件可視分析框架搭建

3.1環境搭建

3.1.1開發環境

1)操作系統：Windows XP；

2)Web服務器：WAMP搭建的本地服務器；

3)開發語言：JavaScript；

4)開發工具：Sublime腳本編輯器、Chrome瀏覽器；

3.1.2運行環境

1)客戶端。基于JavaScript的地理事件可視分析是基于B/S架構設計，因此客戶端不需要安裝插件，只需要支持IE8以上的瀏覽器，例如Chrome、Firefox等。

操作系統：支持跨平臺運行，例如Window、Linux、OSX等操作系統。

2)服務器端。操作系統：Linux；數據庫：MongoDB；服務器管理：Express.js(基于Node.js)；數據庫管理：Mongoose.js(基于Node.js)。

3.2框架實現

3.2.1數據格式

JavaScript支持的數據格式很多，其中適合地理事件表達的有JSON，CSV，GeoJSON等。JSON(JavaScript Object Notation)是一種輕量級數據交換格式，具有可擴展、互操作、面向對象的特點，是JavaScript的標準格式。GeoJSON是基于JSON的一種專門為地理坐標存儲設計的數據交互格式，是Web網絡中對地理數據結構進行編碼的格式。CSV(Comma Separated Value)是以字符分隔符劃分的純文本數據格式，以行為單位，每行記錄具有相同的字段序列。本文支持以上3種數據格式，GeoJSON存儲基礎地理信息數據，CSV存儲事件的多維屬性數據，JSON存儲地理事件描述數據集。

GeoJSON數據格式示例(中國地圖)：

{

"type": "FeatureCollection",

"features": [

{ "type": "Feature",

"properties": { "id": 1 , "name": "甘肅" },

"geometry": { "type": "Polygon", "coordinates": [ [ [ 104.358, 37.401 ],……]]},

……]

}

CSV數據格式示例(機場信息)：

Airport,longitude,latitude,Heading,Tilt,Range

Yantai,121.369,37.386,2.8278,4.00E-11,27522.85603

……

JSON數據格式示例(IP關系描述)：

{

"nodes":[

{"name":"10.59.223.31"},

……]

"links":[

{"source":1,"target":246,"uplen":32216660,"downlen":28069527,"visitNum":89890},

……]

}

3.2.2框架成果

基于JavaScript的地理事件可視分析基礎平臺，是對地理事件可視分析框架設計的具體實現，驗證基于JavaScript技術搭建地理事件可視分析平臺的可行性和可靠性。該平臺可以在跨操作系統的客戶端瀏覽器中運行，客戶端不需要安裝任何插件，支持Http訪問協議，通過Ajax異步網絡通信技術獲取服務器端基礎數據，確保用戶的良好體驗，減少服務器的訪問次數，在客戶端實現流暢的基礎地理信息可視化、良好的人機交互和跟蹤查詢等功能，如圖6所示。

(a) 地理事件可視分析基礎地理信息可視化

(b) 地理事件可視分析力導向人機交互

(c) 地理事件可視分析屬性信息查詢圖6

4結束語

隨著互聯網與人們的生活工作結合越來越緊密，人們通過互聯網獲取信息的需求也與日俱增，尤其是靈活交互、簡單直觀的用戶體驗已成為人們不斷追求的目標。本文從JavaScript技術和可視分析技術入手，研究互聯網環境下地理事件可視分析

的框架設計；以D3.js和Node.js等類庫為基礎，分別從客戶端和服務器端進行環境的搭建，實現基于JavaScript的地理事件可視分析基礎平臺。結果表明，基于JavaScript技術進行地理事件可視分析框架設計是可行的，為地理信息可視分析系統的實現和功能完善打下基礎。

參考文獻：

[1]THOMAS J J, COOK C A. Illuminating the Path: The Research and Development Agenda for Visual Analytics[J]. Los Alamitos: IEEE Computer Society, 2005. 1-180.

[2]華一新，曹亞妮，李響.地理空間可視分析及其研究方向綜述[J].測繪科學技術學報,2012,29(4):235-239.

[3]龍云.基于HTML5的WebGIS研究[D].贛州：江西理工大學,2013.

[4]李松峰，曹力.JavaScript高級程序設計[M].北京：人民郵電出版社，2012.

[5]張辰.B_S模式下的數據可視化技術研究及其應用[D].北京：北京郵電大學,2013.

[6]CHEN M, EBERT D, HAGEN H, et al. Data, information, and knowledge in visualization [J]. IEEE Computer Graphics and Applications, 2009,29(1):12-19.

[7]CHEN C M. CiteSpace II: Detecting and visualizing emerging trends and transient patterns in scientific literature [J]. Journal of the American Society for Information Science and Technology,2006,57(3):359-377.

[8]KEIM D, KONLHAMMER J, ELLIS G, et al. Mastering the Information Age: Solving Problems with Visual Analytics. Goslar:Eruographics Association, 2010：1-168.

[9]張運良,張兆鋒,張曉丹，等.使用D3_js的知識組織系統Web動態交互可視化功能實現[J]. 現代圖書情報技術,2013(2):127-131.

[10] 徐良燕.基于SVG的電力系統WEBGIS方案的研究[D].保定：華北電力大學,2005.

[11] 周炤，肖強，趙國成，等.基礎地理空間數據持續更新模式分析[J].測繪工程,2014，23(1):12-16.

[12] 李小琦.三維場景可視化中的模型匹配方法研究[J].測繪科學，2015，40(8)：144-146.

[13] 赫春曉，呂志慧，陳超.露采礦山三維可視化分析應用[J].測繪科學，2015，40(7)：131-135.

[責任編輯：路曉鴿]

Visual analysis framework design of geographical event based on JavaScript

ZHANG Wei1,2,BIAN Changchun2,LI Haigang2, LI Feng1

(1.Information Engineering University，Zhengzhou 450000，China；2.Troops 61175，Zibo 255000,China)

Abstract：With the rapid development of the Internet, the visualization of geographic information in the network environment has become a hot study. Based on the study of the JavaScript and visual analysis technology, this paper designs the geographical event visual analysis framework on the Internet. The purpose is to explore the expression and feasibility of the geographical event visualization in the network environment, to set up a suitable Internet geographical event visual analysis framework, and to lay the foundation the realization of Web geographic information visual analysis system.

Key words：JavaScript; geographical event; visual analysis; Data-Driven Document; Framework Design

中圖分類號：P208

文獻標識碼：A

文章編號：1006-7949(2016)03-0041-05

作者簡介：張偉(1982-), 男,工程師,博士研究生.

基金項目：國家自然科學基金資助項目(41301428)

收稿日期：2015-08-01；修回日期：2015-08-31