Leaflet

一个开源的 JavaScript 库
用于移动友好型交互式地图

2023 年 5 月 18 日 - Leaflet 1.9.4 已发布！

Leaflet 是领先的开源 JavaScript 库，用于移动友好的交互式地图。仅重约 42 KB 的 JS，它包含大多数开发人员所需的所有地图功能。

Leaflet 的设计理念是简洁、性能和易用性。它在所有主要的桌面和移动平台上都能高效运行，可以扩展许多插件，具有美观、易于使用和文档齐全的 API，以及简单易读的源代码，令人愉悦地贡献。

这里我们在 '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 CSS popup.<br> Easily customizable.')
    .openPopup();

使用快速入门指南了解更多信息，查看其他教程，或者直接前往API 文档。如果您有任何问题，请先查看常见问题解答。

值得信赖的选择

功能

Leaflet 并不试图为所有人做所有的事情。相反，它专注于使基本功能完美运行。

开箱即用的图层

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

交互功能

  • 带有惯性的拖动平移
  • 滚轮缩放
  • 移动设备上的捏合缩放
  • 双击缩放
  • 缩放至区域(按住 Shift 拖动)
  • 键盘导航
  • 事件: 点击、鼠标悬停等
  • 标记拖动

视觉功能

  • 缩放和平移动画
  • 瓦片和弹出框淡入淡出动画
  • 非常不错的默认设计用于标记、弹出框和地图控件
  • 视网膜分辨率支持

自定义功能

  • 纯 CSS 弹出框和控件方便重新设置样式
  • 基于图像和 HTML 的标记
  • 简单接口用于自定义地图图层和控件
  • 自定义地图投影(开箱即用 EPSG:3857/4326/3395)
  • 强大的 OOP 功能用于扩展现有类

性能功能

  • 移动设备上的硬件加速 使其感觉与原生应用一样流畅
  • 利用 CSS 功能使平移和缩放非常流畅
  • 智能折线/多边形渲染使用动态剪裁和简化使其非常快
  • 模块化构建系统用于省略不需要的功能
  • 消除移动设备上的点击延迟

地图控件

  • 缩放按钮
  • 署名
  • 图层切换器
  • 比例尺

浏览器支持

桌面

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

移动

  • iOS 7+ 的 Safari
  • 移动版 Chrome
  • 移动版 Firefox
  • Win8 设备上的 IE10+

其他

  • 极其轻量级
  • 没有外部依赖

如果您发现 Leaflet 中确实缺少某些功能，请先检查是否有插件，以及之前是否已经在GitHub 问题中讨论过。如果没有，请在 GitHub 上创建一个新的问题。

参与

让我们一起打造世界上最好的地图库！Leaflet 最初由Volodymyr Agafonkin创建，但现在由一个庞大的贡献者社区开发。欢迎拉取请求。但是，还有更多方法可以参与 Leaflet 的开发。

您可以通过发现和报告错误、改进文档、在Stack Overflow、GIS Stack Exchange 和GitHub 问题上帮助他人，在@LeafletJS上发推并向您的同事和朋友宣传 Leaflet 来极大地帮助该项目。

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