维基百科

Leaflet

Leaflet是一个开源的JavaScript库，用于构建Web地图应用。首次发布于2011年，并于2012年7月30日进行第一次更新，发布了leaflet 0.4。[2]它支持大多数移动和桌面平台，支持HTML5和CSS3。其用户包括FourSquare、Pinterest和Flickr。

Leaflet
原作者Vladimir Agafonkin
首次发布2011年5月13日 (2011-05-13)
当前版本1.9.4（2023年5月18日 (2023-05-18)）
源代码库
编辑维基数据链接
编程语言JavaScript
平台参见浏览器支持
类型JavaScript函式库
许可协议BSD-2-Clause[1]
网站leafletjs.com

Leaflet让无GIS背景的开发人员可轻易地展示公共服务器上的瓦片Web地图（英语：tiled web map），并且可以叠加图层。Leaflet也可展示GeoJSON格式的空间数据，并设置样式、创建交互式图层，如点击时会弹出窗口的标记。

乌克兰人Vladimir Agafonkin开发了Leaflet，他在2013年加入了Mapbox。[3] Leaflet的最新版本为Leaflet 1.9.4，在2023年5月18日发布。

Leaflet能运作于所有主要的桌面和移动平台，并且有许多插件供扩展，源代码美观易懂，简单高效。42KB轻量化的Leaflet JS库提供了绝大多数开发者所需的地图特性。关于版本更新问题，Leaflet1.9版本将为之后2.0系列等重要版本升级奠定基础，但是2.0版本就目前来说仍需时间调试。据官方更新日志描述，未来将计划放弃支持IE浏览器；更新JavaScript版本兼容，使用ECMAScript标准版本以期待使用更加功能强大的JavaScript特性；模块标准化，未来仅使用单个模块化标准，降低分布式代码的复杂性；取消了“L”全局变量，以期为了更好地使用tree-shaking消除无用代码。1.x版本系列将更加专注于重要错误的修复以及过去版本的维护。

使用

编辑
 
使用Leaflet的基本例子

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: '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
 }).addTo(map);

Leaflet支持非球面墨卡托投影显示地图。[4]Leaflet库本身可以通过变量L访问。

功能

编辑

Leaflet原生支持Web地图服务（英语：Web Map Service）（WMS）层、GeoJSON层、矢量层和瓦片层。通过插件支持许多其他类型的图层。

与其他Web地图库一样，由Leaflet实现的基本显示模型是一个基本地图，加上零个或多个半透明覆盖，上面显示零个或多个矢量对象。

Leaflet有一些特别的定制功能，例如自定义地图投影、基于图像和HTML的标记、和CSS3弹出窗口和控件等。[5]

部分实用功能举例

编辑

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对象类型有：[6]

  • 栅格类型（TileLayer与ImageOverlay）
  • 矢量类型（Path、Polygon，以及特定类型，如Circle）
  • 群组类型（LayerGroup、FeatureGroup与GeoJSON）
  • 控件（Zoom、Layers等）

还有各种工具类，例如用于管理投影、变换和与DOM交互的接口。

GIS格式支持情况

编辑

Leaflet的核心支持少数GIS标准格式，其他插件来支持。

标准 支持情况
GeoJSON 良好，通过geoJson函数支持，核心功能[7]
KML、CSV、WKT、TopoJSON、GPX 用Leaflet-Omnivore插件支持[8]
WMS（英语：Web Map Service） 通过TileLayer.WMS[9]子类型支持，核心功能
WFS（英语：Web Feature Service） 不支持，不过有第三方插件。[10]
GML 不支持。[11]

浏览器支持

编辑

Leaflet 0.7支持Chrome、Firefox、Safari 5+、Opera 12+和IE 7-11。[5]

最新发布的版本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。 [5]

与其他库的比较

编辑

Leaflet与OpenLayers之间可以进行比较，因为两者都是开源的，而且客户端都只有JavaScript库。与OpenLayers的230,000行相比，整个库要小得多，大约有7,000行代码（截至2015年）。[12]与OpenLayers相比，它的代码占用空间更小（大约是123KB[13]相比于423KB[14]），部分原因是它使用模块化结构。Leaflet的代码库更新，用上了JavaScript的新特性，以及HTML5和CSS3。还有，Leaflet缺乏一些OpenLayers原生支持的特性，比如Web要素服务（英语：Web Feature Service）（WFS），[15]以及EPSG:3857/4326/3395以外的各种投影方式。[16]

它还可以与私有的、封闭源代码的Google地图API（2005年推出）和Bing地图API相比较，后两者都包含了一个重要的服务器端组件，提供地址编码、路径规划、搜索等服务，并与Google地球等功能集成。谷歌地图API提供了速度和简单性，但不是灵活的，只能用于访问谷歌地图服务。不过，Google API的新DataLayer 部分确实允许显示外部数据源。[17]

