仇尚媛 周 浩 王 春 郝詠梅

（中國哈爾濱150090黑龍江省地震局）

地震數(shù)據(jù)地圖化動(dòng)態(tài)顯示

仇尚媛 周 浩 王 春 郝詠梅

（中國哈爾濱150090黑龍江省地震局）

使用ASP和JQUIRY等語言，傳遞少量或大量后臺(tái)數(shù)據(jù)，快速推送到前臺(tái)地圖頁面，當(dāng)鼠標(biāo)掠過前臺(tái)顯示頁面內(nèi)任意某個(gè)小圖片時(shí)，顯示其數(shù)據(jù)信息和相應(yīng)大圖片。本文以地震系統(tǒng)應(yīng)急避難場(chǎng)所數(shù)據(jù)和地震目錄數(shù)據(jù)為例，闡述地震數(shù)據(jù)動(dòng)態(tài)地圖化頁面顯示的實(shí)現(xiàn)過程。

百度地圖API；地震應(yīng)急避難場(chǎng)；ASPJSON；JQUIRY

0 引言

百度地圖API技術(shù)是一套由JavaScript語言編寫的應(yīng)用程序接口，幫助在網(wǎng)站中構(gòu)建功能豐富、交互性強(qiáng)的地圖應(yīng)用。百度地圖技術(shù)對(duì)用戶具有強(qiáng)大的吸引力——靈活、快捷、方便、斷網(wǎng)少。據(jù)了解，地震系統(tǒng)當(dāng)前只有廣東省地震局等少數(shù)單位應(yīng)用百度地圖技術(shù)。

地震系統(tǒng)數(shù)據(jù)信息與地圖結(jié)合應(yīng)用普遍，如震中圖動(dòng)態(tài)顯示、地震烈度圖、地震應(yīng)急場(chǎng)所位置及信息顯示等。地震數(shù)據(jù)格式種類較多，如地震目錄數(shù)據(jù)、地震避難場(chǎng)所數(shù)據(jù)、前兆分鐘值、小時(shí)值數(shù)據(jù)等，很多數(shù)據(jù)基于地圖顯示（趙曦等，2014），且地圖化動(dòng)態(tài)顯示要求較高，如震中圖。一條地震目錄信息包含時(shí)間、地點(diǎn)（經(jīng)緯度）、震級(jí)、精度等參數(shù)，如果將幾十條甚至上萬條信息同時(shí)標(biāo)注在一幅地圖上，對(duì)前后臺(tái)數(shù)據(jù)處理能力要求較高，與單條數(shù)據(jù)處理方式不同（祝媛媛，2015）。綜合應(yīng)用ASP（林風(fēng)等，1999）、JSON、JQUIRY和Baidu Map技術(shù)（http://lbsyun.baidu.com/，2015），以地震避難場(chǎng)所數(shù)據(jù)和地震目錄數(shù)據(jù)為例（王海英等，2014），闡述具體實(shí)現(xiàn)過程，前者一次可地圖化顯示巨量數(shù)據(jù)，后者只對(duì)一條地震目錄信息進(jìn)行圖形化顯示。

1 批量數(shù)據(jù)地圖化顯示

因防震減災(zāi)工作要求，中國各省市縣均不同程度規(guī)劃建設(shè)或改建地震避難場(chǎng)所。黑龍江省地震避難場(chǎng)所約294處，將數(shù)據(jù)信息同時(shí)輸出到用戶頁面，有利于地震應(yīng)急網(wǎng)上查詢及搜索工作的開展。以此為例，闡述地震信息批量數(shù)據(jù)的地圖化動(dòng)態(tài)顯示。

1.1 處理過程

（1）構(gòu)建地震避難場(chǎng)所信息表?；赟QL Server 2012建立后臺(tái)數(shù)據(jù)庫，建立Emergency_Shelter地震避難場(chǎng)所信息點(diǎn)數(shù)據(jù)庫表，設(shè)置字段和值，如："Objectid":1，"Area_ size":"28000.00000000000"，"Useage"："廣場(chǎng)"，"Category":"III"，"Area_name":"大興安嶺加格達(dá)奇區(qū)世紀(jì)廣場(chǎng)"，“PHOTO”：“m”。PHOTO字段為庫表里場(chǎng)地圖片位置，也可增加場(chǎng)地信息等內(nèi)容，生成應(yīng)急避難場(chǎng)所指示標(biāo)志見圖1，用戶點(diǎn)擊信息窗會(huì)看到場(chǎng)地圖片及信息內(nèi)容。

