基于地圖API的校園在線電子地圖設(shè)計與實現(xiàn)

程 鋼,梁曉莉,張得群，蔡圣準(zhǔn)

(1.河南理工大學(xué) 礦山空間信息技術(shù)國家測繪地理信息局重點實驗室，河南 焦作 454000;2.河南理工大學(xué) 測繪與國土信息工程學(xué)院，河南 焦作 454000)

基于地圖API的校園在線電子地圖設(shè)計與實現(xiàn)

程 鋼1,2,梁曉莉1,2,張得群2，蔡圣準(zhǔn)2

(1.河南理工大學(xué) 礦山空間信息技術(shù)國家測繪地理信息局重點實驗室，河南 焦作 454000;2.河南理工大學(xué) 測繪與國土信息工程學(xué)院，河南 焦作 454000)

大學(xué)城的建設(shè)和高校規(guī)模的擴(kuò)建，給眾多師生和來訪者造成諸多不便。校園電子地圖為廣大師生及來訪者提供地理參照和導(dǎo)航作用，為校園數(shù)字化建設(shè)提供基本的地理框架。針對現(xiàn)有主流地理信息系統(tǒng)平臺價格昂貴且對開發(fā)者技術(shù)要求高等局限性，文中基于地圖搜索引擎提供的API進(jìn)行校園在線電子地圖的設(shè)計與開發(fā)，探討將地圖API與第三方數(shù)據(jù)相結(jié)合實現(xiàn)局域在線地圖服務(wù)的關(guān)鍵技術(shù)，以河南理工大學(xué)在線電子地圖的構(gòu)建為例，驗證相關(guān)技術(shù)和方法的可行性。

地圖API；校園；在線電子地圖；設(shè)計；開發(fā)

近年來，隨著經(jīng)濟(jì)發(fā)展以及國家對高等教育投入的增加，高校不斷擴(kuò)招和合并，規(guī)模越來越大，校園的基礎(chǔ)設(shè)施在原有基礎(chǔ)上不斷擴(kuò)建，多校區(qū)、多學(xué)部甚至異地辦學(xué)等布局形式，造成職能部門、教學(xué)區(qū)、宿舍區(qū)、服務(wù)區(qū)等眾多的部門設(shè)施混合分布在校園中。為方便廣大師生和來訪人員能快速、準(zhǔn)確地查詢并獲取校園及其周邊的地理信息，以及為校園的管理、規(guī)劃、設(shè)計提供準(zhǔn)確而詳細(xì)的數(shù)據(jù)，有必要開發(fā)校園在線地圖服務(wù)系統(tǒng)。數(shù)字地圖是數(shù)字校園系統(tǒng)中的一個子系統(tǒng)[1]，是校園數(shù)字化建設(shè)的重要內(nèi)容之一，是加速實現(xiàn)學(xué)校管理和辦公自動化、現(xiàn)代化、數(shù)字化，提高管理水平和效率，實現(xiàn)信息和資源共享的重要舉措，同時也是樹立學(xué)校品牌，擴(kuò)大學(xué)校影響的重要方式。主流地理信息系統(tǒng)軟件為校園在線電子地圖的開發(fā)提供了完備的組件和豐富的功能[2-4]。然而主流軟件開發(fā)過程復(fù)雜、資金投入昂貴、對開發(fā)者技術(shù)要求較高，不適于小型、公益性在線電子地圖系統(tǒng)的構(gòu)建[5]。各通用地圖搜索引擎(百度地圖、谷歌地圖)雖然方便快捷但由于面向廣大民眾，針對校園的專題分類較少，信息較為概略，難以充分全面地表達(dá)校園的專題信息。然而其提供的地圖API，為用戶定制個性化地圖服務(wù)，實現(xiàn)專題信息與地圖服務(wù)整合提供了捷徑。本文將校園專題數(shù)據(jù)庫嵌入搜索引擎提供的基本地理框架之中，利用地圖API提供的網(wǎng)絡(luò)編程接口更新底圖，實現(xiàn)專題數(shù)據(jù)分類、查詢、量算等基本功能，既豐富了校園空間信息服務(wù)的內(nèi)容又節(jié)省開發(fā)成本，實現(xiàn)校園信息的個性化共享和發(fā)布。本文以河南理工大學(xué)為例，采用百度地圖API對校園在線電子地圖開發(fā)關(guān)鍵技術(shù)進(jìn)行探討和實現(xiàn)。

