Leaflet 是领先的用于移动友好交互式地图的开源 JavaScript 库。仅仅重约39KB的JS,它拥有大多数开发者所需要的所有地图功能。 Leaflet是设计简单，性能和可用性的思想。它可以在所有主要的桌面和移动平台上高效工作，可以通过许多插件进行扩展，有一个漂亮，易于使用和文档良好的API和一个简单，可读的源代码，这是一种快乐的贡献。
特性
Leaflet 不会试图为每个人做所有事情。相反，它专注于使基本事物完美运行。
开箱即用的分层
- 瓦片图层，WMS
- 标记、弹出窗口
- 矢量图层：折线、多边形、圆形、矩形
- 图像叠加
- 地理数据
交互功能
- 惯性拖动平移
- 滚轮变焦
- 在移动设备上捏缩放
- 双击缩放
- 缩放到区域（按住 Shift 键拖动）
- 键盘导航
- 事件：单击、鼠标悬停等
- 标记拖动
视觉特性
- 缩放和平移动画
- 磁贴和弹出淡入淡出动画
- 标记、弹出窗口和地图控件的默认设计非常漂亮
- 视网膜分辨率支持
定制特性
- 纯 CSS3 弹出窗口和控件，便于重新设置样式
- 基于图像和 HTML 的标记
- 自定义地图图层和控件的简单界面
- 自定义地图投影（开箱即用的 EPSG：3857/4326/3395）
- 用于扩展现有类的强大 OOP 工具
性能特性
- 移动设备上的硬件加速使其感觉像本机应用程序一样流畅
- 利用 CSS3 功能使平移和缩放非常流畅
- 具有动态裁剪和简化功能的智能折线/多边形渲染使其非常快
- 模块化构建系统，可省略你不需要的功能
- 在移动设备上点按消除延迟
地图控件
- 变焦按钮
- 属性
- 图层切换器
- 缩放
浏览器支持
桌面
- Chrome
- Firefox
- Safari 5+
- Opera 12+
- IE 7–11
移动
- 适用于 iOS 7+ 的 Safari 浏览器
- 安卓浏览器 2.2+， 3.1+， 4+
- 适用于移动设备的铬
- 火狐手机版
- 适用于 Win8 设备的 IE10+
其他
- 极其轻巧
- 无外部依赖关系
快速入门
这个循序渐进的入门指南将会帮助你快速了解 Leaflet 基础知识，包括设置 Leaflet 地图、使用标记以及处理事件。
准备一个新的页面
在文档的 head 部分引入 Leaflet CSS 文件和 JavaScript 文件：
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@0.7.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@0.7.3/dist/leaflet.js"></script>
</head>
将具有特定 id 的 div 元素放置在你希望地图所在的位置：
<body>
<div id="map" class="leaflet-container"></div>
</body>确保地图容器定义了固定 height，例如在 CSS 中设置：
html,
body {
height: 100%;
margin: 0;
}
.leaflet-container {
height: 400px;
width: 600px;
}设置地图
让我们用高德地图瓦片（Tile）底图创建一张深圳市中心的地图。首先，我们将初始化地图并将其视图设置为我们选择的地理坐标和缩放级别：
var center= [22.5143, 114.063652];
var map = L.map('map').setView([51.505, -0.09], 13);请注意，`setView 调用还会返回地图对象——大多数 Leaflet 方法在不返回显式值时的行为都是这样的，这允许你可以很方便的进行链式调用。
接下来我们将添加一个瓦片（Tile）图层到地图中，通常需要为瓦片（Tile）图像、版权文本和图层的最大缩放级别设置 URL 模板。
L.tileLayer('https://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x=&y={y}&z={z}', {
maxZoom: 18,
attribution: '<a href="https://www.amap.com">高德地图</a>'
}).addTo(map);
值得注意的是，Leaflet 是与供应商无关的，也就是说，它不会为瓦片（Tile）强制选择一个特定的供应商。而且，Leaflet 甚至不包含任何一行特定于某个供应商的代码，所以如果你需要，你可以自由地使用其他供应商。
标记
除了瓦片（Tile）图层，你还可以轻松地向地图添加其他内容，包括标记。让我们添加一个标记：
L.marker(center).addTo(map)使用 popups
当你想将某些信息附加到地图上的特定对象时，通常会使用 Popups。Leaflet 有一个快捷方式：
L.marker(center).addTo(map)
.bindPopup(address).openPopup();尝试点击我们的对象。该 bindPopup 方法将带有指定 HTML 内容的弹出窗口附加到你的标记，以便在你单击对象时显示弹出窗口，并且该 openPopup 方法（仅适用于标记）立即打开附加的弹出窗口。
你还可以将弹出窗口用作图层（当你需要的不仅仅是将弹出窗口附加到对象时）：
L.popup()
.setLatLng(center)
.setContent(address)
.openOn(map);
这里我们使用 openOn 而不是 addTo 因为它在打开一个新窗口时，先前打开的弹出窗口会自动关闭。
处理事件
每次在 Leaflet 中触发某些事件时，例如用户单击标记或地图缩放更改，相应的对象都会发送一个事件，你可以使用函数订阅该事件。
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent('经度：' + e.latlng.lng + '<br />纬度：' + e.latlng.lat)
.openOn(map);
}
map.on('click', onMapClick);
尝试单击地图，你将在弹出窗口中看到经纬度。
现在你已经学习了 Leaflet 的基础知识，可以立即开始构建地图应用程序了！
评论 (0)