基于地圖API的校園在線電子地圖設計與實現

程 鋼,梁曉莉,張得群，蔡圣準

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

基于地圖API的校園在線電子地圖設計與實現

程 鋼1,2,梁曉莉1,2,張得群2，蔡圣準2

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

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

地圖API；校園；在線電子地圖；設計；開發

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

1 基于地圖API的校園在線電子地圖基本架構

在線地圖搜索引擎按照B/S體系結構搭建地圖服務平臺，通過網絡訪問服務提供的地圖顯示、漫游、縮放等功能。文中校園電子地圖以該通用地圖服務平臺為基礎，構建應用數據庫和數據服務器，設計符合校園用戶使用習慣的良好的客戶端界面，通過調用地圖API實現在線電子地圖的各種交互功能，其總體架構如圖1所示。

圖1 校園在線電子地圖總體架構

客戶層:包括客戶端和瀏覽器，提供地圖瀏覽和查詢界面，負責用戶與一臺及多方應用服務器的交互，將訪問和查詢請求發送給服務器，并對返回結果進行可視化表達。

應用層:負責用戶請求處理，主要依靠應用服務器完成工作。客戶層提出請求后，應用服務器將啟動相應進程響應，并將處理結果動態生成HTML代碼，返回給客戶端。如果客戶端提交的請求包括數據處理操作，應用服務器還需與數據服務器交互完成數據處理過程。

數據層:負責空間數據、屬性數據的存儲、響應和更新處理，由數據服務器完成。數據請求處理完畢后，將結果返回應用服務器，由應用服務器傳回客戶端，完成整個事件處理過程。

2 校園電子地圖的設計

2.1 界面及功能設計

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

2.2 專題分類

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

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

2.3 數據存儲

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

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

……

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

圖3 面要素空間數據存儲結構

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

數據表存儲了對地物進行定位和表達的必要數據，包括識別標志、名稱、中心點坐標、信息窗內容等信息。面狀要素表結構如表2所示。

表1 專題命名表

表2 面要素屬性表結構

3 關鍵技術與實現

3.1 關鍵技術

3.1.1 ASP.NET與JavaScript

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

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

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

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

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

圖4 Javascript調用地圖API實例

3.1.2 地圖切片

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

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

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

圖5 切片結果及命名結果展示

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

tileLayer.getTilesUrl = function (tileCoord， zoom) {

var x = tileCoord.x;

var y = tileCoord.y;

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

}

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

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

3.1.3 AJAX技術

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

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

在APS.NET開發中，通過ScriptManager來管理異步請求，用來實現頁面的局部更新和對Web服務的調用等。利用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);

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

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

2)服務器根據該關鍵詞檢索本地數據庫，并將其坐標返回給客戶端。

3)客戶端根據坐標平移地圖并顯示其信息。

3.2 主要功能實現

本文以河南理工大學為例，將ASP.net網絡開發與Javascript客戶端腳本調用相結合，使用百度地圖API進行校園在線電子地圖設計與開發。

3.2.1 系統的主界面圖

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

3.2.2 地圖查詢定位功能

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

3.2.3 信息窗顯示屬性信息

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

圖7 系統主界面

圖8 地物的快速定位

圖9 地物的屬性信息顯示

3.2.4 測距功能

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

圖10 測距功能

3.2.5 其他輔助功能

系統還可實現地圖輸出、添加自定義標簽等功能。用戶根據自己需要標注信息，豐富信息來源，如圖11所示。

圖11 自定義標注功能

4 結 論

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

[1]呂紅霞.網絡環境下校園數字地圖的組織和發布[J].科技創新導報,2009(1):26.

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

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

[4]徐勝祥,許運清.利用ArcIMS開發校園網絡電子地圖發布系統[J].計算機與數字工程,2008,36(1):117-119.

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

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

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

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

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

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

[責任編輯：張德福]

《測繪工程》變為月刊公告

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

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

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

TP208

：A

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