先展示地图加载的效果：
MapBox地图
OSM地图
（1）首先获取Leaflet的资源包
Leaflet资源文件Url：http://leafletjs.com/download.html
Leaflet资源文件非常小，虽然轻但是麻雀虽小，五脏俱全。完全可以满足基本的地图操作和基础的GIS功能。（Github开源社区有对Leaflet功能的更新，可以关注一下）
推荐大家使用Webstorm，直接引入Leaflet或openlayers资源文件，Webstrom识别资源文件其中的方法，编写代码有代码提示提高编写代码的效率
（2）在WebStorm中新建工程，引入Leaflet资源文件。新建HTML页面。
WebStorm引入资源文件
这里提供加载OSM和MapBox地图的代码：
加载OSM地图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Leaflet加载OSM地图</title>
<link rel="stylesheet" href="leaflet/leaflet.css">
<script src="leaflet/leaflet.js"></script>
<style type="text/css">
#map,html,body{
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
<script type="text/javascript">
var map = new L.Map('map');
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osm = new L.TileLayer(osmUrl, {minZoom: 5, maxZoom: 18});
map.addLayer(osm);
map.setView(new L.LatLng(31.864942016,117.2882028929),11);
</script>
</html>
加载MapBox地图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Leaflet加载MapBox地图</title>
<link rel="stylesheet" href="leaflet/leaflet.css">
<script src="leaflet/leaflet.js"></script>
<style type="text/css">
#map,html,body{
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
<script type="text/javascript">
var map = L.map('map').setView([31.864942016,117.2882028929], 11);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
id: 'mapbox.streets'
}).addTo(map);
</script>
</html>
代码的写法和Openlayers写法相似（Url地址、缩放级别、中心点坐标）。
（3）Leaflet加载其他地图效果：
ArcGIS底图
Google地图
高德地图
天地图
天地图影像
添加底图切换控件：
var baseLayers = {
"地图": normal,
"影像": image,
}
L.control.layers(baseLayers).addTo(map);
L.control.zoom({
zoomInTitle: '放大',
zoomOutTitle: '缩小'
}).addTo(map);
