基于開源工具的地震目錄可視化系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

羅 勇，付紅云

(1.山西省地震局，山西 太原 030021；2.山西能源學(xué)院，山西 太原 030600；3.太原大陸裂谷動(dòng)力學(xué)國家野外科學(xué)觀測(cè)研究站，山西 太原 030025)

0 引言

地震目錄是地震預(yù)測(cè)研究、地震工程研究等最為基礎(chǔ)的資料，基于地震目錄的統(tǒng)計(jì)分析及地震預(yù)測(cè)概率分析是地震活動(dòng)性研究的重要部分。在地震科普方面，地震目錄是社會(huì)公眾對(duì)地震知識(shí)學(xué)習(xí)與了解的另外一個(gè)窗口。 很多研究已表明，在進(jìn)行理解和學(xué)習(xí)的時(shí)候， 圖像更易理解、更有趣，也更容易讓公眾記住，圖文并茂有助于公眾更好地了解、運(yùn)用。對(duì)簡單枯燥的地震目錄進(jìn)行在線的交互可視化，當(dāng)用戶用鼠標(biāo)滑過圖標(biāo)時(shí)會(huì)有更多的數(shù)據(jù)信息展示。該系統(tǒng)可為公眾提供地震知識(shí)的學(xué)習(xí)平臺(tái)，為研究人員提供更直觀、清晰的數(shù)據(jù)分析結(jié)果。

數(shù)據(jù)可視化技術(shù)的起源可追溯到20世紀(jì)50年代的計(jì)算機(jī)圖形學(xué)時(shí)代[1]，隨著計(jì)算機(jī)、互聯(lián)網(wǎng)技術(shù)的發(fā)展，數(shù)據(jù)可視化技術(shù)以及應(yīng)用工具已經(jīng)由單機(jī)轉(zhuǎn)向互聯(lián)網(wǎng)、靜態(tài)轉(zhuǎn)向動(dòng)態(tài)。目前的開源數(shù)據(jù)可視化JavaScript庫包含表格、曲線、柱狀圖、位置等多種表現(xiàn)方式。文章根據(jù)地震目錄的數(shù)據(jù)特點(diǎn)，利用開源數(shù)據(jù)可視化JavaScript庫的優(yōu)勢(shì)，以JavaWeb為后臺(tái)程序設(shè)計(jì)語言，結(jié)合MySql數(shù)據(jù)庫，設(shè)計(jì)了一套B/S架構(gòu)的地震目錄數(shù)據(jù)多種展現(xiàn)方式的可視化系統(tǒng)。

1 開源JavaScript庫

研究運(yùn)用的開源JavaScript庫包括jqGrid、ECharts、plotly、高德地圖 JS API。

1.1 jqGrid

jqGrid是一款處理表格展現(xiàn)的jQuery插件，支持分頁、滾動(dòng)加載、搜索、鎖定、拖動(dòng)等一系列對(duì)表格的常規(guī)操作，可以根據(jù)客戶要求更換不同的主題，而且兼容目前所有流行的web瀏覽器。其提供的豐富選項(xiàng)配置及方法事件接口為開發(fā)者實(shí)現(xiàn)更多功能提供支撐。

1.2 ECharts

ECharts是國內(nèi)一款非常優(yōu)秀的可視化圖表控件，底層依賴輕量級(jí)的Canvas類庫ZRender，提供直觀、生動(dòng)、可交互、可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。ECharts的設(shè)計(jì)是面向數(shù)據(jù)，基于數(shù)據(jù)來驅(qū)動(dòng)圖形的生成，通過改變數(shù)據(jù)來改變圖表的表現(xiàn)形式。通過合理的數(shù)據(jù)組織后，通過一個(gè)參數(shù)的變化就可以改變圖表的表現(xiàn)形式。所謂的樣式只是定義圖形的點(diǎn)線面狀態(tài)，數(shù)據(jù)組織才是關(guān)鍵。比如折柱餅圖，甚至地圖在ECharts里完全可以針對(duì)同一份數(shù)據(jù)通過改變一個(gè)參數(shù)而切換為不同的圖表類型。圍繞著如何組織數(shù)據(jù)來描述整個(gè)option，就可以使圖表類型有無限的可能[2]。

1.3 Plotly

Plotly是一個(gè)用于做分析和可視化的在線平臺(tái)，不僅與多個(gè)主流繪圖軟件對(duì)接，還可以像Excel那樣實(shí)現(xiàn)交互式制圖，圖表種類齊全，也可以實(shí)現(xiàn)在線分享以及開源，繪制基本圖表、統(tǒng)計(jì)和海運(yùn)方式圖、科學(xué)圖表、財(cái)務(wù)圖表、地圖、3D圖表、擬合工具流動(dòng)圖表等，是一款功能強(qiáng)大的開源數(shù)據(jù)可視化工具。

1.4 高德地圖 JS API

