Leaflet
Leaflet是一个开源的JavaScript库,用于构建Web地图应用。首次发布于2011年,并于2012年7月30日进行第一次更新,发布了leaflet 0.4。[3]它支持大多数移动和桌面平台,支持HTML5和CSS3。其用户包括FourSquare、Pinterest和Flickr。
![]() | |
原作者 | Vladimir Agafonkin |
---|---|
首次发布 | 2011年5月13日 |
当前版本 |
|
源代码库 | |
编程语言 | JavaScript |
平台 | 参见浏览器支持 |
类型 | JavaScript函数库 |
许可协议 | BSD-2-Clause[2] |
网站 | leafletjs |
Leaflet允许没有GIS背景的开发人员非常容易地显示托管在公共服务器上的瓦片Web地图,并且可以叠加图层。它可以从GeoJSON文件中加载地理要素数据,设置样式,并创建交互式图层,如点击时会弹出窗口的标记。
乌克兰人Vladimir Agafonkin开发了Leaflet,他在2013年加入了Mapbox。[4] leaflet的最新版本为Leaflet 1.9,在2022年9月21日发布。
Leaflet能在所有主要的桌面和移动平台上工作,且可以使用许多插件进行扩展,源代码美观易懂,简单高效。42KB轻量化的Leaflet JS库提供了绝大多数开发者所需的地图特性。关于版本更新问题,Leaflet1.9版本将为之后2.0系列等重要版本升级奠定基础,但是2.0版本就目前来说仍需时间调试。据官方更新日志描述,未来将计划放弃支持IE浏览器;更新javascript版本兼容,使用ECMAScript标准版本以期待使用更加功能强大的javascript特性;模块标准化,未来仅使用单个模块化标准,降低分布式代码的复杂性;取消了“L”全局变量,以期为了更好地使用tree-shaking消除无用代码。1.x版本系列将更加专注于重要错误的修复以及过去版本的维护。
使用
编辑Leaflet的典型用法是将Leaflet的“map”元素绑定到HTML元素(例如div)上。然后将图层和标记添加到map元素中。
// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([51.505, -0.09], 13);
// add an OpenStreetMap tile layer
// Tile Usage Policy applies: https://operations.osmfoundation.org/policies/tiles/
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
Leaflet支持非球面墨卡托投影显示地图。[5]Leaflet库本身可以通过变量L
访问。
功能
编辑Leaflet原生支持Web地图服务(WMS)层、GeoJSON层、矢量层和瓦片层。通过插件支持许多其他类型的图层。
与其他Web地图库一样,由Leaflet实现的基本显示模型是一个基本地图,加上零个或多个半透明覆盖,上面显示零个或多个矢量对象。
Leaflet有一些特别的定制功能,例如自定义地图投影、基于图像和HTML的标记、和CSS3弹出窗口和控件等。[6]
部分实用功能举例
编辑Leaflet 的 onEachFeature 在处理例如 geojson 数据时非常方便。该函数包含两个参数:“feature”和“layer”。 “feature”允许我们访问 geojson 中的每个对象,“layer”允许我们添加弹出窗口、工具提示等。
下面给出了一个 javascript 示例:
let geoJson = L.geoJSON(geoJsonData,
{weight:2,
onEachFeature: getFeature,
style: getStyle
}).addTo(map);
const getFeature= (feature, layer) =>{
if (!feature.properties.name) return
layer.bindTooltip(feature.properties.cityName);
layer.bindPopup(
`
<ul>
<li>Name: ${feature.properties.cityName}</li>
<li>Population: ${feature.properties.population}</li>
</ul>
`
)
还可以向 getFeature 函数添加“async”关键字,以便使用 fetch() 等 Promise。我们可以利用 geojson 每个对象中的属性来创建自定义的 jsonqueries 并获取例如城市特定信息,并使用 layer.bindTooltip、layer.bindPopup 等显示它们。
元素
编辑主要的Leaflet对象类型有:[7]
- 栅格类型(TileLayer与ImageOverlay)
- 矢量类型(Path、Polygon,以及特定类型,如Circle)
- 群组类型(LayerGroup、FeatureGroup与GeoJSON)
- 控件(Zoom、Layers等)
还有各种工具类,例如用于管理投影、变换和与DOM交互的接口。
GIS格式支持情况
编辑Leaflet的核心支持少数GIS标准格式,其他插件来支持。
标准 | 支持情况 |
---|---|
GeoJSON | 良好,通过geoJson 函数支持,核心功能[8]
|
KML、CSV、WKT、TopoJSON、GPX | 用Leaflet-Omnivore插件支持[9] |
WMS | 通过TileLayer.WMS [10]子类型支持,核心功能
|
WFS | 不支持,不过有第三方插件。[11] |
GML | 不支持。[12] |
浏览器支持
编辑Leaflet 0.7支持Chrome、Firefox、Safari 5+、Opera 12+和IE 7-11。[6]
最新发布的版本Leaflet 1.9.2发生了少许变化,在桌面部分支持Chrome、firefox、Safari 5+、 Opera 12+ IE 9-11和Edge。而在移动端则支持Safari for iOS 7+、Chrome for mobile、 Firefox for mobile、和IE10+ for Win8 devices。 [6]
与其他库的比较
编辑Leaflet与OpenLayers之间可以进行比较,因为两者都是开源的,而且客户端都只有JavaScript库。与OpenLayers的230,000行相比,整个库要小得多,大约有7,000行代码(截至2015年)。[13]与OpenLayers相比,它的代码占用空间更小(大约是123KB[14]相比于423KB[15]),部分原因是它使用模块化结构。Leaflet的代码库更新,用上了JavaScript的新特性,以及HTML5和CSS3。还有,Leaflet缺乏一些OpenLayers原生支持的特性,比如Web要素服务(WFS),[16]以及EPSG:3857/4326/3395以外的各种投影方式。[17]
它还可以与私有的、封闭源代码的Google地图API(2005年推出)和Bing地图API相比较,后两者都包含了一个重要的服务器端组件,提供地址编码、路径规划、搜索等服务,并与Google地球等功能集成。谷歌地图API提供了速度和简单性,但不是灵活的,只能用于访问谷歌地图服务。不过,Google API的新DataLayer 部分确实允许显示外部数据源。[18]
Leaflet的特点
编辑Leaflet 是一个开源的 JavaScript 库,用于构建互动地图。它由 Vladimir Agafonkin 开发,并由众多贡献者共同维护。Leaflet 于2011年首次发布,迅速成为构建 Web 地图应用的热门选择,特别是在移动设备上表现优异。Leaflet 轻量且性能优异,其核心库仅几十KB,但功能强大,支持包括瓦片图、矢量图和自定义图层在内的多种地图图层。 Leaflet 提供了丰富的插件和 API,使开发者能够轻松添加标记、弹出窗口、图例和其他交互元素。插件生态系统非常活跃,有数百个社区贡献的插件扩展了 Leaflet 的功能,如路径动画、聚类标记和测量工具等。此外,Leaflet 还支持各种地图服务提供商,如 OpenStreetMap、Mapbox 和 Google Maps,开发者可以灵活地选择和切换不同的地图源。 Leaflet 的文档全面,社区活跃,为开发者提供了丰富的资源和支持。无论是初学者还是经验丰富的开发者,都能从中获益。它已被广泛应用于各种 Web 地图项目,如实时交通地图、环境监测、旅游导航和灾害应对等。例如,在环境监测项目中,Leaflet 可以用于展示污染源和监测数据;在旅游导航中,可以帮助用户找到景点和路线。Leaflet 的简单易用和灵活性,使其成为创建互动地图的不二选择。 [19]首页就非常明确的声明了,他们开发的这个JavaScript 库是一个关注移动端并且对移动端用户非常友好的,关于交互式地图的 JavaScript 库,并且这个库是完全开源的。
Leaflet插件
编辑因为Leaflet本身是一款十分轻量化的JavaScript库,所以它只重于一组核心功能的实现,然而开发者可以通过使用第三方插件的方式来拓展Leaflet的其他功能,你可以在Leaflet 插件[20]中找到并下载这些插件,这些插件有关于实现地图交互,动态数据加载,实现数据可视化等各种功能。
外部链接
编辑参考文献
编辑- ^ v1.9.4 Latest. 2023年5月18日 [2023年5月20日].
- ^ License - Leaflet. Leaflet. [2018-11-03]. (原始内容存档于2021-01-06).
- ^ Lovelace, Robin. Testing web map APIs - Google vs OpenLayers vs Leaflet. [2018-11-03]. (原始内容存档于2017-11-03).
- ^ MacWright, Tom. Leaflet Creator Vladimir Agafonkin Joins MapBox. 2014-08-06 [2018-11-03]. (原始内容存档于2015-09-12).
- ^ Top Data Visualization tools by Nataly Otair. 2020-10-08 [2020-09-06]. (原始内容存档于2020-11-25).
- ^ 6.0 6.1 6.2 Features. [2018-11-03]. (原始内容存档于2021-02-07).
- ^ Leaflet API reference. [2018-11-03]. (原始内容存档于2021-01-05).
- ^ Using GeoJSON with Leaflet. [2018-11-03]. (原始内容存档于2020-11-11).
- ^ leaflet-omnivore. October 5, 2021 [2020-12-13]. (原始内容存档于2020-10-19) –通过GitHub.
- ^ TileLayer.WMS. [2018-11-03]. (原始内容存档于2021-01-05).
- ^ Leaflet with WFS Example. July 19, 2019 [2020-12-13]. (原始内容存档于2020-09-30) –通过GitHub.
- ^ Support for GML. 2012-06-23 [2018-11-03]. (原始内容存档于2016-09-27).
- ^ OpenHub.net comparison between OpenLayers and Leaflet. OpenHub.net. [2018-11-03]. (原始内容存档于2014-08-08).
- ^ Leaflet frontpage. Leaflet - An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps. [2018-11-03]. (原始内容存档于2021-02-07).
- ^ OpenLayers 3.4.0 compressed source code. OpenLayers.org. [2018-11-03]. (原始内容存档于2016-11-29).
- ^ Various plugins providing WFS-support are listed on https://leafletjs.com/plugins.html (页面存档备份,存于互联网档案馆)
- ^ Projection. [2018-11-03]. (原始内容存档于2021-01-05).
- ^ Data Layer. Google Maps Platform. Google. [2018-11-03]. (原始内容存档于2021-01-28).
- ^ leaflet官网. leaflet. [2022-10-23]. (原始内容存档于2023-01-10).
- ^ Leaflet 插件. Leaflet plugins. [2022-10-23]. (原始内容存档于2021-01-19).