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

趙建偉，季 民

（1.山東科技大學(xué) 測繪科學(xué)與工程學(xué)院，山東 青島266590）

我國擁有2 900 余所高等學(xué)校，校園面積大、建筑多是其顯著特點，然而商業(yè)地圖對校園的展示不夠全面，因此開發(fā)校園電子地圖是改善這種狀況行之有效的途徑。校園電子地圖針對老師、同學(xué)的需求提供相關(guān)校園信息，相較于其他電子地圖擁有自己的特征。校園電子地圖以先進的科學(xué)技術(shù)為載體，以互聯(lián)網(wǎng)為傳播媒介，將校園環(huán)境作為指定領(lǐng)域，最大程度地還原真實的校園。

校園電子地圖基于商業(yè)地圖API 與商業(yè)GIS 軟件已取得了較好的成果，如吳肖[1]等利用Google Map API 為用戶提供向Google 地圖添加各種個性化內(nèi)容的功能，并在此基礎(chǔ)上進行二次開發(fā)，取得了一定成果；程鋼[2]等以百度地圖開發(fā)平臺為基礎(chǔ)，利用ArcMap制作校園電子地圖數(shù)據(jù)，基于百度地圖API 實現(xiàn)了查詢、測距等功能；但基于開源軟件的校園電子地圖建設(shè)卻研究較少。

商業(yè)GIS 軟件價格昂貴，各廠商開發(fā)的不同數(shù)據(jù)格式嚴(yán)重阻礙了地理信息產(chǎn)業(yè)的發(fā)展。商業(yè)地圖往往采用自己的坐標(biāo)系，如百度地圖的火星坐標(biāo)系，在地圖匹配等方面極不便利。開源軟件的功能齊全，具有開放性、易用性、可擴展性等特點，并擁有良好的跨平臺能力和可擴展性，突破了商業(yè)GIS 軟件技術(shù)壁壘，成為許多企業(yè)級用戶的首選，逐漸從科研院所和高校走向了市場。例如，胡達天[3]等利用開源Javascript 庫Leaflet實現(xiàn)了跨平臺地圖客戶端的開發(fā)；汪鵬[4]等利用開源GIS 軟件構(gòu)建了地理信息服務(wù)體系框架，并采用QGIS進行地圖渲染，GeoServer 進行地圖發(fā)布，Leaflet 進行地理信息服務(wù)調(diào)用，驗證了框架的可行性；楊珩[5]等基于全開源框架，進行了互聯(lián)網(wǎng)地圖系統(tǒng)的開發(fā)應(yīng)用。

Leaflet 是一個為建設(shè)移動設(shè)備友好互動地圖而開發(fā)的現(xiàn)代的、開源的Javascript 庫，是一個小型化的地圖框架，通過小型化和輕量化來滿足移動網(wǎng)頁的需要。雖然其代碼僅有33 KB，但具有開發(fā)人員開發(fā)在線地圖的絕大部分功能，且Leaflet 擁有良好的可擴展性，支持插件擴展，能通過Ajax 等技術(shù)來處理控件、注記以及Layers 的響應(yīng)事件，因此得到了廣泛的應(yīng)用[6-7]。

針對校園電子地圖的特征，根據(jù)最新研究以及綜合比較，本文將空間和屬性數(shù)據(jù)存儲在PostgreSQL/PostGIS 中進行數(shù)據(jù)組織與管理，利用uDig 進行地圖數(shù)據(jù)渲染，采用地圖服務(wù)器GeoServer 進行地圖服務(wù)發(fā)布，采用開源Javascript 庫Leaflet 進行地圖服務(wù)調(diào)用并開發(fā)客戶端功能，從而構(gòu)建了PostGIS+uDig+GeoServer+Leaflet 的輕量級全開源GIS 框架。本文依據(jù)該框架開發(fā)了校園電子地圖系統(tǒng)，實現(xiàn)了相關(guān)功能，不但節(jié)省了系統(tǒng)研發(fā)成本而且豐富了校園信息，具有一定的實踐意義和應(yīng)用價值。

