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

科技创新与应用『２０１７年第ｌ６期　科技创新　

基于开源Ｌｅａｆｌｅｔ的ＷｅｂＧＩＳ客户端设计与实现　

赵虎ＪＩｌ　曲超　

（天津市测绘院。天津３００３８１）　

摘要：Ｌｅａｆｌｅｔ是一个开源的地图Ｊａｖａｓｃｒｉｐｔ库，具备界面友好、互操作性强、支持移动设备等特点，支持ＯＧＣ的ＷＭＳ／ＷＦＳ／ＷＣＳ　

标准，提供了数百个第三方插件扩展地图功能，是进行开源ＷｅｂＧＩＳ客户端开发的最佳选择　文章介绍了ＷｅｂＧＩＳ体系结构和关　

键技术与规范，并结合实例重点介绍了Ｌｅａｆｌｅｔ的特点具体应用。　

关键词：开源；ＷｅｂＧＩＳ；Ｌｅａｆｌｅｔ；ＧｅｏＪＳＯＮ　

１概述　近年来，随着计算机技术、互联网技术、数据库技术等技术的不　断发展，ＧＩＳ技术开始面向传统行业和广大民众，ＷｅｂＧＩＳ出现并迅　速发展【１１。因为采用Ｂ／Ｓ（浏览器／服务器）方式搭建，并具有响应快　

速、交互式、分布式、动态性等特点，实现了在互联网上实现地理信　

息服务共享，是ＧＩＳ发展的必然趋势。人们可以在网络上的任意一　个节点，通过浏览器无缝访问来自多个ＷｅｂＧＩＳ服务器发布的空间　数据，并使用来自多个服务器节点提供的服务。这使得ＷｅｂＧＩＳ真　

正成为大众的Ｔ具，贴合人们的生活，利用空间信息更好的为人们　

服务。如　歌地冈、百度地图等，已经成为人们日常出行不可缺少的　

一部分。　基于ＷｅｂＧＩＳ的商业平台和ＯＧＣ开放式地理数据互操作规范　

的开源框架越来越多，但是对于个人用户和中小企业，如果使用商　

业ＷｅｂＧＩＳ平台，就必须使用其相关的数据处理工具、制图工具、空　间数据库管理工具以及数据服务发布工具等一系列商业软件，需要　

支付高昂的费用，让人难以接受。因此，基于开源框架的ＷｅｂＧＩＳ平　台成为中小企业以及科研工作者的首选，并涌现出Ｏｐｅｎｌａｙｅｒｓ和　Ｌｅａｆｌｅｔ等客户端平台。本文选择Ｌｅａｆｌｅｔ作为ＷｅｂＧＩＳ客户端的开发　

框架，Ｌｅａｆｌｅｔ是一套界面友好、互操作性强、支持移动设备的　ＪａｖａＳｃｒｉｐｔ开源地图库，具有简便、高效、可用性强等特点，具备开发　

者用到的所有地图功能　。　２　ＷｅｂＧＩＳ的体系结构　

一般来说，ＷｅｂＧＩＳ的体系结构至少包括三个部分：数据源，　ｗｅｂ服务器，客户端，如图１所示　。　

２．１数据源　数据源用户管理和处理各种数据，包括文件类型数据和空间数　

据，以及地图切片数据，可采用商业数据库如Ｏｒａｃｌｅ、ＳＱＬ　Ｓｅｒｖｅｒ等，　也可采用开源数据库ＭｙＳＱＬ和ＰｏｓｔＧＩＳ等。系统会使用多台物理计　

算机来存储和更新数据、处理数据，并加工地图，并定期对数据进行　备份，为Ｗｅｂ服务器提供强大数据支撑。　

２．２　Ｗｅｂ服务器　

基于ＯＧＣ规范的Ｗｅｂ服务器是系统的核心部分，用于创建基　

于ＯＧＣ的ＷＭＳ、ＷＦＳ和ＷＣＳ规范的Ｗｅｂ服务服务。Ｗｅｂ服务器　要求性能要好、处理速度要快，从而快速处理地图服务等各种服务。　

一５６一　广—————————————］ｌ　！　竺　兰兰　１　ｗｅｂ客户端　

ＯＧＣ　Ｗｅｂ服务规范　

数据源　

图１　ＷｅｂＧＩＳ体系结构　当前主流的ＷｅｂＧＩＳ都是用ＪａｖａＳｃｒｉｐｔ直接访问Ｗｅｂ服务，　

