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

大家好，欢迎来到IT知识分享网。

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

什么是 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: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); // 设置标记 L.marker([51.5, -0.09]).addTo(map) .bindPopup('A pretty CSS popup.<br> Easily customizable.') .openPopup();

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

var map = L.map('map', { minZoom: 0, maxZoom: 0 }); var cartodbAttribution = '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="https://carto.com/attribution">CARTO</a>'; 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