leaflet初学--设置地图

快速入门指南：

第一步：准备页面
其一：引入leaflet CSS文件

其二：在leaflet CSS之后引入leaflet JavaScript文件

其三：在要放置地图的位置放一个div元素id

其四：给地图容器设置一个定义的高度：
#mapid { height: 180px; }

第二步：设置地图
使用Mapbox Streets磁贴创建地图，这里创建伦敦市的中心地图。
初始化地图 设置视图的地理坐标和缩放级别：
var mymap = L.map(‘mapid’).setView([51.505, -0.09], 13);
此时我们创建地图实例未向地图传递任何选项，于是默认启动地图上所有的鼠标和触摸交互，且具有缩放和归因控件。
注：setViewcall会返回map对象–大多数leaflet方法在不返回显示值的情况下会像这样，类似jQuery的方法链接。

接下来，添加一个图层块到地图中，此时，为一个Mapbox Streets图层块。
创建图块图层通常涉及设置图块图像的URL模板，属性文本和该图层的最大缩放级别。
这个例子中，我们将使用Mapbox/streets-v11 ，其来自 Mapbox’s Static Tiles API，此时还需要请求访问令牌，此API默认返回512x512而非256x256，因此还必须明确指定大小，并将缩放值偏移-1。
L.tileLayer(‘https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}’, {
attribution: ‘Map data © OpenStreetMap contributors, Imagery © Mapbox’,
maxZoom: 18,
id: ‘mapbox/streets-v11’,
tileSize: 512,
zoomOffset: -1,
accessToken: ‘your.mapbox.access.token’
}).addTo(mymap);
确保在div和leaflet.js包含之后调用所有代码，此时已有一张有效的传单地图。
（值得注意的是，Leaflet是与提供程序无关的，这意味着它没有对tile的提供程序进行特定选择。您可以尝试将替换mapbox/streets-v11为mapbox/satellite-v9，然后看看会发生什么。此外，Leaflet甚至不包含任何特定于提供程序的代码行，因此，如果需要，您可以自由使用其他提供程序（尽管我们建议Mapbox看起来很漂亮）。）
（每当基于OpenStreetMap使用任何东西，一个属性是必须按的版权声明。大多数其他磁贴提供程序（例如Mapbox，Stamen或Thunderforest）也需要归因。确保在信用到期的地方给予信用。）