1 開放地理空間信息聯(lián)盟與網(wǎng)絡(luò)地圖服務(wù)

開放地理空間信息聯(lián)盟（OGC）的主要研究對象是地理空間內(nèi)容、地理信息服務(wù)、地理信息數(shù)據(jù)處理以及數(shù)據(jù)共享等服務(wù)標(biāo)準(zhǔn)[8]。針對WebGIS，OGC 較常用的服務(wù)標(biāo)準(zhǔn)包括網(wǎng)絡(luò)地圖服務(wù)（WMS）、網(wǎng)絡(luò)要素服務(wù)（WFS）、網(wǎng)絡(luò)覆蓋服務(wù)（WCS）以及網(wǎng)絡(luò)地圖切片服務(wù)（WMTS）等。針對校園電子地圖數(shù)據(jù)量小、數(shù)據(jù)精度高等特點，本文將其發(fā)布為WMS。

WMS 描述了利用HTTP 通過網(wǎng)絡(luò)訪問地理空間數(shù)據(jù)的規(guī)范，支持HTTP 標(biāo)準(zhǔn)中的GET 和POST 請求，請求中顯示圖層、范圍等參數(shù)的定義，響應(yīng)返回jpeg、png 等圖片格式的地圖數(shù)據(jù)[7]。WMS 主要包括GetMap、GetCapabilities、GetFeatureInfo 三個重要操作，其中GetMap 負(fù)責(zé)返回多種格式的圖片數(shù)據(jù)；GetCapabilities 負(fù)責(zé)以xml 格式返回服務(wù)級元數(shù)據(jù)，包括服務(wù)類型、版本信息、請求內(nèi)容等；GetFeatureInfo 負(fù)責(zé)返回要素屬性信息，如常用的點選要素查詢屬性信息。

2 系統(tǒng)框架設(shè)計

校園電子地圖系統(tǒng)采用B/S 架構(gòu)模式，分為數(shù)據(jù)層、服務(wù)層和應(yīng)用層，具體結(jié)構(gòu)如圖1 所示。

圖1 系統(tǒng)總體架構(gòu)

數(shù)據(jù)層采用PostgerSQL/PostGIS 進行空間數(shù)據(jù)的存儲與管理工作。PostgreSQL 是對象關(guān)系型數(shù)據(jù)庫管理系統(tǒng)，基于PostgreSQL 拓展出PostGIS 用以管理空間數(shù)據(jù)[9]。在數(shù)據(jù)層進行校園專題數(shù)據(jù)庫建設(shè)，將圖層數(shù)據(jù)進行概括分類，并存儲到數(shù)據(jù)庫；利用pgRouting 對路網(wǎng)數(shù)據(jù)進行拓?fù)錁?gòu)建以及編寫最短路徑功能函數(shù)[10-11]。

服務(wù)層包括網(wǎng)絡(luò)服務(wù)器和地圖服務(wù)器。網(wǎng)絡(luò)服務(wù)器選用輕量級應(yīng)用服務(wù)器Tomcat，負(fù)責(zé)客戶端與應(yīng)用服務(wù)器之間的通信以及客戶端的請求；通過GeoServer地圖服務(wù)器調(diào)用PostGIS 數(shù)據(jù)庫中的數(shù)據(jù)并發(fā)布為WMS，處理來自瀏覽器的服務(wù)請求，通過多種數(shù)據(jù)源接口直接訪問空間數(shù)據(jù)，最終將處理的結(jié)果以jpeg、gif、png 等格式傳輸?shù)娇蛻舳恕?/p>

應(yīng)用層采用開源Javascript 庫Leaflet 進行圖層加載和具體功能開發(fā)，開發(fā)工具為開源軟件Hbuilder。利用Ajax 請求WMS，通過URL 確定操作，Ajax 引擎通過回調(diào)函數(shù)的方式在客戶端接收返回的數(shù)據(jù)，調(diào)用Leaflet API 解析數(shù)據(jù)并進行屬性信息的展示。

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