ＪａｖａＳｃｆｉｐｔ是直接在浏览器上运行，可以直接访问Ｗｅｂ服务并返同　结果。　

２－３客户端　客户端是支持ＷｅｂＧ１Ｓ的各种浏览器，浏览器通过网络连接到　

Ｗｅｂ服务器发布的空间服务，并依赖这些服务来获取地图数据、查　询、分析、统计、定位等功能，从而以可视化的形式为用户展示地图、　

文字、表格、统计图和视频等综合信息。　３　ＷｅｂＧＩＳ规范和技术　

３．１　ＯＧＣ规范　ＯＧＣ的主旨是在分布式环境下实现地理空间数据和地理信息　

处理资源的共享，允许用户通过网络实时的获取不同系统的地理信　息　。ＯＧＣ根据Ｗ３Ｃ的ｗｅｂ服务发布了ＷＭＳ（Ｗｅｂ　Ｍａｐ　Ｓｅｒｖｉｃｅ。　

Ｗｅｂ地图服务），ＷＦＳ（Ｗｅｂ　Ｆｅａｔｕｒｅ　Ｓｅｒｖｉｃｅ，Ｗｅｂ要素服务）和ＷＣＳ　

（Ｗｅｂ　Ｃｏｖｅｒａｇｅ　Ｓｅｒｖｉｃｅ，地图覆盖服务）等规范，从而实现了矢量数　据和影像数据的共享。　ＷＭＳ定义了ＧｅｔＣａｐａｂｉｌｉｔｉｅｓ（用于返回服务级元数据），ＧｅｔＭａｐ　

（用于返回地图影像），ＧｅｔＦｅａｔｕｒｅｌｎｆｏ（用于返回显示在地图上的某　些特殊地理要素信息）等３种操作。能够根据用户的请求返回相应　的地图，地图的形式包括ＰＮＧ、ＧＩＦ、ＪＰＥＧ等。　

ＷＦＳ定义了插入、更新、删除、检索和发现地理要素的服务，其　中ＧｅｔＣａｐａｂｉｌｉｔｉｅｓ用于返同服务级元数据。ＤｅｓｃｒｉｂｅＦｅａｔｕｒｅＴｙｐｅ用于　

返回要素结构，进而可以进行查询等操作。　

ＧｅｔＦｅａｔｕｒｅ是很重要的接口，它可根据查询要求返同一个符合　ＧＭＬ规范的数据文档。ＷＦＳ支持根据属性条件进行查询，支持根据　

空间关系进行查询，并支持属性条件和空间关系的复合查询。　ＷＣＳ根据客户端请求返同影像等多种数据。包含ＧｅｔＣａｐａｂｉｌ—　ｉｔｉｅｓ，ＧｅｔＣｏｖｅｒａｇｅ等重要操作。其中ＧｅｔＣａｐａｂｉｌｉｔｉｅｓ返回一个描述服　

务和ＸＭＬ文档，在确定要查询的数据后，ＧｅｔＣｏｖｅｒａｇｅ返同数据。　

３．２　Ｉ　ａｆｉｅｔ　

Ｌｅａｆｔｅｒ是一个开源的地图Ｊａｖａｓｃｒｉｐｔ库，它由Ｕｎｉｖｅｒｓａｌ　Ｍｉｎｄ的　Ｖｌａｄｉｍｉｒ　ＡｇＭｏｎｋｉｎ创建。目前版本更新到１．０．３，只有３８ｋ大小．具　

有开发在线地图的大部分功能，适用于开发中大型在线ＧＩＳ应用。　Ｌｅａｆｌｅｔ提供可读性强的ＡＰＩ文档和源码，本身不仅支持旧的浏览器　

访问，而且更好的支持ＨＴＭＬ５和ＣＳＳ３，界面简单、友好。Ｌｅａｆｌｅｔ采　用面向对象设计，封装性好，并且提供了很多专业的第三方　Ｊａｖａｓｅｒｉｐｔ插件来扩展自身的功能，从而满足Ｗｅｉ　ＧＩｓ对地图的各种　

查询、分析、渲染等操作。　

Ｌｅａｆｌｅｔ的核心是Ｍａｐ类。Ｍａｐ是一个地图容器．可以在其中放　置地图控件、添加图层、添加标注、添加符号、绑定事件等［５１。［￣ａｆｌｅｔ　默认采用“Ｌ”作为命名空间，使用类似于ｉＱｕｅｒｙ的链式编码风格，代　

