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 库

2022 年 9 月 21 日 — Leaflet 1.9 正式发布!

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

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

 
Marker
 
 
 
 
 
 Leaflet | © OpenStreetMap contributors

在这里,我们在 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 OverflowGIS Stack Exchange 和 GitHub issues 上帮助他人、 发推特 @LeafletJS 或者以及在同事和朋友中推广 Leaflet 来帮助该项目。

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

posted on   漫思  阅读(14)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 微软正式发布.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 阿里管理三板斧

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示