Leaflet

一个开源并且对移动端友好的
交互式地图 JavaScript 库

2023 年 5 月 18 日 — Leaflet 1.9.4 正式发布!

Leaflet 是一个开源并且对移动端友好的交互式地图 JavaScript 库。 它大小仅仅只有 42 KB of JS, 并且拥有绝大部分开发者所需要的所有地图特性 。

Leaflet 简单、高效并且易用。 它可以高效的运行在桌面和移动平台, 拥有着大量的 扩展插件、 优秀的文档、简单易用的 API 和完善的案例, 以及可读性较好的 源码 。

在这里,我们在 id 为 map 的 div 中创建一个地图, 选择瓦片数据源, 添加一个标记点并且在弹出层上显示一些文本:

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

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
    .openPopup();

通过 快速入门指南, 查看 其它教程, 或者访问 API 文档了解更多信息。 如有任何疑问, 请先查看 FAQ。

谁在使用 Leaflet

特性

Leaflet 并不会试图为每个人做完所有的事情。相反，它更专注于让基本的东西完美地工作。

开箱即用的图层

  • 瓦片图层, WMS
  • 标记点, 弹出层
  • 矢量图层: 折线, 多边形, 圆形, 矩形
  • 图像叠加
  • GeoJSON

交互功能

  • 拖动平移
  • 滚轮缩放
  • 在手机上缩放
  • Double click zoom
  • 缩放区域 (shift-drag)
  • 按键 导航
  • 事件: 点击, 鼠标悬停, 等.
  • 标记 拖动

视觉特性

  • 缩放和平移动画
  • 平铺和弹出淡出动画
  • 设计非常棒的 标记, 弹出层和地图控件
  • 支持视网膜分辨率

自定义特性

  • 纯 CSS3 弹出窗口和控件, 可以轻松重置样式
  • 基于图像和 HTML 的标记
  • 接口简单的 自定义地图图层和控件
  • 自定义地图投影 (with EPSG:3857/4326/3395 开箱即用)
  • 强大的 OOP 设计 可扩展现有的类

性能特性

  • 移动设备上硬件加速 像原生 APP 一样流畅
  • 使用 CSS3 特性 实现真正平滑的平移和缩放
  • 快速的动态剪切和简化功能的智能折线/多边形渲染
  • 模块化构建 避免不必要的功能
  • 消除手机点击延迟

地图控件

  • 缩放按钮
  • 版权
  • 图层切换
  • 比例尺

浏览器支持

桌面

  • Chrome
  • Firefox
  • Safari 5+
  • Opera 12+
  • IE 9–11
  • Edge

移动端

  • Safari for iOS 7+
  • Chrome for mobile
  • Firefox for mobile
  • IE10+ for Win8 devices

其它

  • 轻巧
  • 没有外部依赖

如果您发现 Leaflet 中确实缺少某些功能, 请首先检查是否有相关功能的 插件 或者它是否已经在 GitHub issues 讨论过。 如果都没有, 请提交一个新的 GitHub issue。

参与进来

让我们一起创建一个世界上最好的地图库吧! Leaflet 虽然最早由 Volodymyr Agafonkin 创建, 但现在由一个大型贡献者社区共同开发. 始终欢迎大家踊跃提交 PR。 除此之外, 还有更多方法可以参与 Leaflet 的开发。

你可以帮忙发现并提交 BUG、完善文档、 在 Stack Overflow、GIS Stack Exchange 和 GitHub issues 上帮助他人、 发 X @LeafletJS 或者以及在同事和朋友中推广 Leaflet 来帮助该项目。

欢迎查看贡献指南，了解更多参与 Leaflet 开发的信息。