圖1 生成應(yīng)急避難場(chǎng)所指示標(biāo)志Fig.1 Generated indication of emergency shelter

（2）轉(zhuǎn)成JSON格式數(shù)據(jù)字符串。使用ASP（或其他語言，如PHP）讀取并生成符合JSON數(shù)據(jù)格式的字符串（或轉(zhuǎn)為對(duì)象），如生成大興安嶺加格達(dá)奇世紀(jì)廣場(chǎng)，代碼為

JSON數(shù)據(jù)可使用ASP JSON（http://code.google.com/p/aspjson/）自動(dòng)生成，目前較新文件為JSON_2.0.4.asp。建立my_tojson.asp文件，增加以下語句

QueryToJSON（myconnjson，"select * from ［Emergency_ Shelter］"）.Flush

執(zhí)行my_tojson.asp文件，生成以下JSON格式數(shù)據(jù)。

［｛"Objectid":1，"Area_size":"28000.00000000000"，"Useage":"u5E7Fu573A"，"Category":"III"，"Area_ name":"u5927u5174u5B89u5CADu52A0u683Cu8FBEu5947u533Au4E16u7EAAu5E7F u573A"，"Area_Latitude":"50.42000000000"，"Area_Longitude":"124.14000000000"，"Area_remark":null｝，｛"Obj ectid":2，"Area_size":"17200.00000000000"，"Useage":"u516Cu56ED"，"Category":"III"，"Area_name":"u5927 u5174u5B89u5CADu52A0u683Cu8FBEu5947u533Au513Fu7AE5u516Cu56ED"，"Area_Latitude":"50.4 2300000000"，"Area_Longitude":"124.11300000000"，"Area_remark":null｝，......

（3）使用JSON對(duì)象生成百度地圖，具體過程為：①定義＜DIV＞元素作為創(chuàng)建地圖的容器，如adaiContent；②定義＜button＞類型作為命令啟動(dòng)按鈕，如button；③頁面空載后，執(zhí)行命令按鈕，通過jQuery get（）方法加載my_tojson.asp文件，抓到服務(wù)器返回?cái)?shù)據(jù)data，經(jīng)jQuery eval（）函數(shù)轉(zhuǎn)換JSON字符（即偽對(duì)象），生成JSON格式的$jsondata_ obj對(duì)象，由$jsondata_obj對(duì)象獲得經(jīng)緯度數(shù)據(jù)，定義覆蓋物類型，標(biāo)注到地圖所在經(jīng)緯度點(diǎn)上，其他數(shù)據(jù)可通過事件觸發(fā)由信息窗顯示。

批量地震數(shù)據(jù)地圖化顯示代碼（百度地圖API1.3開發(fā)指南）如下

JAVASCRIPT代碼主要結(jié)合jQuery和Baidu Map API完成。由于本文所用避難場(chǎng)點(diǎn)數(shù)據(jù)的經(jīng)緯度值是GPS坐標(biāo)，非Baidu坐標(biāo)值，故使用BMapLib.MapWrapper類下的addOverlay（）方法實(shí)現(xiàn)標(biāo)注。

對(duì)代碼進(jìn)行斷點(diǎn)測(cè)試，可在map對(duì)象上添加一個(gè)click或其他事件的監(jiān)聽函數(shù)，點(diǎn)擊地圖上該位置，監(jiān)聽函數(shù)通過控制臺(tái)輸出當(dāng)前點(diǎn)擊位置；沒有控制臺(tái)，可使用alert（）把point的lng和lat屬性或其他值輸出。

黑龍江省部分地震應(yīng)急避難場(chǎng)（收集294處數(shù)據(jù)信息）顯示效果截圖見圖2。

圖2 黑龍江省部分地震應(yīng)急避難場(chǎng)（294處）顯示效果Fig.2 Parts of earthquake emergency asylum field in Heilongjiang Province（294）display screenshot

1.2 技術(shù)問題

（1）文件中＜head＞與＜/head＞區(qū)間內(nèi)，加載 代 碼＜script type="text/javascript" src="inc/ jquery-1.8.1.min.js"＞＜/script＞和 ＜script type="text/javascript" src="inc/MapWrapper.js"＞＜/script＞（本文使用1.8.1版本的jquery）。此處探討一個(gè)問題，當(dāng)筆者把地圖尺寸放大至500 m時(shí)，發(fā)現(xiàn)標(biāo)注點(diǎn)與信息窗口點(diǎn)位存在約1.5km距離，無論調(diào)錨點(diǎn)還是其他可調(diào)整處，二者間始終維持在此距離，不知何故？正常應(yīng)該是同時(shí)變化。

