大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 Leaflet

JavaScript library for mobile-friendly interactive maps

Leaflet 是领先的开源 JavaScript 库，适用于移动设备友好的交互式地图。 Leaflet 在 gzip 压缩后只有 42k 的 JavaScript 和 4 KB 的 CSS 代码，但具有大多数开发人员所需的所有地图功能。

Leaflet 的设计考虑到了简单性、性能和可用性、开箱即用，可在所有主要桌面和移动平台上高效运行，利用现代浏览器功能，同时也可以在旧浏览器上访问。同时，Leaflet 可以通过大量插件（目前社区已经有数百个插件）进行扩展，拥有漂亮、易于使用且文档齐全的 API 以及简单、可读的源代码。

Leaflet 的丰富插件生态包括以下几类：

瓦片和图像层 (Tile & image layers)：允许加载不同地图并提供图块和图像层的功能等
平铺展示 (Overlay Display)：提供加载叠加数据（GIS 矢量数据）的新方法，包括：点、线和多边形等
地图交互 (Map interaction)：提供与地图本身交互的新方式，包括：图层切换控制、交互式平移 / 缩放、添加书签的平移 / 缩放、全屏、小地图和同步地图、鼠标坐标、用户界面、打印 / 导出、地理定位等等

最后，值得一提的是，Leaflet 的作者是一名乌克兰人，目前 Leaflet 项目通过 BSD-2-Clause 协议在 Github 开源，有接近 40k 的 star、5.7k 的 fork、232k 的项目依赖量、代码贡献者 800+、妥妥的前端优质开源项目。

如何使用 Leaflet

Map 是 API 的中心类，其用于在页面上创建地图并对其进行操作。

// 使用给定的中心和缩放初始化“地图”div 上的地图
var map = L.map('map', {
    center: [51.505, -0.09],
    // 中心位置
    zoom: 13
});

下面示例代码在 map 的 div 中创建一个地图，添加选择的图块，然后在弹出窗口中添加带有一些文本的标记：

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '? OpenStreetMap contributors'
}).addTo(map);
// 设置标记
L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS popup.
 Easily customizable.')
    .openPopup();

Leaflet 还支持复杂的缩放操作，比如下面的示例：

var map = L.map('map', {
    minZoom: 0,
    maxZoom: 0
});
var cartodbAttribution = '? OpenStreetMap contributors, ? CARTO';
var positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
    attribution: cartodbAttribution
}).addTo(map);

map.setView([0, 0], 0);

Leaflet 的功能实在是非常多，非常强大，如果有兴趣可以参考文末的资料。

本文总结

本文主要和大家介绍 Leaflet ，其是一款领先的开源 JavaScript 库，适用于移动设备友好的交互式地图。因为篇幅问题，关于 Leaflet 只是做了一个简短的介绍，但是文末的参考资料提供了大量优秀文档以供学习，如果有兴趣可以自行阅读。如果大家有什么疑问欢迎在评论区留言。

参考资料

https://github.com/Leaflet/Leaflet

https://leafletjs.com/

https://leafletjs.com/reference.html

https://www.parajuligaurav.com.np/2022/09/leaflet-js-tutorial-how-to-learn.html

https://www.codementor.io/@victorgerardtemprano/google-maps-api-or-leaflet--what-s-best-for-your-project-faaev60vm

思凡资源网

为何 Leaflet 号称世界交互式地图天花板?

什么是 Leaflet

如何使用 Leaflet

本文总结

参考资料