收稿日期：2016-03-03。
基于Leaflet 开源JS 类库的在线图形编辑
顾振雄1
（1.上海市测绘院，上海200063）
摘 要：为满足上海市城市建设档案馆对于在线图形编辑的业务需求，开发了基于Leaflet 的WebGIS 应用。重点介绍了Leaflet 的特性及其对HTML5的支持，搭建了不依赖任何第三方插件的WebGIS 应用，增强了部署的便捷性和对不同平台的适应性。关键词：WebGIS ；Leaflet ；前端图形编辑；HTML5中图分类号：P208                                              文献标志码：B
文章编号：1672-4623（2017）03-0074-03
地理位置是城建档案中的一个重要信息，可通过GIS 进行高效、有序的管理。随着网络的快速发展，越来越多的桌面GIS 应用转向Web 平台。WebGIS 是网络和分布式计算技术应用于GIS 开发的产物，具有平台结构清晰、可扩展性强的优点，适合于搭建中小型的地图服务应用[1]。富互联网应用（RIA）的出现推动了WebGIS 的发展。典型的基于RIA 的WebGIS 系统开发工具主要有Adobe 公司的Flex 和Microsoft 公司的Silverlight 等。Flex 是一个高效、免费、基于组件的开源框架，以RIA 技术为核心，着力于表现层的构建；基于Flex 创建的界面表现能力强[2]。Silverlight 是Microsoft 公司力推的RIA 解决方案，用于设计、开发、部署具有富交互体验的Web 应用[3]。针对不同的前端框架，ESRI 公司曾推出过多套用于RIA 开发的API，如ArcGIS API for Flex、ArcGIS API for Silverlight 等。基于上
述模式开发的WebGIS 应用在跨浏览器（IE、Firefox、Safari 等）、跨平台（Windows、Mac、Linux 等）、部署便捷、表现力强等特性上已有了很大进步，但仍需在浏览器上安装第三方插件。HTML5中新增了对矢量数据的支持，为WebGIS 摆脱第三方插件实现矢量数据可视化提供了技术基础，与传统WebGIS 相比更加适应分布式的系统部署[4]。
Leaflet 是一个支持HTML5的用于开发交互式在线地图WebGIS 应用的轻量级开源Javascript 类库[5]
。本文使用Leaflet 来搭建在线图形编辑WebGIS 应用，以满足上海市城市建设档案馆的业务需求。
1 Leaflet 简介
目前的WebGIS 产品可分为3类：商业WebGIS 产品、公众地图服务框架以及开源WebGIS 框架[6]。商业WebGIS 产品以ArcGIS API for Javascript 为典型代表，
适用于开发政府、企业等专业型GIS 应用，支持在线图形编辑，功能强大，在开发、测试、评估阶段免费，但若是商业用途则需付费，且成本较高。公众地图服务框架以Google Earth API [7]和百度地图API 为典型代表，面向大众，适用于开发生活服务类、社交类GIS 应用。开源WebGIS 框架以OpenLayers 和Leaflet 为代表，适用于开发大众型或专业型GIS 应用。
2011年5月17日，Leaflet 首次发布0.1版本，目前的稳定版本为2014年5月23日发布的0.7.3版本，该团
队正在研发的是0.8版本[8]。
Leaflet 开源类库具有很多优点，部分列举如下：① 支持HTML5，界面简单、美观、友好；②对于浏览器的兼容性好；③面向对象设计，封装性好；④在线文档完善，开发难度不高，有丰富的第三方插件，功能可扩展性好。
1.1 Leaflet API 框架结构
Leaflet 源码文件组织结构清晰，便于阅读，0.7.3 版本的Leaflet 源码结构如表 1所示。Leaflet 默认采用“L”作为命名空间，简洁明了，如有需要也可更改为自定义名称。另外，Leaflet 采用类似于jQuery 的链式编码风格，使代码更加精简易读。
表1 Leaflet 源码文件组织结构表
文件夹内容
core 核心类，定义面向对象的特性、事件、常用工具函数map 地图类，定义地图的属性和行为，用于初始化和操作地图layer 图层类，定义WMS、基本图形、图形集合等数据类型geo
地理坐标类，定义地理坐标点、坐标系和投影等
geometry 定义像素坐标点，以及操作线、面的工具函数等
control 控件类，定义控件以及缩放、TOC 等4个常用控件dom
定义操作DOM 的工具函数，用于添加事件监听的函数等
images 图片素材
1.2 Leaflet 对HTML5的支持
HTML5是新一代Web 标准，包括画布（Canvas）、
·75·第15卷第3期
文件操作（File API）、本地存储（localStorage等）、音频视频（Audio/Video）等众多新特性，减少了前端开发对第三方插件的依赖，更充分地利用了浏览器原生功能[6]。Leaflet作为新生的、先进的WebGIS开源类库，充分利用了HTML5的新特性来增强其显示效果和运行效率。
1.2.1 Canvas 
在Canvas出现之前，可通过SVG在WebGIS应用中绘制矢量图形，但SVG是一种用XML描述2D图形
的语言，不适合对大数据量（如大于10 000个要素）矢量图形进行渲染绘制[9]。Canvas是HTML5新增的标签类型，是使用Javascript脚本绘制图形的容器。其优势在于无需利用DOM保存图形，因此渲染性能较好，适用于绘制大量数据或需要时常刷新的情形[6]。Leaflet 对HTML5的支持度很好，原生支持使用Canvas来绘制矢量图形。
本项目中需要对上海市建筑物多边形数据进行渲染，数据量很大，利用HTML5的Canvas可满足本项目的需求。
1.2.2 File API
Leaflet插件Leaflet.FileLayer[10]利用HTML5新增的File API特性加载本地矢量数据文件，有两种方法：一种是点击控件按钮，在弹出的文件选择对话框中选择需要加载的数据即可；另一种是将数据文件直接拖放到浏览器中，即可完成数据加载。该控件原生支持GeoJSON、GPX、KML三种数据格式，本文通过扩展，使其可支持加载本地shp文件。
Leaflet插件Leaflet.Shapefile可实现通过指定本地路径来加载打包成zip的shp文件。Leaflet.FileLayer 可读取本地文件内容，再通过Leaflet.Shapefile的shp. parseZip(content)将读取的内容转化为Leaflet可识别的GeoJson图形对象。因此，通过结合使用Leaflet. FileLayer和Leaflet.Shapefile，可实现类似于ArcMap的加载本地矢量数据文件的功能，其本质在于利用了HTML5新增的File API特性。
2 系统功能实现
目前本系统已实现了查看、编辑和业务菜单下的功能。在菜单栏的“查看”选项下，设置了3个基本查看功能（地图平移、图形选择和属性查询）、5个视图导航功能（全图显示、缩放到图层、初始视图、上 一视图和下一视图）以及3个量测功能（坐标量测、距离量测和面积量测），如图 1所示。不同功能可能对应于不同的工作状态，因此需要考虑不同状态间切换
jquery源码在线时的细节处理。在菜单栏的“编辑”选项下，设置了5 个基本绘制功能（点、线、面、矩形和圆）、3个基本编辑功能（编辑属性、编辑图形和删除图形）、3个高级编辑功能（复制、合并和拆分图形）以及2个基本控制功能（确认和取消），另外还增加了2个基本查看功能（地图平移和图形选择）以便于绘制时切换查看状态，如图 2
所示。
图1 
“查看”选项下的菜单项
图2 “编辑”选项下的菜单项
3 应用实例
本系统的总体框架采用目前IT技术中流行且较成熟的“N”层结构方案，如图 3所示。其中，档案注记是将档案记录与地图上的建筑物实体建立对应关系的操作，即属性与图形的匹配，由数据录入员完成，是建立城市建设档案图形数据库中最重要的一部分工作。本文侧重于介绍前端图形编辑。
图3 系统总体框架层次结构图
用户界面是系统与用户之间进行交互和信息交换的媒介，用户界面的设计是否简洁、美观、便捷直接影响用户体验。本系统的用户界面选用jQuery EasyUI （简称EasyUI）和jQuery zTree（简称zTree）来搭建。EasyUI是一种基于jQuery的用户界面开源免费插件集合，提供了建立现代化的、具有交互性
的Javascript应用所需的基本功能，使用简单、功能强大，节省了开
顾振雄：基于Leaflet开源JS类库的在线图形编辑
地理空间信息·76·第15卷第3期
发产品的时间和规模。zTree 是基于jQuery 的免费开源“树插件”，用于搭建树状列表。
本系统的用户界面如图 4所示，借鉴了Microsoft 的菜单栏和ArcMap 应用主体部分，采用EasyUI 的layout 布局插件将主界面分为上下左右和中间5个区域，最上端为菜单栏，下端为数据窗口，左侧为可折叠的图层控制列表，右侧为可折叠的属性窗口，中间是地图。系统采用EasyUI 官方发布的Ribbon 扩展（Extension）来搭建具有Microsoft Office 2007选项风格的菜单栏，设置了图层、查看、编辑、业务、配准和常用6个选项作为一级菜单项，进而分别设置相应的二级菜单项。系统采用zTree 来搭建图层管理部分，可将图层分类、分层次管理，另外还能通过调整图层在树状列表中的上下位置来控制其盖压显示顺序。系统采用EasyUI 的PropertyGrid 和DataGrid 来搭建属性显示窗口和数据窗口。在查询状态下，点击地图中的图形，
可在属性窗口中显示该图形的属性信息；也可在数据窗口中查看矢量图层的属性表，即该矢量图层中所有图形的属性信息。用户界面的中间部分是基于Leaflet 的地图控件，具有鼠标拖动浏览、鼠标滚轮
缩放、双击放大等基本显示功能。系统采用黑白灰渐变作为界面主调，风格朴实而专业，对比清晰、耐看。
参考文献
[1]  杨鹏，邹时林.基于OpenLayers 的WebGIS 客户端的研发[J].
测绘与空间地理信息,2012,35(3):131-133
[2] 何贞铭，胡小夏，刘学锋.基于Flex 的WebGIS 客户端及其
应用[J].地理空间信息,2014,12(2):104-106
[3] 刘小驰，汪洋.基于RIA 技术的WebGIS 应用开发[J].信息
技术,2014(5):139-143[4] 徐卓揆.基于HTML5、Ajax 和Web Service 的WebGIS 研究[J].
测绘科学,2012,37(1):145-147
[5] Leaflet. An Open-source Javascript Library for Mobile-friendly
Interactive Maps[EB/OL].(2011-05-13)[2014-04-01].leafletjs
[6] 高楠楠.基于HTML5的WebGIS 前端类库设计与性能优化
实践研究[D].上海：华东师范大学,2014
[7] 喻静敏，游兰，吴华意.基于Google Earth API 的典型GIS
功能开发方法[J].地理空间信息,2014,12(4):55-57
[8] WIKI. Leaflet (Software)[EB/OL].(2015-10-28)[2015-12-12].
/wiki/Leaflet_(Software)
[9] DAXIANG12092205.Web 画图技术（svg、canvas、fusioncharts、
anychart）简介[EB/OL].(2013-11-03)[2015-01-29].blog. csdn/daxiang12092205/article/details/14104633
[10] Leaflet. Notable Leaflet Plugins[EB/OL].(2011-05-13)[2014-04-01].leafletjs/plugins.html 作者简介：顾振雄，硕士研究生，从事WebGIS 系统开发，数据
库管理等工作。
图4 用户界面
（上接第71页）高程方向绝大多数历元（超过99%）定位精度优于2.5 m ；在城市道路环境下动态定
位精度较差。静态数据与开阔天空动态数据的解算结果说明该算法总体正确，但对城市道路环境下动态数据解算精度不高，需要进行完善。
参考文献
[1]  蔡华，赵齐乐，孙汉荣，等.GNSS 实时数据质量控制[J].武
汉大学学报(信息科学版),2011,36(7):820-824
[2] 陆晨曦，谭云华，朱柏承，等.单频精密单点定位中基于卡
尔曼滤波的自适应导航算法[J].北京大学学报(自然科学版),2011,47(4):587-592
[3] 宋伟伟，施闯，姚宜斌，等.单频精密单点定位电离层
改正方法和定位精度研究[J].武汉大学学报(信息科学版),2009,34(7):778-781
[4] 涂锐，张勤，黄观文.单频精密单点定位电离层延迟处理方
法研究[J].大地测量与地球动力学,2010,30(2):99-103,108[5] 张小红，郭斐，李盼，等.GNSS 精密单点定位中的实时质量
控制[J].武汉大学学报(信息科学版),2012,37(8):940-944[6]
涂锐，黄观文，邹顺.天线相位中心偏差变化及改正模型对精密单点定位精度的影响[J].大地测量与地球动力学,2010,30(3):113-117
[7] 张小红，李星星，郭斐，等.GPS 单频精密单点定位软件实现与精度分析[J].武汉大学学报(信息科学版),2008,33(8): 783-787
[8]
Beran T, Kim D, Langley R B. High-precision Single-frequency GPS Point Positioning[J]. Proceedings of International Technical Meeting of the Satellite Division of the Institute of Navigation,2003:9-12
[9]
CHEN K, GAO Y. Real-time Precise Point Positioning Using Single Frequency Data[C]. Proceedings of ION GNSS,2005: 1 514-1 523
[10]
GAO Y, ZHANG Y F, CHEN K Z. Development of a Real-Time Single-frequency PPP System and Test Results[C].Proceedings of ION GNSS 2006, Fort Worth, TX
作者简介：杜仲进，硕士，工程师，主要从事GPS 数据处理及CORS 应用方面工作。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。