羅 勇，付紅云

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

0 引言

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

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

1 開源JavaScript庫

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

1.1 jqGrid

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

1.2 ECharts

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

1.3 Plotly

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

1.4 高德地圖 JS API

高德地圖 JS API 是一套 JavaScript 語言開發(fā)的地圖應(yīng)用編程接口，移動端、PC端一體化設(shè)計，一套 API 兼容眾多平臺。目前 JS API 免費開放使用。JS API 提供了2D、3D地圖模式，滿足絕大多數(shù)開發(fā)者對地圖的展示、地圖自定義、圖層加載、點標(biāo)記添加、矢量圖形繪制的需求，同時提供 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ù)庫訪問的底層細節(jié)，采用數(shù)據(jù)庫連接池，適用于連接本地及遠程數(shù)據(jù)庫；數(shù)據(jù)處理層負責(zé)把數(shù)據(jù)庫中獲取到的數(shù)據(jù)進行封裝，以滿足數(shù)據(jù)可視化工具對數(shù)據(jù)的要求，包括數(shù)據(jù)的采集、加工和輸出，封裝了地震目錄的各項屬性以及通過地震目錄生成的統(tǒng)計屬性；用戶訪問層以web的方式提供設(shè)置系統(tǒng)查詢參數(shù)以及數(shù)據(jù)展示，同時也提供地震目錄數(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ī)則從瀏覽器請求服務(wù)時，用戶訪問層會向數(shù)據(jù)處理層發(fā)送查詢條件，數(shù)據(jù)處理層將條件遞送至數(shù)據(jù)訪問層，之后，數(shù)據(jù)訪問層從數(shù)據(jù)庫提取數(shù)據(jù)并傳給數(shù)據(jù)處理層，用戶訪問層再對數(shù)據(jù)進行可視化操作，完成工作流程。具體為：用戶通過開源數(shù)據(jù)可視化工具，用Ajax技術(shù)向服務(wù)端對數(shù)據(jù)進行請求，服務(wù)端使用Servlet語言對請求條件進行接收，并向數(shù)據(jù)庫發(fā)送查詢請求，之后通過Java的Mysql適配器訪問地震目錄數(shù)據(jù)庫得到數(shù)據(jù)，數(shù)據(jù)請求完成后通過Servlet把數(shù)據(jù)解譯成對象，利用Json格式轉(zhuǎn)化工具把對象封裝成數(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)。這幾個模塊系統(tǒng)可以把地震目錄的基本特征數(shù)據(jù)以及統(tǒng)計結(jié)果等全面地進行展示，滿足用戶對地震目錄數(shù)據(jù)的基本需求。

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

表格顯示系統(tǒng)是用JqGrid開源js庫以表格形式展示地震目錄數(shù)據(jù)系統(tǒng)，表格中顯示了地震的發(fā)震日期、發(fā)震時間、震中緯度、震中經(jīng)度、震級、震源深度以及震中位置。系統(tǒng)可以通過選擇時間段、震級范圍查詢符合條件的地震數(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ù)時，以canvas實心圓形式，根據(jù)地震震級大小和經(jīng)緯度來設(shè)置展示樣式，實現(xiàn)地震位置和大小的同時展示。當(dāng)鼠標(biāo)點擊實心圓時，系統(tǒng)右側(cè)的列表會對應(yīng)閃爍顯示該地震的詳細情況，同時實心圓變色；反之，當(dāng)鼠標(biāo)點擊列表中的地震信息時，地圖中心點會自動漫游至該地震對應(yīng)的實心圓位置，同時實心圓變色。通過該系統(tǒng)實現(xiàn)的地震目錄展示，可為用戶提供地震位置、大小及其他詳細情況的互動查詢，增加了用戶對地震目錄數(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)為時間，縱坐標(biāo)為震級的模式將地震目錄數(shù)據(jù)展示成M-T圖樣式，相比于靜態(tài)的M-T圖具有生成速度快、設(shè)置條件速度快的特點。用戶可以拖動M-T圖右側(cè)以及底部的滑動條進行時間段和震級段的選擇，也可以通過滑動條的長度對時間段和震級段進行調(diào)整，達到不同尺度的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)為時間，縱坐標(biāo)為按照某一震級條件設(shè)置的統(tǒng)計數(shù)展示地震頻次圖樣式。系統(tǒng)通過設(shè)置最小震級來統(tǒng)計最小震級以上的地震頻次，通過拖動頻次圖右側(cè)以及底部的滑動條進行時間段和震級段的選擇，也可以通過滑動條的長度對時間段和最小震級以上的震級段進行調(diào)整，達到不同尺度的頻次圖快速生成(見圖5)。

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

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

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

4 結(jié)語

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