高德地圖 JS API 是一套 JavaScript 語言開發(fā)的地圖應(yīng)用編程接口，移動(dòng)端、PC端一體化設(shè)計(jì)，一套 API 兼容眾多平臺(tái)。目前 JS API 免費(fèi)開放使用。JS API 提供了2D、3D地圖模式，滿足絕大多數(shù)開發(fā)者對(duì)地圖的展示、地圖自定義、圖層加載、點(diǎn)標(biāo)記添加、矢量圖形繪制的需求，同時(shí)提供 POI 搜索、路線規(guī)劃、地理編碼、行政區(qū)查詢、定位等眾多開放服務(wù)接口[3]。

2 系統(tǒng)架構(gòu)和工作流程

2.1 系統(tǒng)架構(gòu)

按照系統(tǒng)功能需求，系統(tǒng)由數(shù)據(jù)訪問層、數(shù)據(jù)處理層及用戶訪問層組成。

數(shù)據(jù)訪問層是按照地震目錄數(shù)據(jù)結(jié)構(gòu)和數(shù)據(jù)可視化需求封裝了數(shù)據(jù)庫訪問的底層細(xì)節(jié)，采用數(shù)據(jù)庫連接池，適用于連接本地及遠(yuǎn)程數(shù)據(jù)庫；數(shù)據(jù)處理層負(fù)責(zé)把數(shù)據(jù)庫中獲取到的數(shù)據(jù)進(jìn)行封裝，以滿足數(shù)據(jù)可視化工具對(duì)數(shù)據(jù)的要求，包括數(shù)據(jù)的采集、加工和輸出，封裝了地震目錄的各項(xiàng)屬性以及通過地震目錄生成的統(tǒng)計(jì)屬性；用戶訪問層以web的方式提供設(shè)置系統(tǒng)查詢參數(shù)以及數(shù)據(jù)展示，同時(shí)也提供地震目錄數(shù)據(jù)上傳功能。系統(tǒng)客戶端開發(fā)語言為html，JavaScript；服務(wù)器端采用的開發(fā)語言為java。系統(tǒng)具體環(huán)境配置如下：

(1) 操作系統(tǒng)：windows server2008。

(2) 數(shù)據(jù)庫：Mysql。

(3) Web服務(wù)器：Tomcat。

2.2 工作流程

用戶按照系統(tǒng)查詢規(guī)則從瀏覽器請(qǐng)求服務(wù)時(shí)，用戶訪問層會(huì)向數(shù)據(jù)處理層發(fā)送查詢條件，數(shù)據(jù)處理層將條件遞送至數(shù)據(jù)訪問層，之后，數(shù)據(jù)訪問層從數(shù)據(jù)庫提取數(shù)據(jù)并傳給數(shù)據(jù)處理層，用戶訪問層再對(duì)數(shù)據(jù)進(jìn)行可視化操作，完成工作流程。具體為：用戶通過開源數(shù)據(jù)可視化工具，用Ajax技術(shù)向服務(wù)端對(duì)數(shù)據(jù)進(jìn)行請(qǐng)求，服務(wù)端使用Servlet語言對(duì)請(qǐng)求條件進(jìn)行接收，并向數(shù)據(jù)庫發(fā)送查詢請(qǐng)求，之后通過Java的Mysql適配器訪問地震目錄數(shù)據(jù)庫得到數(shù)據(jù)，數(shù)據(jù)請(qǐng)求完成后通過Servlet把數(shù)據(jù)解譯成對(duì)象，利用Json格式轉(zhuǎn)化工具把對(duì)象封裝成數(shù)據(jù)可視化工具所需要的jsonObject格式，最后通過開源數(shù)據(jù)可視化工具將數(shù)據(jù)返回給用戶使用。流程圖如圖1所示。

3 系統(tǒng)功能

地震目錄可視化系統(tǒng)目前包括表格顯示系統(tǒng)、位置展示系統(tǒng)、M-T圖展示系統(tǒng)、頻次圖展示系統(tǒng)以及基于地圖的地震目錄三維可視化系統(tǒng)。這幾個(gè)模塊系統(tǒng)可以把地震目錄的基本特征數(shù)據(jù)以及統(tǒng)計(jì)結(jié)果等全面地進(jìn)行展示，滿足用戶對(duì)地震目錄數(shù)據(jù)的基本需求。

3.1 表格顯示系統(tǒng)

表格顯示系統(tǒng)是用JqGrid開源js庫以表格形式展示地震目錄數(shù)據(jù)系統(tǒng)，表格中顯示了地震的發(fā)震日期、發(fā)震時(shí)間、震中緯度、震中經(jīng)度、震級(jí)、震源深度以及震中位置。系統(tǒng)可以通過選擇時(shí)間段、震級(jí)范圍查詢符合條件的地震數(shù)據(jù)。效果展示如圖2所示。

圖1 系統(tǒng)工作流程圖Fig.1 System work flow diagram