1 基于地圖API的校園在線電子地圖基本架構(gòu)

在線地圖搜索引擎按照B/S體系結(jié)構(gòu)搭建地圖服務(wù)平臺，通過網(wǎng)絡(luò)訪問服務(wù)提供的地圖顯示、漫游、縮放等功能。文中校園電子地圖以該通用地圖服務(wù)平臺為基礎(chǔ)，構(gòu)建應(yīng)用數(shù)據(jù)庫和數(shù)據(jù)服務(wù)器，設(shè)計符合校園用戶使用習(xí)慣的良好的客戶端界面，通過調(diào)用地圖API實現(xiàn)在線電子地圖的各種交互功能，其總體架構(gòu)如圖1所示。

圖1 校園在線電子地圖總體架構(gòu)

客戶層:包括客戶端和瀏覽器，提供地圖瀏覽和查詢界面，負(fù)責(zé)用戶與一臺及多方應(yīng)用服務(wù)器的交互，將訪問和查詢請求發(fā)送給服務(wù)器，并對返回結(jié)果進(jìn)行可視化表達(dá)。

應(yīng)用層:負(fù)責(zé)用戶請求處理，主要依靠應(yīng)用服務(wù)器完成工作。客戶層提出請求后，應(yīng)用服務(wù)器將啟動相應(yīng)進(jìn)程響應(yīng)，并將處理結(jié)果動態(tài)生成HTML代碼，返回給客戶端。如果客戶端提交的請求包括數(shù)據(jù)處理操作，應(yīng)用服務(wù)器還需與數(shù)據(jù)服務(wù)器交互完成數(shù)據(jù)處理過程。

數(shù)據(jù)層:負(fù)責(zé)空間數(shù)據(jù)、屬性數(shù)據(jù)的存儲、響應(yīng)和更新處理，由數(shù)據(jù)服務(wù)器完成。數(shù)據(jù)請求處理完畢后，將結(jié)果返回應(yīng)用服務(wù)器，由應(yīng)用服務(wù)器傳回客戶端，完成整個事件處理過程。

2 校園電子地圖的設(shè)計

2.1 界面及功能設(shè)計

考慮到校園在線電子地圖載體及其交互性，界面應(yīng)符合操作簡單、互動性強(qiáng)且美觀大方等特點[6]，包括地圖顯示區(qū)、縮略圖區(qū)、選擇列表查詢區(qū)以及工具條等視圖區(qū)域。地圖顯示區(qū)，是地圖操作和展示的主要區(qū)域，是校園地理環(huán)境的最直觀展示，具有地圖縮放、平移、比例尺等基本地圖控件。縮略圖用于展現(xiàn)當(dāng)前窗口與校園區(qū)域的拓?fù)潢P(guān)系，為用戶瀏覽提供方便。選擇列表區(qū)以樹型結(jié)構(gòu)展現(xiàn)各個專題并提供搜索框，為用戶檢索提供靈活的方式。工具條主要用來提供測距、地圖輸出、打印、添加自定義標(biāo)記等輔助功能。

2.2 專題分類

校園在線電子地圖承載著豐富的內(nèi)容和信息，為便于用戶的使用和查詢，需要對其涉及的內(nèi)容按照專題進(jìn)行分類。本文將校園電子地圖內(nèi)容分為教學(xué)院系、管理機(jī)構(gòu)、文體休閑、學(xué)生公寓、家屬住宅、生活服務(wù)、校園周邊等7個大類，并在大類中按照內(nèi)容的多少劃分為多個小類，如圖2所示。

圖2 校園電子地圖專題分類

2.3 數(shù)據(jù)存儲

數(shù)據(jù)是信息系統(tǒng)的“血液”，是地圖提供查詢和分析的基本素材。電子地圖中的地理實體同時具有空間特征和屬性特征，需要對空間數(shù)據(jù)和屬性數(shù)據(jù)進(jìn)行統(tǒng)一存儲和管理。顧及校園區(qū)域的空間范圍和數(shù)據(jù)量，本文采用XML文件和關(guān)系型數(shù)據(jù)庫混合方式存儲空間和屬性數(shù)據(jù),利用XML技術(shù)彌補(bǔ)關(guān)系型數(shù)據(jù)庫對空間數(shù)據(jù)表達(dá)能力不足的缺點。XML作為一種可擴(kuò)展置標(biāo)語言，在數(shù)據(jù)存取上比以往數(shù)據(jù)庫具有更大的優(yōu)越性，不僅能實現(xiàn)不同平臺間的數(shù)據(jù)交換和數(shù)據(jù)共享，而且具有更強(qiáng)大的檢索功能[7]。

