Leaflet开发入门
- 开发环境配置
- Leaflet开发库
- 开发移动端Hybrid App或移动Web App
开发环境配置
电子地图已经渗透到O2O、生活服务、出行等领域,传统的GIS也孕育着互联网基因。在国内互联网电子地图领域,百度地图和高德地图较为出色,天地图作为国家地理信息公共服务平台,推出了面向互联网的公众版在线地图服务与API。国内在开放源代码这一方面做得远远不够,相比而言国外开源代码较多且丰富,如人气较高的OpenLayers、Leaflet、Mapbox GL等。
简单而言,Leaflet就是一个开源的前端地图交互类库,具有轻量级、支持移动端、丰富的插件资源等特点。2016年9月27日,Leaflet 1.0版本发布,越来越多的开发者加入社区,成为Leaflet的忠实用户,使得Leaflet的生态逐渐壮大。目前,Leaflet强大的开源库插件涉及地图应用的各个方面,包括地图服务、数据提供、数据格式、地理编码、路线搜索、地图控件等类型的插件。Leaflet官网的网址为http://leafletjs.com,GitHub项目的网址为https://github.com/Leaflet
使用Leaflet开发WebGIS应用,先要配置Leaflet开发环境,这也是Leaflet开发的必备步骤。
(1)获取Leaflet开发库。Leaflet是一个免费的开源库,用户可以从Leaflet官网下载,单击其官网首页的“Download”链接进入资源页面下载Leaflet开发库,
用户也可以从GitHub上的Leaflet项目资源中获取Leaflet开发库。在Leaflet的资源页面中,提供了当前最新版本的Leaflet开发库,Leaflet开发库分别提供了Leaflet开发必备的核心开发库、样式文件、图片资源。
Leaflet开发库如图
,包括如下内容。
Leaflet开发库
• leaflet.js(leaflet-src.js):核心开发库,集成当前Leaflet的所有核心功能,其中leaflet-src.js为源码,供调试时使用。
• leaflet.css:样式类,包含Leaflet的所有默认样式信息。
• images:图像资源文件。
需要注意的是,使用的是Leaflet V1.3.3版本开发库,其官网会即时发布当前最新版本的Leaflet开发库。
(2)选定一个开发工具。针对PC端的Web应用需求,Leaflet作为一个基于JavaScript的WebGIS客户端开发库,本质就是HTML+JavaScript脚本的Web客户端开发,可以使用DreamWeaver等工具开发网页,还可以直接使用文本编辑器等编写网页。目前,除了DreamWeaver工具,开发Web应用时还有很多集成开发环境(Integrated Development Environment,IDE)供大家选择。.NET体系就是微软的Visual Studio,包括2010、2012、2015、2019等多个版本;Java的开发环境包括Eclipse、JBuilder、NetBeans等,这些都是主流的Web应用开发环境。
由于Leaflet是纯客户端的开发库,用户可以根据自己的喜好选择合适的开发工具。如果涉及后端开发,则建议根据.NET或Java体系类别选择相应的集成开发环境。在此,使用Microsoft Visual Studio 2010(简称VS2010)作为开发工具,部分功能实例涉及的后端开发采用.NET实现。用户可以从微软官网下载Microsoft Visual Studio 2010的安装程序。Leaflet以简单、易用、高效为开发理念,设计轻巧灵活,非常易于理解和上手,这也是它被众多用户喜爱的原因之一。Leaflet作为备受青睐的开源地图开发库,主要有以下几个特性。
(1)友好的移动端应用。Leaflet是轻量级、跨平台的,其压缩库的容量约为30KB,非常适应移动端应用场景,并且PC上的所有效果均能在移动端上无缝呈现,可以轻松在iPad、iPhone和Android等移动端构建地图应用。
(2)丰富的可视化效果。Leaflet可以轻松地实现自定义标注功能,并支持视频流。在标注图片时可以设置图标图片和阴影图片,让标注更有立体感;同时可以设置锚点的位置,让图标定位更加精准;另外,还可以像添加一个地图图层一样添加视频文件并在地图上展示。此外,还有很多诸如时空动画、热力图、聚合点等效果都可以轻松实现,增强可视化效果。
(3)出众的渲染性能。Leaflet采用HTML5实现高性能渲染,基于出色的地图渲染引擎,将会呈现出更加细腻流畅的地图,可以轻松支持大数据量级的点数据渲染,渲染性能非常出众。
(4)支持多种数据格式。Leaflet支持大部分服务标准与数据格式,并且可以自定义扩展,使用户在项目对接上无后顾之忧。GeoJSON是一种空间数据格式,Leaflet对此空间数据格式支持较好,也全面支持OGC服务规范(WMS、WFS等)。
(5)灵活的可扩展性。Leaflet受欢迎的主要因素之一就是其灵活的可扩展性,这让其在社区中拥有众多的扩展插件,满足各种功能需求。Leaflet可与专业GIS服务平台结合,丰富的GIS前端开发框架与专业的GIS服务平台强强联合,无缝对接,已经成为GIS领域应用开发的主力军。
开发移动端Hybrid App或移动Web App
,也是基于HTML5+JavaScript开发,但两种方式略有不同。移动端Hybrid App是原生开发嵌入H5页面,一般要借助移动端原生开发的工具,如Android开发使用主流的Eclipse或Android Studio工具、iOS开发使用苹果的Xcode等。移动Web App是为移动浏览器设计的基于Web的应用,与普通Web开发类似,应用部署在服务器端,移动端直接通过浏览器访问,不需要在设备上下载安装。因此,对于移动Web App方式,用户在进行移动网页开发时可以选择与PC端Web应用开发相同的开发工具。