基于开源Leaflet的WebGIS客户端设计与实现

1、    基于开源leaflet的webgis客户端设计与实现    赵虎川+曲超摘 要：leaflet是一个开源的地图javascript库，具备界面友好、互操作性强、支持移动设备等特点，支持ogc的wms/wfs/wcs标准，提供了数百个第三方插件扩展地图功能，是进行开源webgis客户端开发的最佳选择。文章介绍了webgis体系结构和关键技术与规范，并结合实例重点介绍了leaflet的特点具体应用。关键词：开源；webgis；leaflet；geojson1 概述近年来，随着计算机技术、互联网技术、数据库技术等技术的不断发展，gis技术开始面向传统行

2、业和广大民众，webgis出现并迅速发展1。因为采用b/s（浏览器/服務器）方式搭建，并具有响应快速、交互式、分布式、动态性等特点，实现了在互联网上实现地理信息服务共享，是gis发展的必然趋势。人们可以在网络上的任意一个节点，通过浏览器无缝访问来自多个webgis服务器发布的空间数据，并使用来自多个服务器节点提供的服务。这使得webgis真正成为大众的工具，贴合人们的生活，利用空间信息更好的为人们服务，如谷歌地图、百度地图等，已经成为人们日常出行不可缺少的一部分。基于webgis的商业平台和ogc开放式地理数据互操作规范的开源框架越来越多，但是对于个人用户和中小企业，如果使用商业webgis平

3、台，就必须使用其相关的数据处理工具、制图工具、空间数据库管理工具以及数据服务发布工具等一系列商业软件，需要支付高昂的费用，让人难以接受。因此，基于开源框架的webgis平台成为中小企业以及科研工作者的首选，并涌现出openlayers和leaflet等客户端平台。本文选择leaflet作为webgis客户端的开发框架，leaflet是一套界面友好、互操作性强、支持移动设备的javascript开源地图库，具有简便、高效、可用性强等特点，具备开发者用到的所有地图功能2。2 webgis的体系结构一般来说，webgis的体系结构至少包括三个部分：数据源，web服务器，客户端，如图1所示3。2.1

4、数据源数据源用户管理和处理各种数据，包括文件类型数据和空间数据，以及地图切片数据，可采用商业数据库如oracle、sql server等，也可采用开源数据库mysql和postgis等。系统会使用多台物理计算机来存储和更新数据、处理数据，并加工地图，并定期对数据进行备份，为web服务器提供强大数据支撑。2.2 web服务器基于ogc规范的web服务器是系统的核心部分，用于创建基于ogc的wms、wfs和wcs规范的web服务服务。web服务器要求性能要好、处理速度要快，从而快速处理地图服务等各种服务。当前主流的webgis都是用javascript直接访问web服务，javascript是直接

5、在浏览器上运行，可以直接访问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要素服务）和

6、wcs（web coverage service，地图覆盖服务）等规范，从而实现了矢量数据和影像数据的共享。wms定义了getcapabilities（用于返回服务级元数据），getmap（用于返回地图影像），getfeatureinfo（用于返回显示在地图上的某些特殊地理要素信息）等3种操作。能够根据用户的请求返回相应的地图，地图的形式包括png、gif、jpeg等。wfs定义了插入、更新、删除、检索和发现地理要素的服务，其中getcapabilities用于返回服务级元数据。describefeaturetype用于返回要素结构，进而可以进行查询等操作。getfeature是很重要的接口，

7、它可根据查询要求返回一个符合gml规范的数据文档。wfs支持根据属性条件进行查询，支持根据空间关系进行查询，并支持属性条件和空间关系的复合查询。wcs根据客户端请求返回影像等多种数据。包含getcapabilities，getcoverage等重要操作。其中getcapabilities返回一个描述服务和xml文档，在确定要查询的数据后，getcoverage返回数据。3.2 leafletleaflet是一个开源的地图javascript库，它由universal mind的vladimir agafonkin创建。目前版本更新到1.0.3，只有38k大小，具有开发在线地图的大部分功能，适用

8、于开发中大型在线gis应用。leaflet提供可读性强的api文档和源码，本身不仅支持旧的浏览器访问，而且更好的支持html5和css3，界面简单、友好。leaflet采用面向对象设计，封装性好，并且提供了很多专业的第三方javascript插件来扩展自身的功能，从而满足webgis对地图的各种查询、分析、渲染等操作。leaflet的核心是map类，map是一个地图容器，可以在其中放置地图控件、添加图层、添加标注、添加符号、绑定事件等5。leaflet默认采用“l”作为命名空间，使用类似于jquery的链式编码风格，代码更加精简，并且可读性强。 3.3 geojsonjson是一种轻量级的数据

9、交换格式，基于javascript实现，json独立于操作系统和编程语言，以键/值的形式组织数据。geojson是基于json的地理空间信息数据交换格式，可以对地理要素进行编码，支持点、线、面、多点、多线、多面等几何类型，并附带几何对象属性，地理要素存储于feature 或者featurecollection中。leaflet支持geojson格式地理信息数据，geojson数据格式如下： "type"： "featurecollection"，"features"： "type"： "feature&q

10、uot;，"geometry"： "type"： "point"， "coordinates"： 102.0， 0.5，"properties"： "prop0"： "value0"， "type"： "feature"，"geometry"： "type"： "linestring"，"coordinates"： 102.0， 0.0，

11、 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&q

12、uot;： "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：//z/x/y.png'，attribution： '

13、;©； openstreetmapcontributors'）.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 查询功能地图查询包括属性查

14、询和空间查询，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.

15、52， -122.64）；var bounds = l.latlngbounds（southwest， northeast）；var query = l.esri.query（url：'https：/query.within（bounds）；query.run（function（error， featurecollection， response）console.log（'found ' + featurecollection.features.length + ' features'）；）；上述代码实现了在bounds范围内的要素的查询。4.4 编辑功

16、能leaflet提供了编辑接口，使得用户可以在地图上绘制点要素、线要素、多边形要素、圆形要素，并附加属性保存到后台服务器。并可以对已有的要素修改形状和位置。4.5 分析功能leaflet利用第三方插件可以实现包括缓冲区分析在内的多种分析功能，并实现了聚类分析。如图3所示，为北京市查询的中学的结果，位置集中的中学符号在当前比例尺下显示为一个并用数字标明个数。leaflet还实现了图层控制器、地图比例尺和坐标的功能，图层控制器是leaflet的control类的layers接口来实现，图层分为底图和覆盖图层，底图可以设置为多个并切换只显示一个，覆盖图层可以同时打开多个。通过调用leaflet的co

17、ntrol类的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.2leaflet. an open-source javascri