空間數(shù)據(jù)可抽象為點、線、面3種基本類型，每一個要素具有唯一的標(biāo)識碼，用以與屬性數(shù)據(jù)關(guān)聯(lián)。點數(shù)據(jù)用于表達(dá)地物中心坐標(biāo)；線數(shù)據(jù)用于描述線性要素，如道路中心線等；面數(shù)據(jù)用于描述教學(xué)區(qū)、宿舍區(qū)、家屬區(qū)、生活服務(wù)區(qū)、文體休閑區(qū)等空間范圍。下面以面數(shù)據(jù)為例說明空間數(shù)據(jù)的存儲格式。

……

其中是根結(jié)點，每個XML文件必須有一個根結(jié)點，是一個面要素結(jié)點，id屬性就是該面要素的ID號，需要與Access表中的ID號一致；的子結(jié)點用于表示面要素的名稱；用于表示面空間范圍，由多個子結(jié)點構(gòu)成；結(jié)點又分別由表示X、Y坐標(biāo)值的和子結(jié)點構(gòu)成。其結(jié)構(gòu)如圖3所示。

圖3 面要素空間數(shù)據(jù)存儲結(jié)構(gòu)

屬性數(shù)據(jù)表達(dá)了地物要素的地理語義和屬性信息，根據(jù)專題分類后并采用專題名稱拼音首字母對各數(shù)據(jù)表進(jìn)行命名，如表1所示。

數(shù)據(jù)表存儲了對地物進(jìn)行定位和表達(dá)的必要數(shù)據(jù)，包括識別標(biāo)志、名稱、中心點坐標(biāo)、信息窗內(nèi)容等信息。面狀要素表結(jié)構(gòu)如表2所示。

表1 專題命名表

表2 面要素屬性表結(jié)構(gòu)

3 關(guān)鍵技術(shù)與實現(xiàn)

3.1 關(guān)鍵技術(shù)

3.1.1 ASP.NET與JavaScript

ASP.NET技術(shù)是由Microsoft公司的.NET技術(shù)具體化而來，基于模塊和組件，具有更好的可擴(kuò)展性與可定制性。ASP.NET改進(jìn)了配置，有效縮短了Web應(yīng)用程序的開發(fā)周期，其伸縮性、安全性、可靠性大大提高，且對不同瀏覽器提供了更好支持，可創(chuàng)造出更加動態(tài)而且伸縮性更強(qiáng)的應(yīng)用程序，更好地滿足公司的商業(yè)需求，并提供一個更加豐富的開發(fā)環(huán)境[8]。JavaScript是一種基于對象和事件驅(qū)動并具有相對安全性的客戶端腳本語言，用來給網(wǎng)頁添加動態(tài)功能，如響應(yīng)用戶的各種操作。

本研究采用ASP.NET技術(shù)進(jìn)行網(wǎng)站的設(shè)計開發(fā)，利用ADO.NET完成與自主建立的河南理工大學(xué)興趣點數(shù)據(jù)庫和數(shù)據(jù)文件的交互，數(shù)據(jù)采用上文所述的Access和XML文件相結(jié)合的方式存儲。前端采用CSS+Javascript進(jìn)行設(shè)計和開發(fā)，由CSS完成樣式格式控制，Javascript主要負(fù)責(zé)調(diào)用地圖API及與用戶的交互，并將服務(wù)器運行結(jié)果進(jìn)行包裝或再運算，進(jìn)而傳遞給用戶。下文為通過Javascript腳本調(diào)用簡單地圖服務(wù)：

ar map=new BMap.Map("hpumap");

map.centerAndZoom(new BMap.Point(113.273368, 35.19497), 18);