码更加精简，并且可读性强。　

３．３　ＧｅｏＪＳＯＮ　ＪＳＯＮ是一种轻量级的数据交换格式，基于Ｊａｖａｓｃｒｉｐｔ实现，　ＪＳＯＮ独立于操作系统和编程语言，以键，值的形式组织数据。Ｇｅｏ—　

ＪＳＯＮ是基于ＪＳＯＮ的地理空间信息数据交换格式，可以对地理要素　进行编码，支持点、线、面、多点、多线、多面等几何类型．并附带几何　

对象属性，地理要素存储于Ｆｅａｔｕｒｅ或者ＦｅａｔｕｒｅＣｏｌｌｅｃｔｉｏｎ中。　Ｌｅａｆｌｅｔ支持ＧｅｏＪＳＯＮ格式地理信息数据，ＧｅｏＪＳＯＮ数据格式如下：　

（”ｔｙｐｅ”：”ＦｅａｔｕｒｅＣｏｌｌｅｃｔｉｏｎ”，”ｆｅａｔｍ’ｅｓ”：　【｛”ｔｙｐｅ“：”Ｆｅａ－　ｔｕｒｅ”，”ｇｅｏｍｅｔｒｙ”：　ｔｙｐｅ”：”Ｐｏｉｎｔ”，”ｃｏｏｒｄｉｎａｔｅｓ”：【１０２．０，０．５ｌ】，”　

ｐｒｏｐｅｒｔｉｅｓ”：｛１．ｐｒｏｐＯ”：”ｖａｌｕｅＯ”｝ｌ，（”ｔｙｐｅ”：”Ｆｅａｔｕｒｅ”，”ｇｅｏｍｅｔｒｙ”：｛　”ｔｙｐｅ”：”ＬｉｎｅＳｔｒｉｎｇ”，”ｃｏｏｒｄｉｎａｔｅｓ”：　【［１０２．０，０．０】，【１０３．０，　

１．０】，【１０４．０，０．０】，【１０５．０，”ｐｒｏｐＯ”：”ｖａｌｕｅＯ”，”ｐｍｐｌ”：０．Ｏ｝】，｛　“ｔｙｐｅ”：“Ｆｅａｔｕｒｅ”，“ｇｅｏｍｅｔｒｙ”：｛．．ｔｙｐｅ”：”Ｐｏｌｙｇｏｎ”．”ｃｏｏｒｄｉｎａｔｅｓ”：

　科技创新　２０１７年第１６期Ｉ科技创新与应用　

【【【１００．０，０．０】，【１０１．０，０．０】，［１０１．０，１．０］，［１００．０，１．０】，　【１００．０，０．０】】】｝，”ｐｒｏｐｅｒｔｉｅｓ”：｛”ｐｒｏ＃”：”ｖａｌｕｅ０”，”ｐｒｏｐＩ”：｛１．ｔｈｉｓ”：　

”ｔｈａｔ”｝｝１］ｌ　４　Ｌｅａｆ１ｅｔ客户端的功能实现　４．１地图初始化　利用Ｌｅａｆｌｅｔ创建地图，首先需要在Ｈｔｍｌ页面中创建一个ｉｄ为　

“ｍａｐ”的ｄｉｖ，然后利用Ｌｅａｆｌｅｔ的Ｍａｐ类初始化地图容器，代码如下　

所示：　ｖａｒ　ｍａｐ：Ｌ．ｍａｐ（“ｍａｐ”）．ｓｅｔＶｉｅｗ（【３９．９１７，ｌ　１６．３９６】，１３）；　

Ｌ．ｔｉｌｅＬａｙｅｒ（　ｈｔｔｐ：／／｛ｓ｝．ｔｉｌｅ．ｏｓｍ．ｏｒｇ／｛ｚ｝／｛ｘｌ／｛ｙ｝．ｐｎｇ　，　

ｆａｔｔｒｉｂｕｔｉｏｎ：　＆ｃｏｐｙ；＜ａ　ｈｒｅｆ＝”ｈｔｔｐ：／／ｏｓｍ．ｏｒｇ／ｃｏｐｙｒｉ　ｔ”＞Ｏｐｅｎ—　