圖2 表格顯示系統(tǒng)Fig.2 Table display system

3.2 位置展示系統(tǒng)

位置展示系統(tǒng)是通過高德地圖API加載地震目錄數(shù)據(jù)，在加載數(shù)據(jù)時(shí)，以canvas實(shí)心圓形式，根據(jù)地震震級(jí)大小和經(jīng)緯度來設(shè)置展示樣式，實(shí)現(xiàn)地震位置和大小的同時(shí)展示。當(dāng)鼠標(biāo)點(diǎn)擊實(shí)心圓時(shí)，系統(tǒng)右側(cè)的列表會(huì)對(duì)應(yīng)閃爍顯示該地震的詳細(xì)情況，同時(shí)實(shí)心圓變色；反之，當(dāng)鼠標(biāo)點(diǎn)擊列表中的地震信息時(shí)，地圖中心點(diǎn)會(huì)自動(dòng)漫游至該地震對(duì)應(yīng)的實(shí)心圓位置，同時(shí)實(shí)心圓變色。通過該系統(tǒng)實(shí)現(xiàn)的地震目錄展示，可為用戶提供地震位置、大小及其他詳細(xì)情況的互動(dòng)查詢，增加了用戶對(duì)地震目錄數(shù)據(jù)學(xué)習(xí)和研究的手段(見第13頁圖3)。

圖3 位置展示系統(tǒng)Fig.3 Position display system

3.3 M-T圖展示系統(tǒng)

M-T圖展示系統(tǒng)是通過Echart js開源庫的柱狀圖顯示功能，按照橫坐標(biāo)為時(shí)間，縱坐標(biāo)為震級(jí)的模式將地震目錄數(shù)據(jù)展示成M-T圖樣式，相比于靜態(tài)的M-T圖具有生成速度快、設(shè)置條件速度快的特點(diǎn)。用戶可以拖動(dòng)M-T圖右側(cè)以及底部的滑動(dòng)條進(jìn)行時(shí)間段和震級(jí)段的選擇，也可以通過滑動(dòng)條的長度對(duì)時(shí)間段和震級(jí)段進(jìn)行調(diào)整，達(dá)到不同尺度的M-T圖快速生成(見圖4)。

圖4 M-T圖展示系統(tǒng)Fig.4 M-T diagram display system

3.4 頻次圖展示系統(tǒng)

頻次圖展示系統(tǒng)是通過plotly js開源庫的柱狀圖顯示功能，按照橫坐標(biāo)為時(shí)間，縱坐標(biāo)為按照某一震級(jí)條件設(shè)置的統(tǒng)計(jì)數(shù)展示地震頻次圖樣式。系統(tǒng)通過設(shè)置最小震級(jí)來統(tǒng)計(jì)最小震級(jí)以上的地震頻次，通過拖動(dòng)頻次圖右側(cè)以及底部的滑動(dòng)條進(jìn)行時(shí)間段和震級(jí)段的選擇，也可以通過滑動(dòng)條的長度對(duì)時(shí)間段和最小震級(jí)以上的震級(jí)段進(jìn)行調(diào)整，達(dá)到不同尺度的頻次圖快速生成(見圖5)。

3.5 基于地圖的地震目錄三維可視化系統(tǒng)

基于地圖的地震目錄三維可視化系統(tǒng)是運(yùn)用高德地圖推出的3D熱力圖展示模塊，將地震目錄的震級(jí)大小作為熱力圖的熱力值，展示地震的影響程度，相比2D熱力圖利用顏色表達(dá)數(shù)據(jù)信息的特點(diǎn),3D熱力圖增加了形狀表達(dá)方式，給人以更加清晰、直觀的數(shù)據(jù)表達(dá)感受，同時(shí)也能獲得比2D熱力圖更多的數(shù)據(jù)信息(見圖6)。

圖6 基于地圖的地震目錄三維可視化系統(tǒng)Fig.6 Three-dimensional visualization system of seismic catalogue based on maps

4 結(jié)語

文章設(shè)計(jì)了一套以地震目錄數(shù)據(jù)為基礎(chǔ)，采用mysql免費(fèi)數(shù)據(jù)庫，以及5種js數(shù)據(jù)可視化庫的B/S架構(gòu)地震目錄數(shù)據(jù)查詢展示平臺(tái)，以不同的數(shù)據(jù)展示方式從不同的角度展示地震目錄數(shù)據(jù)，增強(qiáng)現(xiàn)有地震目錄系統(tǒng)的科普宣傳作用，順應(yīng)當(dāng)今“智慧服務(wù)”的理念，同時(shí)為研究人員提供更加直觀、清晰的數(shù)據(jù)分析結(jié)果。系統(tǒng)能夠很好地集成于普通html頁面，只要有地震目錄的相關(guān)數(shù)據(jù)，就能在系統(tǒng)中作出展示，系統(tǒng)所需環(huán)境也較為普遍，便于推廣。