顏庭柏，姚 迪，沈 澄

（1.南京市氣象局 信息網(wǎng)絡中心，江蘇 南京 200009；2.南京市六合氣象局 氣象臺，江蘇 南京 200009）

保險、鐵路、電力、航運、建筑、工礦、商場等行業(yè)對氣象的要求和依賴越來越高。提供天氣預報和專業(yè)氣象信息服務的前提是要提供快速、可靠、直觀的天氣實況信息。雖然氣象專業(yè)軟件MICAPS可以顯示基準氣象站的天氣實況，但對于由各地方自行建設的自動氣象站和雨量站的顯示需要開發(fā)軟件來實現(xiàn)。本文基于Google Map JavaScript API 第3版開發(fā)了天氣實況顯示的Google Map服務, 實現(xiàn)了添加地圖控件、事件響應與處理、本地搜索等常用功能，使用戶可以對區(qū)域內(nèi)溫度、雨量等氣象數(shù)據(jù)一目了然。

1 Google Map API和Ajax概述

1.1 Google Map API

Google Map是Google公司開發(fā)的一款虛擬地圖軟件,它有覆蓋全球的航天和衛(wèi)星圖片,其衛(wèi)星影像圖解析度高、更新快，最為普通用戶關注的是它提供的服務是免費的。相應的Google Map API是Google公司提供的一套用來操作Google Map的地圖應用接口函數(shù)庫,它有多個版本。本系統(tǒng)使用的Google Map JavaScript API 第3版由JavaScript腳本實現(xiàn)，提供了基于Google Map的多種地圖模式(交通、衛(wèi)星影像、地形等)的各種層面的調(diào)用和擴展接口。利用這些接口函數(shù)庫，用戶可以快速地建立自己的網(wǎng)站地理信息系統(tǒng)。Google Maps API 提供的最重要的類是Map, 它代表頁面上的地圖對象，用戶可以根據(jù)需要在頁面上使用多個 Map 的實例[1]。API開發(fā)包提供給用戶的動態(tài)函數(shù)庫讓開發(fā)者可以為每個實例提供一些指定的事件, 并利用靜態(tài)方法GEventaddListener或GEvent.bind監(jiān)視這些事件。此外API還提供GMarker、GIcon、GPolyline、GLargeMapControl等類來分別實現(xiàn)標注、標記、折線、控件等功能[2]。

1.2 Ajax技術

Ajax是Asynchronous JavaScript 和XML 的簡稱，也就是異步的JavaScript 和XML 處理技術[3]。Ajax是一個客戶端技術，通過調(diào)用HttpRequst 實現(xiàn)與服務器的異步通信，并最終在網(wǎng)頁中實現(xiàn)豐富友好的用戶界面。因此，Ajax 并不是一種技術，而是已經(jīng)成功地用于現(xiàn)代瀏覽器中的若干成功技術的組合。這些技術包 括：XHTML、CSS、DOM、XML和XSLT以 及JavaScript等。傳統(tǒng)的基于Web的應用程序，每次向服務器發(fā)出請求后，該頁面將全部刷新以顯示新內(nèi)容；基于Ajax 異步方法的因特網(wǎng)服務，客戶端Web頁面可以發(fā)送多個服務器請求，請求發(fā)出后，服務器根據(jù)客戶端發(fā)出的請求作出回應，只返回對客戶請求所需的數(shù)據(jù)信息，從而實現(xiàn)頁面的局部刷新而不是全部刷新[4]。

2 系統(tǒng)總體設計

2.1 系統(tǒng)結(jié)構(gòu)

本系統(tǒng)是一個典型的基于Ajax技術的Google Maps應用模型，大致分為5個層次： 客戶端瀏覽器、Ajax引擎、Google Maps服務器、Web服務器和數(shù)據(jù)庫[6]。系統(tǒng)網(wǎng)絡體系結(jié)構(gòu)層次如下：

1）客戶端瀏覽器。它的任務是訪問Web 服務器中的相關頁面，并請求地圖數(shù)據(jù)，顯示包含天氣實況的地圖信息。

2）Ajax引擎，處于用戶與服務器之間。它的主要任務是實現(xiàn)頁面無刷新的傳遞，解決網(wǎng)絡交互過程中用戶長時間的等待以及數(shù)據(jù)更新時屏幕閃爍的問題。

3）Google Maps 服務器。它在頁面加載之后顯示從Google Maps 服務器獲得地圖數(shù)據(jù)。