ＳｔｒｅｅｔＭａｐ＜／ａ＞　ｃｏｎｔｒｉｂｕｔｏｒｓ　））．ａｄｄＴｏ（ｍａｐ）；　

上述代码中，Ｌ．ｍａｐ（　ｍａｐ，）＿ｓｅｔＶｉｅｗ（［３９．９１７，ｌ１６．３９６】，１３）是　指根据ｄｉｖ为ｍａｐ创建了Ｌｅａｆｌｅｔ的一个Ｍａｐ实例．并定位到北纬　

３９．９１７、东经ｌｔ６．３９６的位置，缩放级别为１３级，使用的地图是　ＯｐｅｎＳｔｒｅｅｔＭａｐ提供的切片数据。　代码执行后效果如图２所示：　

图２　ＬＪｅａｎｅｔ地图初始化　４．２地图基本操作　Ｌｅａｆｌｅｔ提供了地图放大、地图缩小、地图漫游、地图全屏、地图　

定位、滚轮放大缩小、鼠标双击定位、键盘移动地图等基本操作。　

４．３查询功能　地图查询包括属性查询和空间查询，Ｌｅａｆｌｅｔ本身没有专门的类　

或者接口来实现查询功能，需要调用ＷｅｂＧＩＳ后台服务来实现，或　者利用第三方的插件来调用特定ＧＩＳ服务来实现查询功能。例如，　

ＥＳＲＩ公司提供了ｅｓｒｉ—ｌｅａｆｌｅｔ．ｊｓ插件，用来实现Ｌｅａｆｌｅｔ对ＡｒｃＧＩＳ　ＲＥＳＴ服务的调用。Ｌ．ｅｓｒｉ．Ｑｕｅｒｙ是ｅｓｒｉ—ｌｅａｆｌｅｔ．ｊｓ插件提供的用于查　

询的ＡＰＩ，它不仅可以进行条件查询，还可以完成多种空间关系查　淘，如包含、被包含、相交、重叠、临近等多种空间关系。　

ｖａｒ　ｓｏｕｔｈＷｅｓｔ＝Ｌ．１ａｔＬｎｇ（４５．５１．一１２２．７０）：　

ｖａｒ　ｎｏｒｔｈＥａｓｔ＝Ｌ．１ａｔＬｎｇ（４５．５２，－１２２．６４）；　ｖａｒ　ｂｏｕｎｄｓ＝Ｌ．１ａｔＬｎｇＢｏｕｎｄｓ（ｓｏｕｔｈｗｅｓｔ，ｎｏｒｔｈＥａｓｔ）：　

ｖａｒ　ｑｕｅｒｙ　Ｌ－ｅｓｒｉ．ｑｕｅｒｙ（ｆ　ｕｒｌ：　ｈｔｔｐｓ：／／ｓｅｒｖｉｃｅｓ．ａｒｃｇｉｓ．ｃｏｒｎ／ｔＯｏｌ　６ＨｄｌＭｅＯＢＩ４Ｍｂ／ａｒｃｇｉｓ／ｒｅｓｔ／　ｓｅｒｖｉｃｅｓ／ｓｔｏｐｓ／ＦｅａｔｕｒｅＳｅｒｖｅｒ／Ｏ，））；　

ｑｕｅｒｙ．ｗｉｔｈｉｎ（ｂｏｕｎｄｓ）；　ｑｕｅｒｙ．ｒｕｎ（ｆｕｎｃｔｉｏｎ（ｅｒｒｏｒ，ｆｅａｔｕｒｅＣｏｌｌｅｃｔｉｏｎ，ｒｅｓｐｏｎｓｅ）｛　

ｃｏｎｓｏｌｅ．１ｏｇ（　Ｆｏｕｎｄ　＋ｆｅａｔｕｒｅＣｏｌｌｅｃｔｉｏｎ．ｆｅａｔｕｒｅｓ．１ｅｎｇｔｈ＋　ｆｅａ—　

ｔｕｒｅｓ　））；　上述代码实现了在ｂｏｕｎｄｓ范围内的要素的查询。　

４．４编辑功能　Ｌｅａｆｌｅｔ提供了编辑接口，使得用户可以在地图上绘制点要素、　

线要素、多边形要素、圆形要素，并附加属性保存到后台服务器。并　可以对已有的要素修改形状和位置。　

４．５分析功能　Ｌｅａｆｔｅｔ利用第ｊ方插件可以实现包括缓冲区分析在内的多种