（2）采用另一種實(shí)現(xiàn)方法，即每個(gè)點(diǎn)的要素循環(huán)生成所需標(biāo)注及信息，但對(duì)瀏覽器而言，每個(gè)信息窗均顯示最后循環(huán)點(diǎn)位數(shù)據(jù)，而非各點(diǎn)自身數(shù)據(jù)，與javascript函數(shù)作用域有關(guān)，因?yàn)椤癱lick”事件或其他事件操作時(shí)才會(huì)觸發(fā)，而此時(shí)infoWindow已遍歷到最后一個(gè)對(duì)象。采用閉包原理可以解決以上問題，即在信息窗循環(huán)外加function（i） ｛//循環(huán)語句｝（i），但首先需將GPS坐標(biāo)轉(zhuǎn)百度坐標(biāo)。

（3）GPS坐標(biāo)轉(zhuǎn)百度坐標(biāo)。百度對(duì)外接口的坐標(biāo)系非GPS采集的真實(shí)經(jīng)緯度，本文場(chǎng)點(diǎn)坐標(biāo)均由GPS設(shè)備采集，需要通過坐標(biāo)轉(zhuǎn)換接口進(jìn)行轉(zhuǎn)換，才能應(yīng)用到百度地圖上。

2 單條數(shù)據(jù)地圖化顯示

單條地震目錄動(dòng)態(tài)生成震中圖，相對(duì)簡(jiǎn)單。部分代碼如下。

通過查詢處理程序（略）生成地震目錄頁面，見圖3。用戶點(diǎn)擊所需查看的地震目錄時(shí)，彈出相應(yīng)地圖，顯示對(duì)應(yīng)的可縮放震中圖及標(biāo)注說明窗，見圖4。

圖3 地震目錄查詢結(jié)果Fig.3 Earthquake catalog query results

圖4 2014年1月8日四川省某地震震中位置Fig.4 A quake of Sichuan Province on Jan.8，2014

3 結(jié)束語

百度提供地圖API示例可供參考，但目前地震系統(tǒng)應(yīng)用較少，查詢后臺(tái)數(shù)據(jù)庫的例子不多，本文對(duì)有此需求者提供ASP、JQUIRY實(shí)現(xiàn)思路，避免使用AJAX開發(fā)的繁雜。地震系統(tǒng)開發(fā)前景廣闊，Baidu Map API無疑給出具體解決方案。本文所討論的解決方法及實(shí)現(xiàn)模塊可集成到防震減災(zāi)平臺(tái)網(wǎng)內(nèi)，以滿足不同的地震業(yè)務(wù)要求。

林風(fēng)，李維章，趙莉.動(dòng)態(tài)網(wǎng)站設(shè)計(jì)捷徑---ASP［M］.西安電子科技大學(xué)出版社，1999.

王海英，等.地震后應(yīng)急避難場(chǎng)所的運(yùn)行管理［J］.防災(zāi)科技學(xué)院學(xué)報(bào)，2014，16（12）：59-75.

趙曦，等.基于WebGIS的地震數(shù)據(jù)服務(wù)系統(tǒng)建設(shè)及關(guān)鍵技術(shù)研究［J］.災(zāi)害學(xué)，2014，（3）：31-36.

祝媛媛.地震數(shù)據(jù)可視化技術(shù)的優(yōu)化研究與開發(fā)［J］.西部探礦工程，2015，27（4）：22-27.

Dynamic display based on map of seismic data

Qiu Shangyuan，Zhou Hao，Wang Chun and Hao Yongmei
（Earthquake Administration of Heilongjiang Province，Harbin 150090，China）

This article describes a specific program how to use ASP and JQUIRY and other languages to deliver a small amount or a large number of back-end data and quickly pushed to the foreground map page，and when the mouse passing front display within a page arbitrarily small pictures will show the thumbnail and the corresponding data representative of the large picture.In this paper，we use seismic system emergency shelters and earthquake catalog data for example describes the processes how to achieve dynamic mappable pages.

Baidu Map API，earthquake emergency shelter，ASPJSON，JQUIRY

10.3969/j.issn.1003-3246.2015.05.026

仇尚媛（1984—），女，黑龍江人，工程師，主要從事地震宣傳教育工作

地震科技星火計(jì)劃項(xiàng)目（XH1011Y）

本文收到日期：2015-03-12