基于開源Leaflet的WebGIS客戶端設(shè)計(jì)與實(shí)現(xiàn)

趙虎川+曲超

摘 要：Leaflet是一個(gè)開源的地圖Javascript庫，具備界面友好、互操作性強(qiáng)、支持移動(dòng)設(shè)備等特點(diǎn)，支持OGC的WMS/WFS/WCS標(biāo)準(zhǔn)，提供了數(shù)百個(gè)第三方插件擴(kuò)展地圖功能，是進(jìn)行開源WebGIS客戶端開發(fā)的最佳選擇。文章介紹了WebGIS體系結(jié)構(gòu)和關(guān)鍵技術(shù)與規(guī)范，并結(jié)合實(shí)例重點(diǎn)介紹了Leaflet的特點(diǎn)具體應(yīng)用。

關(guān)鍵詞：開源；WebGIS；Leaflet；GeoJSON

1 概述

近年來，隨著計(jì)算機(jī)技術(shù)、互聯(lián)網(wǎng)技術(shù)、數(shù)據(jù)庫技術(shù)等技術(shù)的不斷發(fā)展，GIS技術(shù)開始面向傳統(tǒng)行業(yè)和廣大民眾，WebGIS出現(xiàn)并迅速發(fā)展[1]。因?yàn)椴捎肂/S（瀏覽器/服務(wù)器）方式搭建，并具有響應(yīng)快速、交互式、分布式、動(dòng)態(tài)性等特點(diǎn)，實(shí)現(xiàn)了在互聯(lián)網(wǎng)上實(shí)現(xiàn)地理信息服務(wù)共享，是GIS發(fā)展的必然趨勢。人們可以在網(wǎng)絡(luò)上的任意一個(gè)節(jié)點(diǎn)，通過瀏覽器無縫訪問來自多個(gè)WebGIS服務(wù)器發(fā)布的空間數(shù)據(jù)，并使用來自多個(gè)服務(wù)器節(jié)點(diǎn)提供的服務(wù)。這使得WebGIS真正成為大眾的工具，貼合人們的生活，利用空間信息更好的為人們服務(wù)，如谷歌地圖、百度地圖等，已經(jīng)成為人們?nèi)粘３鲂胁豢扇鄙俚囊徊糠帧?/p>

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

2 WebGIS的體系結(jié)構(gòu)

一般來說，WebGIS的體系結(jié)構(gòu)至少包括三個(gè)部分：數(shù)據(jù)源，Web服務(wù)器，客戶端，如圖1所示[3]。

2.1 數(shù)據(jù)源

數(shù)據(jù)源用戶管理和處理各種數(shù)據(jù)，包括文件類型數(shù)據(jù)和空間數(shù)據(jù)，以及地圖切片數(shù)據(jù)，可采用商業(yè)數(shù)據(jù)庫如Oracle、SQL Server等，也可采用開源數(shù)據(jù)庫MySQL和PostGIS等。系統(tǒng)會(huì)使用多臺(tái)物理計(jì)算機(jī)來存儲(chǔ)和更新數(shù)據(jù)、處理數(shù)據(jù)，并加工地圖，并定期對數(shù)據(jù)進(jìn)行備份，為Web服務(wù)器提供強(qiáng)大數(shù)據(jù)支撐。

2.2 Web服務(wù)器

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

2.3 客戶端

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

3 WebGIS規(guī)范和技術(shù)

3.1 OGC規(guī)范

OGC的主旨是在分布式環(huán)境下實(shí)現(xiàn)地理空間數(shù)據(jù)和地理信息處理資源的共享，允許用戶通過網(wǎng)絡(luò)實(shí)時(shí)的獲取不同系統(tǒng)的地理信息[4]。OGC根據(jù)W3C的Web服務(wù)發(fā)布了WMS（Web Map Service，Web地圖服務(wù)），WFS（Web Feature Service，Web要素服務(wù)）和WCS（Web Coverage Service，地圖覆蓋服務(wù)）等規(guī)范，從而實(shí)現(xiàn)了矢量數(shù)據(jù)和影像數(shù)據(jù)的共享。

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

WFS定義了插入、更新、刪除、檢索和發(fā)現(xiàn)地理要素的服務(wù)，其中GetCapabilities用于返回服務(wù)級元數(shù)據(jù)。DescribeFeatureType用于返回要素結(jié)構(gòu)，進(jìn)而可以進(jìn)行查詢等操作。

GetFeature是很重要的接口，它可根據(jù)查詢要求返回一個(gè)符合GML規(guī)范的數(shù)據(jù)文檔。WFS支持根據(jù)屬性條件進(jìn)行查詢，支持根據(jù)空間關(guān)系進(jìn)行查詢，并支持屬性條件和空間關(guān)系的復(fù)合查詢。

WCS根據(jù)客戶端請求返回影像等多種數(shù)據(jù)。包含GetCapabilities，GetCoverage等重要操作。其中GetCapabilities返回一個(gè)描述服務(wù)和XML文檔，在確定要查詢的數(shù)據(jù)后，GetCoverage返回?cái)?shù)據(jù)。

3.2 Leaflet

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

Leaflet的核心是Map類，Map是一個(gè)地圖容器，可以在其中放置地圖控件、添加圖層、添加標(biāo)注、添加符號、綁定事件等[5]。Leaflet默認(rèn)采用“L”作為命名空間，使用類似于jQuery的鏈?zhǔn)骄幋a風(fēng)格，代碼更加精簡，并且可讀性強(qiáng)。

3.3 GeoJSON

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

{ "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客戶端的功能實(shí)現(xiàn)

4.1 地圖初始化

利用Leaflet創(chuàng)建地圖，首先需要在Html頁面中創(chuàng)建一個(gè)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）是指根據(jù)div為map創(chuàng)建了Leaflet的一個(gè)Map實(shí)例，并定位到北緯39.917、東經(jīng)116.396的位置，縮放級別為13級，使用的地圖是OpenStreetMap提供的切片數(shù)據(jù)。

代碼執(zhí)行后效果如圖2所示：

4.2 地圖基本操作

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

4.3 查詢功能

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

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'）；

}）；

上述代碼實(shí)現(xiàn)了在bounds范圍內(nèi)的要素的查詢。

4.4 編輯功能

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

4.5 分析功能

Leaflet利用第三方插件可以實(shí)現(xiàn)包括緩沖區(qū)分析在內(nèi)的多種分析功能，并實(shí)現(xiàn)了聚類分析。如圖3所示，為北京市查詢的中學(xué)的結(jié)果，位置集中的中學(xué)符號在當(dāng)前比例尺下顯示為一個(gè)并用數(shù)字標(biāo)明個(gè)數(shù)。

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

5 結(jié)束語

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

參考文獻(xiàn)

[1]劉光，曾敬文，曾慶豐.Web GIS原理應(yīng)用與開發(fā)[M].北京：清華大學(xué)出版社，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]楊鵬，鄒時(shí)林.基于OpenLayers的WebGIS客戶端的研發(fā)[J].測繪與空間地理信息，2012，35（3）：131-133.

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

[5]胡達(dá)天，胡慶武.基于開源系統(tǒng)的跨平臺(tái)地圖客戶端開發(fā)[J].測繪科學(xué)，2015，40（7）：142-145.