4）Web 服務器，接收到來自瀏覽器端的請求后，對請求進行處理、分析、計算等。如果需要數(shù)據(jù)庫中的數(shù)據(jù)，則對數(shù)據(jù)庫中的信息數(shù)據(jù)進行一系列操作處理，并把處理后的數(shù)據(jù)返回給客戶端瀏覽器，連同地圖信息一起呈現(xiàn)給用戶。

5）數(shù)據(jù)庫，用以存儲天氣實況信息的數(shù)據(jù)庫。本系統(tǒng)使用的是SQL Server 2005。系統(tǒng)結(jié)構(gòu)如圖1所示。

圖1 系統(tǒng)結(jié)構(gòu)圖

2.2 系統(tǒng)功能

1）可對地圖進行平移縮放、查看比例尺、切換不同類型地圖以及縮略圖等方便快捷的操作。還可通過定制控件來改變控件的外觀等屬性，從而實現(xiàn)個性化的地圖界面。

2）在網(wǎng)站中根據(jù)需要設置了不同屬性天氣實況數(shù)據(jù)的分類查看功能, 把溫度、濕度、氣壓等要素分布在不同圖層以方便用戶查詢。

3）通過添加自定義的控件及控件事件，實現(xiàn)快速導航功能，在系統(tǒng)中可以通過導航按鈕將顯示的界面快速切換到不同的地理區(qū)域。

4）在提供地圖顯示功能的同時，提供數(shù)據(jù)列表顯示、歷史資料查詢等功能。

3 系統(tǒng)具體實現(xiàn)

3.1 地圖初始化工作

本系統(tǒng)使用的是Google Maps JavaScript 應用程序接口，動態(tài)網(wǎng)頁的腳本用JavaScript編寫，在網(wǎng)頁文件中使用標志包含JavaScript腳本。首先創(chuàng)建一個DIV元素來存放Google Map的地圖，為了確保系統(tǒng)在完全載入網(wǎng)頁后再顯示，程序設計中在HTML網(wǎng)頁的元素收到onload事件后，執(zhí)行initialize函數(shù)來初始化地圖，構(gòu)建 Map 實例對象。初始化工作中包括對地圖中心經(jīng)緯度、地圖類型的確定以及添加地圖縮放等控件。初始化要實現(xiàn)的功能有確定地圖中心經(jīng)緯度、地圖放大倍數(shù)、地圖中心位置和地圖顯示的類型等信息。

var myLatlng = new google.maps.LatLng(32.0000, 118.7853);

var myOptions =

{ zoom: 12,

center: myLatlng,

mapTypeId: google.maps.MapTypeId.TERRAIN,

scrollWheel: false,

mapTypeControl: true

}

3.2 添加Ajax功能

為了客戶端在瀏覽網(wǎng)頁時不重復加載地圖，在網(wǎng)頁的首部添加AjaxControlToolkit 動態(tài)鏈接庫的引用。

ASP.NET中ScriptManager控件用于頁面的客戶端腳本資源，每一個使用ASP.NET技術的頁面都需要添加ScriptManager控件，來標明該頁面使用的是ASP.NET Ajax框架，ScriptManager控件的使用語法如下：

UpdatePanel控件是用來實現(xiàn)頁面的無刷新技術的控件。開發(fā)時只要在UpdatePanel控件中包含需要刷新的區(qū)域，則每次瀏覽器向服務器端發(fā)出請求后，只有該面板內(nèi)的部分才會被 刷新，以此代替了以往整個頁面都需要回調(diào)來獲取請求的方式。在本系統(tǒng)中，將列表部分放在Updatepanel面板內(nèi)，在數(shù)據(jù)更新時，只有列表部分會自動刷新數(shù)據(jù)。

3.3 添加DOM控件及其事件

除了地圖縮放、類型選擇等API控件的樣式和位置外，在Google Map中還可以創(chuàng)建自己的控件以處理與用戶的交互操作?？丶釉诘貓D之上的絕對位置處，所以從本質(zhì)上講控件只是一個在地圖上具有絕對位置的DIV元素，它會向用戶顯示某個用戶界面，并處理與用戶或地圖的交互（通常通過某個事件處理程序）。在本系統(tǒng)中創(chuàng)建了幾個定位控件，當點擊事件發(fā)生時，按控件的要求將地圖的中心位置定位到對應的經(jīng)緯度，以此方便用戶在不同地理區(qū)域間切換。創(chuàng)建的步驟是：

1）為要顯示的控件元素定義適當 CSS。

2）針對地圖屬性更改用戶事件，本系統(tǒng)中使用Click 事件，通過事件處理程序處理與用戶的交互。

3）創(chuàng)建一個