01.Leaflet 牛刀小试
> 原文地址：[https://leafletjs.com/examples/quick-start/](https://leafletjs.com/examples/quick-start/)
参考资料：[http://webgis.cn/leaflet-quickstart.html](http://webgis.cn/leaflet-quickstart.html)
手摸手一步一步教你开启Leaflet之门，包括创建地图、标注、多边形、弹窗以及事件处理。
演示Demo（如下图）：[http://jsrun.net/RH6Kp](http://jsrun.net/RH6Kp)
# 准备工作
编码前需要在页面代码中做如下操作：
在文档的header中引入Leaflet的CSS文件:
```html
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
```
在Leaflet的CSS文件之后引入其JS文件:
```html
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
```
定义个DIV作为地图容器
```html
<div id="map"></div>
```
确保已为地图容器定义高度，比如通过CSS来设置
```css
#map { height: 180px; }
```
现在你可以初始化地图并且用它搞点事情了。
# 创建地图
演示Demo（如下图）：[http://jsrun.net/sH6Kp](http://jsrun.net/sH6Kp)
我们用Mapbox Streets瓦片创建一个伦敦市中心地图。首先，初始化地图并设置定义的经纬度以及缩放等级。
```js
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
```
默认情况下（创建地图时未设置任何选项），所有的鼠标和触摸动作在地图上都是可用的，并且还有缩放控件。
需要强调一点，setView 调用还返回 map 对象ーー大多数Leaflet方法在没有返回显式值时都是这样的，这样就可以方便地进行类似 jquery 的方法链接。
下一步我们将添加一个平铺图层添加到我们的地图，在这种情况下，它是一个Mapbox Streets图层。创建图层通常需要设置平铺图像的 [URL 模板](https://leafletjs.com/reference.html#tilelayer-url-template)、属性文本和图层的最大缩放级别。在这个例子中，我们将使用来自 [Mapbox Static Tiles API](https://docs.mapbox.com/api/maps/#static-tiles) 的` Mapbox/streets-v 11` Tiles (为了使用来自 Mapbox 的 Tiles，您还必须[请求一个token](https://www.mapbox.com/studio/account/tokens/))。因为这个 API 默认返回512x512块(而不是256x256) ，所以我们还必须显式地指定这个值，并将缩放偏移量设置为-1。
```javascript
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1,
accessToken: 'your.mapbox.access.token'
}).addTo(mymap);
```
确保在 div 和 leaflet.js引用之后的代码中调用所有代码。就是这样！你现在有一张可用的Leaflet地图了。