基于開源Leaflet的WebGIS客戶端設計與實現

趙虎川+曲超

摘 要：Leaflet是一個開源的地圖Javascript庫，具備界面友好、互操作性強、支持移動設備等特點，支持OGC的WMS/WFS/WCS標準，提供了數百個第三方插件擴展地圖功能，是進行開源WebGIS客戶端開發的最佳選擇。文章介紹了WebGIS體系結構和關鍵技術與規范，并結合實例重點介紹了Leaflet的特點具體應用。

關鍵詞：開源；WebGIS；Leaflet；GeoJSON

1 概述

近年來，隨著計算機技術、互聯網技術、數據庫技術等技術的不斷發展，GIS技術開始面向傳統行業和廣大民眾，WebGIS出現并迅速發展[1]。因為采用B/S（瀏覽器/服務器）方式搭建，并具有響應快速、交互式、分布式、動態性等特點，實現了在互聯網上實現地理信息服務共享，是GIS發展的必然趨勢。人們可以在網絡上的任意一個節點，通過瀏覽器無縫訪問來自多個WebGIS服務器發布的空間數據，并使用來自多個服務器節點提供的服務。這使得WebGIS真正成為大眾的工具，貼合人們的生活，利用空間信息更好的為人們服務，如谷歌地圖、百度地圖等，已經成為人們日常出行不可缺少的一部分。

基于WebGIS的商業平臺和OGC開放式地理數據互操作規范的開源框架越來越多，但是對于個人用戶和中小企業，如果使用商業WebGIS平臺，就必須使用其相關的數據處理工具、制圖工具、空間數據庫管理工具以及數據服務發布工具等一系列商業軟件，需要支付高昂的費用，讓人難以接受。因此，基于開源框架的WebGIS平臺成為中小企業以及科研工作者的首選，并涌現出Openlayers和Leaflet等客戶端平臺。本文選擇Leaflet作為WebGIS客戶端的開發框架，Leaflet是一套界面友好、互操作性強、支持移動設備的JavaScript開源地圖庫，具有簡便、高效、可用性強等特點，具備開發者用到的所有地圖功能[2]。

2 WebGIS的體系結構

一般來說，WebGIS的體系結構至少包括三個部分：數據源，Web服務器，客戶端，如圖1所示[3]。

2.1 數據源

數據源用戶管理和處理各種數據，包括文件類型數據和空間數據，以及地圖切片數據，可采用商業數據庫如Oracle、SQL Server等，也可采用開源數據庫MySQL和PostGIS等。系統會使用多臺物理計算機來存儲和更新數據、處理數據，并加工地圖，并定期對數據進行備份，為Web服務器提供強大數據支撐。

2.2 Web服務器

基于OGC規范的Web服務器是系統的核心部分，用于創建基于OGC的WMS、WFS和WCS規范的Web服務服務。Web服務器要求性能要好、處理速度要快，從而快速處理地圖服務等各種服務。當前主流的WebGIS都是用JavaScript直接訪問Web服務，JavaScript是直接在瀏覽器上運行，可以直接訪問Web服務并返回結果。

2.3 客戶端

客戶端是支持WebGIS的各種瀏覽器，瀏覽器通過網絡連接到Web服務器發布的空間服務，并依賴這些服務來獲取地圖數據、查詢、分析、統計、定位等功能，從而以可視化的形式為用戶展示地圖、文字、表格、統計圖和視頻等綜合信息。

3 WebGIS規范和技術

3.1 OGC規范

OGC的主旨是在分布式環境下實現地理空間數據和地理信息處理資源的共享，允許用戶通過網絡實時的獲取不同系統的地理信息[4]。OGC根據W3C的Web服務發布了WMS（Web Map Service，Web地圖服務），WFS（Web Feature Service，Web要素服務）和WCS（Web Coverage Service，地圖覆蓋服務）等規范，從而實現了矢量數據和影像數據的共享。