該代碼引入在線地圖API；創(chuàng)建地圖容器并設(shè)置其大小和尺寸；創(chuàng)建地圖實例，同時設(shè)置其中心位置和放大級別完成地圖初始化。這樣便可以顯示一個簡單的地圖界面，如圖4所示。后續(xù)可根據(jù)需求覆蓋新的地圖背景，增加興趣點信息以及增加新的功能等。

圖4 Javascript調(diào)用地圖API實例

3.1.2 地圖切片

地圖切片技術(shù)，指根據(jù)某一尺寸(如128，256像素等)和圖片格式(如JPEG，PNG等)，將某一比例尺某分辨率特定地理坐標(biāo)范圍內(nèi)的地圖切割成若干行及列的規(guī)則圖片。在服務(wù)器上構(gòu)建好瓦片地圖圖片庫之后，就可以脫離GIS平臺，通過現(xiàn)有的互聯(lián)網(wǎng)技術(shù)實現(xiàn)空間位置服務(wù)[9]。地圖切片技術(shù)可有效提高數(shù)據(jù)傳輸效率，改善用戶體驗效果。

由于百度地圖的遙感和線劃圖更新速度較慢，為了更新學(xué)校電子地圖底圖，本文將ArcMap制作而成的最新地圖數(shù)據(jù)轉(zhuǎn)換成柵格數(shù)據(jù)，按照金字塔形式進(jìn)行切片，并覆蓋于百度地圖之上。

切片前首先將圖像坐標(biāo)與地圖坐標(biāo)進(jìn)行匹配，再通過一定的切圖算法對某一縮放級別地圖進(jìn)行切片并保存成PNG等圖片格式。每個縮放級別的圖片放在一個文件夾下，文件夾直接采用地圖所在縮放級別命名。在文件夾內(nèi)圖片采用規(guī)則命名方式，如tile+x+"_"+y，其中x，y分別代表該圖塊在本級別下的圖塊編號。如第18級下某區(qū)域的結(jié)果如圖5所示。

圖5 切片結(jié)果及命名結(jié)果展示

通過TileLayer創(chuàng)建新圖層，利用其getTilesUrl方法便可以動態(tài)加載地圖切片，從而更新底圖。該方法參考代碼如下，它通過地圖圖塊編號和縮放級別返回圖片地址。

tileLayer.getTilesUrl = function (tileCoord， zoom) {

var x = tileCoord.x;

var y = tileCoord.y;

return 'tiles/' + zoom + '/tile' + x + '_' + y + '.png';

}

更新后的電子地圖與百度地圖的融合效果如圖6所示，該圖上半部分為百度地圖提供的原始影像圖，而下半部分為新添加的線劃圖，二者配準(zhǔn)效果較好。

圖6 校園地圖與百度底圖的融合

3.1.3 AJAX技術(shù)

AJAX(Asynchronous JavaScript and XML)是一種綜合技術(shù)，通過XHTML和CSS對內(nèi)容進(jìn)行標(biāo)準(zhǔn)化呈現(xiàn)，借助DOM實現(xiàn)動態(tài)顯示和交互，利用XML和XSTL進(jìn)行數(shù)據(jù)交換與處理，使用XMLHttpRequest對象進(jìn)行異步數(shù)據(jù)讀取，采用Javascript綁定和處理數(shù)據(jù)。

傳統(tǒng)Web應(yīng)用采用同步交互過程，客戶端向服務(wù)器發(fā)出請求，服務(wù)器返回一個HTML結(jié)果；用戶的每次請求，服務(wù)器都會重新下載整個頁面。遇到大數(shù)據(jù)量網(wǎng)站或帶寬受限時，用戶往往需要等待較長的響應(yīng)時間。AJAX在不打斷用戶當(dāng)前操作的情況下，進(jìn)行客戶端與服務(wù)器之間的數(shù)據(jù)傳輸，通過異步通信避免用戶等待過程，可大大提高用戶體驗[10]。

在APS.NET開發(fā)中，通過ScriptManager來管理異步請求，用來實現(xiàn)頁面的局部更新和對Web服務(wù)的調(diào)用等。利用RegisterClientScriptBlock()方法可以向 ScriptManager 控件注冊一個客戶端腳本塊，以便和 UpdatePanel 控件中的某個控件一起使用，然后將該腳本塊添加到頁面中。例如，向頁面加載地圖平移并顯示信息窗。

