基于Leaflet的校園電子地圖的設計與實現

趙建偉，季 民

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

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

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

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

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

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

1 開放地理空間信息聯盟與網絡地圖服務

開放地理空間信息聯盟（OGC）的主要研究對象是地理空間內容、地理信息服務、地理信息數據處理以及數據共享等服務標準[8]。針對WebGIS，OGC 較常用的服務標準包括網絡地圖服務（WMS）、網絡要素服務（WFS）、網絡覆蓋服務（WCS）以及網絡地圖切片服務（WMTS）等。針對校園電子地圖數據量小、數據精度高等特點，本文將其發布為WMS。

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

2 系統框架設計

校園電子地圖系統采用B/S 架構模式，分為數據層、服務層和應用層，具體結構如圖1 所示。

圖1 系統總體架構

數據層采用PostgerSQL/PostGIS 進行空間數據的存儲與管理工作。PostgreSQL 是對象關系型數據庫管理系統，基于PostgreSQL 拓展出PostGIS 用以管理空間數據[9]。在數據層進行校園專題數據庫建設，將圖層數據進行概括分類，并存儲到數據庫；利用pgRouting 對路網數據進行拓撲構建以及編寫最短路徑功能函數[10-11]。

服務層包括網絡服務器和地圖服務器。網絡服務器選用輕量級應用服務器Tomcat，負責客戶端與應用服務器之間的通信以及客戶端的請求；通過GeoServer地圖服務器調用PostGIS 數據庫中的數據并發布為WMS，處理來自瀏覽器的服務請求，通過多種數據源接口直接訪問空間數據，最終將處理的結果以jpeg、gif、png 等格式傳輸到客戶端。

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

3 關鍵技術

3.1 校園電子地圖符號設計

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

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

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

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

圖2 渲染效果

3.2 坐標轉換

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

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

設地圖容器坐標系下P點的坐標為（x,y），根據式（3）、式（4）求得地理坐標的經緯度為（Lon,Lat）。

請求完成并返回數據后，前端呈現數據時，根據式（5）、式（6）再將地理坐標轉換為地圖容器坐標。

圖3 坐標轉換示意圖

3.3 A*算法

A* 算法以Dijkstra 算法和廣度優先搜索（BFS）算法為基礎，是一種啟發式搜索算法。在靜態路網中進行最短路徑求解時，其計算節點數量比Dijkstra 算法少，因此更高效，計算公式為：

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

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

圖4 A＊算法流程圖

4 功能實現

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

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

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

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

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

圖5 路徑查詢結果界面

圖6 屬性查詢結果界面

5 結 語

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