WMS定義了GetCapabilities（用于返回服務級元數據），GetMap（用于返回地圖影像），GetFeatureInfo（用于返回顯示在地圖上的某些特殊地理要素信息）等3種操作。能夠根據用戶的請求返回相應的地圖，地圖的形式包括PNG、GIF、JPEG等。

WFS定義了插入、更新、刪除、檢索和發現地理要素的服務，其中GetCapabilities用于返回服務級元數據。DescribeFeatureType用于返回要素結構，進而可以進行查詢等操作。

GetFeature是很重要的接口，它可根據查詢要求返回一個符合GML規范的數據文檔。WFS支持根據屬性條件進行查詢，支持根據空間關系進行查詢，并支持屬性條件和空間關系的復合查詢。

WCS根據客戶端請求返回影像等多種數據。包含GetCapabilities，GetCoverage等重要操作。其中GetCapabilities返回一個描述服務和XML文檔，在確定要查詢的數據后，GetCoverage返回數據。

3.2 Leaflet

Leaflet是一個開源的地圖Javascript庫，它由Universal Mind的Vladimir Agafonkin創建。目前版本更新到1.0.3，只有38k大小，具有開發在線地圖的大部分功能，適用于開發中大型在線GIS應用。Leaflet提供可讀性強的API文檔和源碼，本身不僅支持舊的瀏覽器訪問，而且更好的支持HTML5和CSS3，界面簡單、友好。Leaflet采用面向對象設計，封裝性好，并且提供了很多專業的第三方Javascript插件來擴展自身的功能，從而滿足WebGIS對地圖的各種查詢、分析、渲染等操作。

Leaflet的核心是Map類，Map是一個地圖容器，可以在其中放置地圖控件、添加圖層、添加標注、添加符號、綁定事件等[5]。Leaflet默認采用“L”作為命名空間，使用類似于jQuery的鏈式編碼風格，代碼更加精簡，并且可讀性強。

3.3 GeoJSON

JSON是一種輕量級的數據交換格式，基于Javascript實現，JSON獨立于操作系統和編程語言，以鍵/值的形式組織數據。GeoJSON是基于JSON的地理空間信息數據交換格式，可以對地理要素進行編碼，支持點、線、面、多點、多線、多面等幾何類型，并附帶幾何對象屬性，地理要素存儲于Feature 或者FeatureCollection中。Leaflet支持GeoJSON格式地理信息數據，GeoJSON數據格式如下：

