Leaflet was created 11 years ago by Volodymyr Agafonkin, a Ukrainian citizen living in Kyiv.
Leaflet was created 11 years ago by Volodymyr Agafonkin, a Ukrainian citizen living in Kyiv.
一个开源并且对移动端友好的
交互式地图 JavaScript 库
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: '© <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();
谁在使用 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 上帮助他人、 发推特 @LeafletJS 或者以及在同事和朋友中推广 Leaflet 来帮助该项目。
欢迎查看贡献指南,了解更多参与 Leaflet 开发的信息。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· 面试官:你是如何进行SQL调优的?
2022-09-07 macOS10.15安装qt出现 “无法打开“qt-opensource-mac-x64-5.13.2.app”,因为Apple无法检查其是否包含恶意软件。
2021-09-07 Macbook pro Late2013全靠自己换电池
2021-09-07 如何为MacBook Air 13 更换故障电池
2021-09-07 这 5 个前端组件库,可以让你放弃 jQuery UI
2021-09-07 美国零售业传奇落幕,西尔斯因何走向覆灭?
2021-09-07 西尔斯 (公司简称)
2021-09-07 阿里管理三板斧