先展示地圖加載的效果：
MapBox地圖
OSM地圖
（1）首先獲取Leaflet的資源包
Leaflet資源文件Url：http://leafletjs.com/download.html
Leaflet資源文件非常小，雖然輕但是麻雀雖小，五臟俱全。完全可以滿足基本的地圖操作和基礎(chǔ)的GIS功能。（Github開源社區(qū)有對(duì)Leaflet功能的更新，可以關(guān)注一下）
推薦大家使用Webstorm，直接引入Leaflet或openlayers資源文件，Webstrom識(shí)別資源文件其中的方法，編寫代碼有代碼提示提高編寫代碼的效率
（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地址、縮放級(jí)別、中心點(diǎn)坐標(biāo)）。
（3）Leaflet加載其他地圖效果：
ArcGIS底圖
Google地圖
高德地圖
天地圖
天地圖影像
添加底圖切換控件：
var baseLayers = {
"地圖": normal,
"影像": image,
}
L.control.layers(baseLayers).addTo(map);
L.control.zoom({
zoomInTitle: '放大',
zoomOutTitle: '縮小'
}).addTo(map);