3.1 校園電子地圖符號設(shè)計

為了能更準(zhǔn)確全面地表達校園信息，需進行校園電子地圖符號設(shè)計，并通過風(fēng)格化圖層描述器（SLD）文件實現(xiàn)圖層渲染。SLD 是基于XML 的樣式描述語言，由OGC 于2005 年提出。SLD 是一個行業(yè)標(biāo)準(zhǔn)，在一定條件下允許WMS 服務(wù)器對地圖可視化的表現(xiàn)形式進行擴展。通過SLD 可從客戶端對地圖樣式進行配置，增強地圖可視化的靈活性。

點圖層符號設(shè)計，根據(jù)不同類別設(shè)置特定的元素，在中構(gòu)建元素進行點圖層渲染，通過 加載自定義樣式圖片。通過 元素構(gòu)建元素，并進行標(biāo)注字體大小、樣式等屬性的設(shè)置（圖2a）。

線圖層符號設(shè)計，設(shè)置輔助線能更加精細(xì)地刻畫校園（圖2b），通過對道路中心線的符號設(shè)計，達到道路標(biāo)注的效果。在中構(gòu)建元素進行線圖層渲染，通過 設(shè)置線寬度、顏色和透明度，在 元素下進行標(biāo)注屬性設(shè)置，通過與元素設(shè)置圖層顯示比例尺范圍（圖2c）。

面圖層渲染，通過設(shè)置填充透明度，通過設(shè)置邊界顏色，通過設(shè)置邊界寬度。多圖層同時加載進地圖將降低可視化效果，因此通過與元素設(shè)置圖層顯示的比例尺范圍，使圖層在特定比例尺下展示（圖2d）。

圖2 渲染效果

3.2 坐標(biāo)轉(zhuǎn)換

在進行Ajax 請求時，地圖容器坐標(biāo)與地理坐標(biāo)需相互轉(zhuǎn)換（圖3），其中地圖容器坐標(biāo)以像素為單位，以左上角為起始點，水平向右為X軸正方向，垂直向

下為Y軸正方向；地理坐標(biāo)以經(jīng)緯度為單位，以左下角為起始點，水平向右為X軸正方向，垂直向上為Y軸正方向。已知容器高度為Height，寬度為Width，地理坐標(biāo)區(qū)域范圍為（minLon，minLat）～（maxLon，maxLat）。根據(jù)式（1）、式（2）計算得到X、Y軸上每個像素所代表的經(jīng)度（scaleX）和緯度（scaleY）。

設(shè)地圖容器坐標(biāo)系下P點的坐標(biāo)為（x,y），根據(jù)式（3）、式（4）求得地理坐標(biāo)的經(jīng)緯度為（Lon,Lat）。

請求完成并返回數(shù)據(jù)后，前端呈現(xiàn)數(shù)據(jù)時，根據(jù)式（5）、式（6）再將地理坐標(biāo)轉(zhuǎn)換為地圖容器坐標(biāo)。

圖3 坐標(biāo)轉(zhuǎn)換示意圖

3.3 A*算法

A* 算法以Dijkstra 算法和廣度優(yōu)先搜索（BFS）算法為基礎(chǔ)，是一種啟發(fā)式搜索算法。在靜態(tài)路網(wǎng)中進行最短路徑求解時，其計算節(jié)點數(shù)量比Dijkstra 算法少，因此更高效，計算公式為：

