基于開源工具的地震目錄可視化系統設計與實現

羅 勇，付紅云

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

0 引言

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

數據可視化技術的起源可追溯到20世紀50年代的計算機圖形學時代[1]，隨著計算機、互聯網技術的發展，數據可視化技術以及應用工具已經由單機轉向互聯網、靜態轉向動態。目前的開源數據可視化JavaScript庫包含表格、曲線、柱狀圖、位置等多種表現方式。文章根據地震目錄的數據特點，利用開源數據可視化JavaScript庫的優勢，以JavaWeb為后臺程序設計語言，結合MySql數據庫，設計了一套B/S架構的地震目錄數據多種展現方式的可視化系統。

1 開源JavaScript庫

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

1.1 jqGrid

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

1.2 ECharts

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

1.3 Plotly

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

1.4 高德地圖 JS API

高德地圖 JS API 是一套 JavaScript 語言開發的地圖應用編程接口，移動端、PC端一體化設計，一套 API 兼容眾多平臺。目前 JS API 免費開放使用。JS API 提供了2D、3D地圖模式，滿足絕大多數開發者對地圖的展示、地圖自定義、圖層加載、點標記添加、矢量圖形繪制的需求，同時提供 POI 搜索、路線規劃、地理編碼、行政區查詢、定位等眾多開放服務接口[3]。

2 系統架構和工作流程

2.1 系統架構

按照系統功能需求，系統由數據訪問層、數據處理層及用戶訪問層組成。

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

(1) 操作系統：windows server2008。

(2) 數據庫：Mysql。

(3) Web服務器：Tomcat。

2.2 工作流程

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

3 系統功能

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

3.1 表格顯示系統

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

圖1 系統工作流程圖Fig.1 System work flow diagram

圖2 表格顯示系統Fig.2 Table display system

3.2 位置展示系統

位置展示系統是通過高德地圖API加載地震目錄數據，在加載數據時，以canvas實心圓形式，根據地震震級大小和經緯度來設置展示樣式，實現地震位置和大小的同時展示。當鼠標點擊實心圓時，系統右側的列表會對應閃爍顯示該地震的詳細情況，同時實心圓變色；反之，當鼠標點擊列表中的地震信息時，地圖中心點會自動漫游至該地震對應的實心圓位置，同時實心圓變色。通過該系統實現的地震目錄展示，可為用戶提供地震位置、大小及其他詳細情況的互動查詢，增加了用戶對地震目錄數據學習和研究的手段(見第13頁圖3)。

圖3 位置展示系統Fig.3 Position display system

3.3 M-T圖展示系統

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

圖4 M-T圖展示系統Fig.4 M-T diagram display system

3.4 頻次圖展示系統

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

3.5 基于地圖的地震目錄三維可視化系統

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

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

4 結語

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