string js = "javascript:info1=new BMap.InfoWindow(" + si + ");";

js += "map1.openInfoWindow(info1," + "new BMap.Point(" + x + "," + y + "));";

js += "map1.panTo(new BMap.Point(" + x + "," + y + "));"; //將地物平移到視野中央

ScriptManager.RegisterClientScriptBlock(UP_List, typeof(UpdatePanel), "A", js, true);

這樣通過回調(diào)讀取數(shù)據(jù)，進(jìn)行地圖的平移和信息顯示，完成后端代碼與前端代碼的交互。基于AJAX的地物查詢顯示過程如下：

1)用戶輸入查詢關(guān)鍵詞并點擊搜索按鈕， 客戶端產(chǎn)生一個包含關(guān)鍵詞的異步請求。

2)服務(wù)器根據(jù)該關(guān)鍵詞檢索本地數(shù)據(jù)庫，并將其坐標(biāo)返回給客戶端。

3)客戶端根據(jù)坐標(biāo)平移地圖并顯示其信息。

3.2 主要功能實現(xiàn)

本文以河南理工大學(xué)為例，將ASP.net網(wǎng)絡(luò)開發(fā)與Javascript客戶端腳本調(diào)用相結(jié)合，使用百度地圖API進(jìn)行校園在線電子地圖設(shè)計與開發(fā)。

3.2.1 系統(tǒng)的主界面圖

本系統(tǒng)面向校園用戶提供動態(tài)、交互式小型電子地圖系統(tǒng)，主界面(見圖7)包括:標(biāo)題區(qū)、鷹眼區(qū)、地圖顯示區(qū)、專題列表查詢區(qū)以及工具條等。其中校園范圍的電子地圖底圖由河南理工大學(xué)最新校園地圖經(jīng)柵格化、分級切片后疊置到百度地圖框架生成。

3.2.2 地圖查詢定位功能

通過使用百度地圖API自帶的本地搜索服務(wù)以及校園專題數(shù)據(jù)庫實現(xiàn)分類查看、輸入查詢等快速定位功能，如圖8所示。

3.2.3 信息窗顯示屬性信息

將興趣點相關(guān)的文字和多媒體信息，通過信息窗口進(jìn)行表達(dá)。信息窗口作為一種特殊的覆蓋物疊加到地圖，如圖9所示。

圖7 系統(tǒng)主界面

圖8 地物的快速定位

圖9 地物的屬性信息顯示

3.2.4 測距功能

用鼠標(biāo)在地圖上繪制任意的折線，結(jié)束后便可測量出起止間的距離，如圖10所示。

圖10 測距功能

3.2.5 其他輔助功能

系統(tǒng)還可實現(xiàn)地圖輸出、添加自定義標(biāo)簽等功能。用戶根據(jù)自己需要標(biāo)注信息，豐富信息來源，如圖11所示。

圖11 自定義標(biāo)注功能

4 結(jié) 論

基于地圖API進(jìn)行校園電子地圖的設(shè)計與開發(fā)，充分利用地圖搜索引擎提供的地圖服務(wù)和基本功能，結(jié)合自主建設(shè)的校園專題數(shù)據(jù)庫，實現(xiàn)地圖顯示查看、測距、地物快速定位等功能，滿足用戶對校園基礎(chǔ)信息的瀏覽和查詢需求。實踐證明，利用地圖API開發(fā)局域范圍的公益性在線電子地圖服務(wù)系統(tǒng)，具有開放性、低成本、技術(shù)門檻低、易于進(jìn)行個性化定制、無需安裝插件等技術(shù)優(yōu)勢，為地理信息服務(wù)與專業(yè)領(lǐng)域融合及走向公眾奠定基礎(chǔ)，具有廣闊的應(yīng)用前景。

[1]呂紅霞.網(wǎng)絡(luò)環(huán)境下校園數(shù)字地圖的組織和發(fā)布[J].科技創(chuàng)新導(dǎo)報,2009(1):26.

[2]姚高偉,潘曉芳.基于GIS的校園電子地圖研究與實現(xiàn)[J].信息系統(tǒng)工程,2011(8):41-42.

[3]劉有力,羅海馳,錢雪忠，等.基于MapGuide的校園電子地圖應(yīng)用平臺的設(shè)計與實現(xiàn)[J].北京測繪,2011(4):52-54.