{ "type"： "FeatureCollection"，"features"： [{ "type"： "Feature"，"geometry"： {"type"： "Point"， "coordinates"： [102.0， 0.5]}，"properties"： {"prop0"： "value0"}}，{ "type"： "Feature"，"geometry"： {

"type"： "LineString"，"coordinates"： [[102.0， 0.0]， [103.0， 1.0]， [104.0， 0.0]， [105.0， "prop0"： "value0"， "prop1"： 0.0}}，{ “type"： “Feature"，“geometry"： {"type"： "Polygon"，"coordinates"：

[ [ [100.0， 0.0]， [101.0， 0.0]， [101.0， 1.0]， [100.0， 1.0]， [100.0， 0.0] ]]}，"properties"： {"prop0"： "value0"，"prop1"： {"this"： "that"}}}]}

4 Leaflet客戶端的功能實現

4.1 地圖初始化

利用Leaflet創建地圖，首先需要在Html頁面中創建一個id為“map”的div，然后利用Leaflet的Map類初始化地圖容器，代碼如下所示：

var map = L.map（“map”）.setView（[39.917， 116.396]， 13）；

L.tileLayer（'http：//{s}.tile.osm.org/{z}/{x}/{y}.png'，

{attribution： '?； OpenStreetMap

contributors'}）.addTo（map）；

上述代碼中，L.map（'map'）.setView（[39.917， 116.396]， 13）是指根據div為map創建了Leaflet的一個Map實例，并定位到北緯39.917、東經116.396的位置，縮放級別為13級，使用的地圖是OpenStreetMap提供的切片數據。

代碼執行后效果如圖2所示：

4.2 地圖基本操作

Leaflet提供了地圖放大、地圖縮小、地圖漫游、地圖全屏、地圖定位、滾輪放大縮小、鼠標雙擊定位、鍵盤移動地圖等基本操作。

4.3 查詢功能

地圖查詢包括屬性查詢和空間查詢，Leaflet本身沒有專門的類或者接口來實現查詢功能，需要調用WebGIS后臺服務來實現，或者利用第三方的插件來調用特定GIS服務來實現查詢功能。例如，ESRI公司提供了esri-leaflet.js插件，用來實現Leaflet對ArcGIS REST服務的調用。L.esri.Query是esri-leaflet.js插件提供的用于查詢的API，它不僅可以進行條件查詢，還可以完成多種空間關系查詢，如包含、被包含、相交、重疊、臨近等多種空間關系。

var southWest = L.latLng（45.51， -122.70）；

var northEast = L.latLng（45.52， -122.64）；

var bounds = L.latLngBounds（southWest， northEast）；

var query = L.esri.query（{

url：'https：//services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/services/stops/FeatureServer/0'}）；

query.within（bounds）；

query.run（function（error， featureCollection， response）{

console.log（'Found ' + featureCollection.features.length + ' features'）；

}）；

上述代碼實現了在bounds范圍內的要素的查詢。

4.4 編輯功能

Leaflet提供了編輯接口，使得用戶可以在地圖上繪制點要素、線要素、多邊形要素、圓形要素，并附加屬性保存到后臺服務器。并可以對已有的要素修改形狀和位置。

4.5 分析功能

Leaflet利用第三方插件可以實現包括緩沖區分析在內的多種分析功能，并實現了聚類分析。如圖3所示，為北京市查詢的中學的結果，位置集中的中學符號在當前比例尺下顯示為一個并用數字標明個數。

Leaflet還實現了圖層控制器、地圖比例尺和坐標的功能，圖層控制器是Leaflet的Control類的layers接口來實現，圖層分為底圖和覆蓋圖層，底圖可以設置為多個并切換只顯示一個，覆蓋圖層可以同時打開多個。通過調用Leaflet的Control類的scale來實現比例尺的顯示。通過使用Leaflet的Control類的mousePosition方法顯示鼠標的位置。此外，Leaflet數百個第三方免費插件可以供用戶使用，從而搭建強大的WebGIS前端。

5 結束語

在互聯網上實現地理信息服務共享，是GIS發展的必然趨勢。而近年來WebGIS的飛速發展，尤其是谷歌地圖、百度地圖等商業在線地圖的發展，也使得WebGIS更好的為人們出行提供服務。基于OGC的開放式地理數據互操作規范的開源框架的出現，使得中小企業能夠以較低的投入實現在線地圖的所有功能，應用前景廣泛。本文探討了WebGIS的體系，闡述了基于OGC的WebGIS的規范和關鍵技術。重點分析了Leaflet，作為WebGIS開源客戶端，Leaflet界面友好、互操作性強、支持移動設備，具有簡便、高效、可用性強等特點。Leaflet提供了數百個第三方免費插件，滿足WebGIS對地圖的各種查詢、分析、渲染等操作。本文通過實例介紹了Leaflet的地圖初始化、地圖基本操作、地圖查詢、編輯、分析和圖層管理等一系列功能。

參考文獻

[1]劉光，曾敬文，曾慶豐.Web GIS原理應用與開發[M].北京：清華大學出版社，2016：2.

[2]Leaflet. An Open-source Javascript Library for Mobile-friendlyInteractive Maps[EB/OL].（2011-05-13）[2014-04-01].http：//leafletjs.c

om.

[3]楊鵬，鄒時林.基于OpenLayers的WebGIS客戶端的研發[J].測繪與空間地理信息，2012，35（3）：131-133.

[4]張黎明，閆浩文.基于OGC規范的WebGIS設計與應用[J].測繪與空間地理信息，2011，34（6）：41-43.

[5]胡達天，胡慶武.基于開源系統的跨平臺地圖客戶端開發[J].測繪科學，2015，40（7）：142-145.