式中，f(j)為節(jié)點j從起始點到終點的最短距離的估計值；g(j)為從起始點到當(dāng)前節(jié)點j的實際最短距離，由Dijkstra 算法求得；h(j)為節(jié)點j到終點最短距離的估計值，稱為啟發(fā)函數(shù)[9]。當(dāng)h(j)=0 時，A* 算法即為Dijkstra 算法，因此A*算法是對Dijkstra 算法的改進，即加入了啟發(fā)函數(shù)h(j)，能保證最短路徑的搜索向終點方向進行。h(j)常用歐幾里得距離和曼哈頓距離進行計算，以歐幾里得距離為例，假設(shè)A點的經(jīng)緯度為(x1,y1)，B點的經(jīng)緯度為(x2,y2)，則A、B點之間的距離公式為：

A*算法流程如圖4 所示，其中Open 表記錄所有已生成而未被考察的節(jié)點，Close 表記錄已被考察過的節(jié)點。

圖4 A＊算法流程圖

4 功能實現(xiàn)

1）初始圖層加載。首先進行地圖容器初始化，指定地圖的中心點并設(shè)置縮放級別，底圖選用Open Street Map；再進行WMS 加載，調(diào)用tileLayer 下的wms()方法進行參數(shù)設(shè)置，并通過map.addLayer 方法添加到地圖容器中。針對商業(yè)地圖對校園展示細(xì)節(jié)不夠的問題，通過添加輔助線、細(xì)化校園的方式，更加全面地展示校園。

2）基礎(chǔ)功能。校園電子地圖的基礎(chǔ)功能包括地圖的放大、縮小、平移，返回主界面以及前進、撤退，距離測量與打印，比例尺顯示與鷹眼地圖功能，動態(tài)繪制矢量要素功能，能實現(xiàn)點要素、線要素、面要素以及圓和矩形的繪制與刪除。

3）路徑規(guī)劃功能。通過在PostgreSQL 中編寫最短路徑功能函數(shù)，在GeoServer 中配置新的SQL 視圖，調(diào)用SQL 功能函數(shù)。在客戶端添加WMS，將起始點與終點的信息以參數(shù)的形式傳到GeoServer，將查詢結(jié)果返回到客戶端并疊加圖層顯示。室內(nèi)地圖路徑查詢結(jié)果如圖5 所示。

4）樓層圖分層瀏覽功能。當(dāng)?shù)貓D縮放時，建筑內(nèi)部地圖與校園室外地圖之間能進行無縫切換，并進行樓層圖的分層瀏覽。將同一棟樓不同樓層的數(shù)據(jù)添加到同一個圖層組中，采用control.layers()方法實現(xiàn)圖層的分層動態(tài)顯示。

5）查詢功能，主要提供室內(nèi)房間信息的查詢，如面積、座位數(shù)、用途、是否為多媒體等。采用Ajax 技術(shù)進行WMS 請求，能加快地圖顯示與事件響應(yīng)速度。通過Ajax 向GeoServer 請求地圖服務(wù)，GeoServer 返回JSON 格式的數(shù)據(jù)，并通過Ajax 回調(diào)函數(shù)接收數(shù)據(jù)；再通過data.features[i].properties 解析獲取屬性信息，點擊事件執(zhí)行函數(shù)，以彈框方式顯示屬性信息，如圖6 所示。

圖5 路徑查詢結(jié)果界面

圖6 屬性查詢結(jié)果界面

5 結(jié) 語

本文根據(jù)OGC 標(biāo)準(zhǔn)規(guī)則，構(gòu)建了輕量級全開源框架，進行了校園專題數(shù)據(jù)庫建設(shè)，研究了校園電子地圖符號設(shè)計、坐標(biāo)轉(zhuǎn)換和路徑查詢算法實現(xiàn)等關(guān)鍵技術(shù)。校園電子地圖實現(xiàn)的基本功能包括矢量要素繪制、圖層管理、比例尺、鷹眼和距離測量等，主要功能包括校園室內(nèi)外地圖的瀏覽與無縫切換，路徑規(guī)劃與屬性查詢等。Leaflet 以其開源、簡單、高性能等特性，為GIS軟件開發(fā)提供了技術(shù)支撐，具有廣泛的應(yīng)用前景。