[4]徐勝祥,許運清.利用ArcIMS開發(fā)校園網(wǎng)絡(luò)電子地圖發(fā)布系統(tǒng)[J].計算機(jī)與數(shù)字工程,2008,36(1):117-119.

[5]杜傳明.百度地圖API 在小型地理信息系統(tǒng)中的應(yīng)用[J].測繪與空間地理信息,2011,34(2):152-154.

[6]吳肖,彭璇,朱明磊.基于Google Map API的校園電子地圖開發(fā)[J].測繪工程,2010,19(3):35-38.

[7]任建華,汪赫瑜.基于XML的數(shù)據(jù)在數(shù)據(jù)庫中的存取技術(shù)[J].信息技術(shù),2004,28(7):82-85.

[8]冉春玉,王洪成,李芳.ASP.NET技術(shù)及其在網(wǎng)站開發(fā)中的應(yīng)用[J].武漢理工大學(xué)學(xué)報:信息與管理工程版,2002,24(3):70-73.

[9]劉冰,謝軻.基于GIS的瓦片式地圖切圖算法的設(shè)計與實現(xiàn)[J].科技信息,2011(7):60-61.

[10]毛耘喆,於新國,徐漢卿.Ajax技術(shù)在湖北省動態(tài)電子地圖網(wǎng)站中的應(yīng)用[J].測繪通報,2009(8):64-66.

[責(zé)任編輯：張德福]

《測繪工程》變?yōu)樵驴?/p>

為適應(yīng)期刊發(fā)展的需要，滿足廣大讀作者關(guān)于加快刊載周期、提高傳播信息時效性的迫切愿望，更好地發(fā)揮期刊的作用，《測繪工程》經(jīng)黑龍江省新聞出版局批準(zhǔn)，自2014年1月起由雙月刊更改為月刊，每月底出版。《測繪工程》由黑龍江工程學(xué)院和中國測繪學(xué)會聯(lián)合主辦，是面向國內(nèi)外公開發(fā)行的測繪類科技期刊，是中國科學(xué)引文數(shù)據(jù)庫(CSCD)收錄期刊和中國科技核心期刊。在2007年和2012年連續(xù)兩屆測繪優(yōu)秀期刊評選中獲得優(yōu)秀測繪期刊獎。本刊堅持“及時、高效、規(guī)范”辦刊，恪守“質(zhì)量第一、學(xué)術(shù)至上”的辦刊思想，堅持人性化辦刊，審稿周期短，來稿必復(fù)。改為月刊后，刊載量將顯著增大，發(fā)表將更迅捷。歡迎投稿，歡迎訂閱。垂詢電話：0451-88028906/88028496，投稿郵箱：chgc2008@vip.163.com.

《測繪工程》編輯部

DesignandimplementationofcampusonlineelectronicmapbasedonMapAPI

CHENG Gang1,2，LIANG Xiao-li1,2，ZHANG De-qun2，CAI Sheng-zhun2

(1.Key Lab of Mine Spatial Information Technology, National Administration of Surveying, Mapping and Geoinformation, He’nan Polytechnic University, Jiaozuo 454000, China; 2.School of Surveying and Land Information Engineering, He’nan Polytechnic University,Jiaozuo 454000,China)

The construction of University Town and the expansion of campus scale bring some troubles to many teachers,students and visitors. The campus electronic map provides the function of geographic reference and navigation for teachers and students, and shows basic geographical frame for digital development of campus. The current main GIS platforms are expensive and need high technical requirements for developers. Based on API a study is made on the design and development of campus online electronic map and on the key technology of the combination of Map API and third party data. Taking the online electronic map of He’nan Polytechnic University as the example, it verifies the relevant technology and the feasibility of this method.

Map API; campus;online electronic map; design;develop

2013-03-14

國家自然科學(xué)基金資助項目(41001226);河南省高等學(xué)校骨干教師資助計劃(2012GGJS-055);河南省教育廳自然科學(xué)研究計劃項目(2010B170006); 礦山空間信息技術(shù)國家測繪地理信息局重點實驗室開放基金(KLM201202)； 河南理工大學(xué)博士基金(B2010-9)

程 鋼(1981-)，男，副教授，博士.

TP208

：A

：1006-7949(2014)01-0005-07