Leaflet的特点

编辑

Leaflet 是一个开源的 JavaScript 库，用于构建互动地图。它由 Vladimir Agafonkin 开发，并由众多贡献者共同维护。Leaflet 于2011年首次发布，迅速成为构建 Web 地图应用的热门选择，特别是在移动设备上表现优异。Leaflet 轻量且性能优异，其核心库仅几十KB，但功能强大，支持包括瓦片图、矢量图和自定义图层在内的多种地图图层。 Leaflet 提供了丰富的插件和 API，使开发者能够轻松添加标记、弹出窗口、图例和其他交互元素。插件生态系统非常活跃，有数百个社区贡献的插件扩展了 Leaflet 的功能，如路径动画、群集标记和测量工具等。此外，Leaflet 还支持各种地图服务提供商，如 OpenStreetMap、Mapbox 和 Google Maps，开发者可以灵活地选择和切换不同的地图源。 Leaflet 的文档全面，社区活跃，为开发者提供了丰富的资源和支持。无论是初学者还是经验丰富的开发者，都能从中获益。它已被广泛应用于各种 Web 地图项目，如实时交通地图、环境监测、旅游导航和灾害应对等。例如，在环境监测项目中，Leaflet 可以用于展示污染源和监测数据；在旅游导航中，可以帮助用户找到景点和路线。Leaflet 的简单易用和灵活性，使其成为创建互动地图的不二选择。 [18]首页就非常明确的声明了，他们开发的这个 JavaScript 库是一个关注移动端并且对移动端用户非常友好的，关于交互式地图的 JavaScript 库，并且这个库是完全开源的。

Leaflet插件

编辑

由于 Leaflet 是一款轻量化的 JavaScript 库，它主要提供网页地图的核心功能。如果需要更多功能，开发者可用第三方插件来扩充，包括地图互动、动态资料载入、资料视觉化等[19]。


外部链接

编辑

参考文献

编辑
  1. ^ License - Leaflet. Leaflet. [2018-11-03]. （原始内容存档于2021-01-06）. 
  2. ^ Lovelace, Robin. Testing web map APIs - Google vs OpenLayers vs Leaflet. [2018-11-03]. （原始内容存档于2017-11-03）. 
  3. ^ MacWright, Tom. Leaflet Creator Vladimir Agafonkin Joins MapBox. 2014-08-06 [2018-11-03]. （原始内容存档于2015-09-12）. 
  4. ^ Top Data Visualization tools by Nataly Otair. 2020-10-08 [2020-09-06]. （原始内容存档于2020-11-25）. 
  5. ^ 5.0 5.1 5.2 Features. [2018-11-03]. （原始内容存档于2021-02-07）. 
  6. ^ Leaflet API reference. [2018-11-03]. （原始内容存档于2021-01-05）. 
  7. ^ Using GeoJSON with Leaflet. [2018-11-03]. （原始内容存档于2020-11-11）. 
  8. ^ leaflet-omnivore. October 5, 2021 [2020-12-13]. （原始内容存档于2020-10-19） –通过GitHub. 
  9. ^ TileLayer.WMS. [2018-11-03]. （原始内容存档于2021-01-05）. 
  10. ^ Leaflet with WFS Example. July 19, 2019 [2020-12-13]. （原始内容存档于2020-09-30） –通过GitHub. 
  11. ^ Support for GML. 2012-06-23 [2018-11-03]. （原始内容存档于2016-09-27）. 
  12. ^ OpenHub.net comparison between OpenLayers and Leaflet. OpenHub.net. [2018-11-03]. （原始内容存档于2014-08-08）. 
  13. ^ Leaflet frontpage. Leaflet - An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps. [2018-11-03]. （原始内容存档于2021-02-07）. 
  14. ^ OpenLayers 3.4.0 compressed source code. OpenLayers.org. [2018-11-03]. （原始内容存档于2016-11-29）. 
  15. ^ Various plugins providing WFS-support are listed on https://leafletjs.com/plugins.html （页面存档备份，存于互联网档案馆）
  16. ^ Projection. [2018-11-03]. （原始内容存档于2021-01-05）. 
  17. ^ Data Layer. Google Maps Platform. Google. [2018-11-03]. （原始内容存档于2021-01-28）. 
  18. ^ leaflet官网. leaflet. [2022-10-23]. （原始内容存档于2023-01-10）. 
  19. ^ Leaflet 插件. Leaflet plugins. [2022-10-23]. （原始内容存档于2021-01-19）. 
检索自“https://zh.wikipedia.org/w/index.php?title=Leaflet&oldid=84560129”