什么是leaflet？
leaflet是一个轻量级的开源js地图组件，适用于移动设备，用法简单性能优越，如果你曾经使用过高德或者百度的地图api的话，相信你可以很轻易的上手更加简单的leaflet
leaflet是怎么运作的？
leaflet的工作方法和高德百度之类的并不一样，由于leaflet是个开源项目，所以它本身只有地图组件并不提供地图内容，也就是说，我们不需要为了使用leaflet而去注册key。
所以当我们在页面中创建了地图之后，还需要去其他的地图内容提供商（ArcGIS）那里加载地图，有可能需要申请key，当然，在下文里我会给出一个免费又好看的地图内容的
使用方法
引用外部代码
<!-- 提供leaflet的样式 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/leaflet/1.2.0/leaflet.css">
<!-- 提供leaflet的代码 -->
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
<!-- 让leaflet可以方便的使用ArcGIS服务 -->
<script src="https://unpkg.com/esri-leaflet@2.1.4/dist/esri-leaflet.js"></script>html
<div id="map" style="height:500px;"></div>js代码
<script>
//方法一
var map = L.map('map').setView([37.002553, 106.890747], 3);
//方法二
var map = L.map('map', {
center: [37.002553, 106.890747],
zoom: 3
})
</script>上面这两种实现的效果是一样的，都是在id为map的div上创建一个中心为【51，51】，缩放等级为3的地图，现在你看到的就是下面这种情况
加载地图内容
L.esri.tiledMapLayer({
url: 'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'
}).addTo(map)
作者：HoPGoldy
链接：https://www.jianshu.com/p/119eef572fa3
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
先上一个入门demo，将地图显示出来，然后在做扩展
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/css/leaflet.css" rel="stylesheet" />
<script src="~/js/leaflet.js"></script>
<script src="~/js/leaflet.ChineseTmsProviders.js"></script>
@*<script src="~/js/lib/main.js"></script>*@
<script src="~/js/jquery-3.3.1.min.js"></script>
<script src="~/js/require.js"></script>
<style>
#map {
height: 600px;
}
</style>
</head>
<body>
<div id="map">
</div>
<script>
var sate = L.tileLayer("https://{s}.google.cn/vt/lyrs=y&hl=zh-CN&scale=2&x={x}&y={y}&z={z}", {
maxZoom: 22,
attribution: "Google提供",
subdomains: ["mt0", "mt1", "mt2", "mt3"],
updateWhenIdle: false,
keepBuffer: 50
});
//加载地图
var imgm = L.tileLayer.chinaProvider("TianDiTu.Satellite.Map", {
maxZoom: 22,
minZoom: 5
}), imga = L.tileLayer.chinaProvider("TianDiTu.Satellite.Annotion", {
maxZoom: 22,
minZoom: 5
});
//将几个图层合并成一个图层来处理
var image = L.layerGroup([imgm, imga]);
var map = L.map("map", {
//初始化地图处理中心
center: [48.29792669156143, 125.38357257843018],
//最大视图
maxZoom: 19,
//地图的缩放
zoom: 14,
//初始化后加载到地图上的图层
layers: [image],
//确认属性控制是否默认加载到地图上
attributionControl: false,
//确认缩放控制是否默认加载到地图上
zoomControl: false
});
L.control.zoom({
position: "bottomright"
}).addTo(map);
</script>
</body>
</html>
言归正传，Leaflet本身是一个简单易用，体积极小，适合小项目的库。我们看看官网。
现在在地图上添加一个多边形
var polygon = L.polygon([
[38.561954, 117.675429],
[38.561954, 117.475429],
[38.361954, 117.375429]
]).addTo(map);
var polygon1 = L.polygon([
[38.561954, 116.675429],
[38.561954, 117.475429],
[38.361954, 117.375429]
]).addTo(map);
map.fitBounds(polygon.getBounds());
map.fitBounds(polygon1.getBounds());
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
看看这几行代码，L.map('map')就是捕获一个<div id="map"></div>，把它当作一个地图观察器，将地图数据赋予上面。setView设置地图中心点的经纬度和比例尺，作为用户的视图区域。
L.tileLayer就是矢量瓦片底图，用对应的URL上找对应的z，y，x。而s是分布式服务器快速选取，一般都是1-4，天地图做到了1-8。最后，tileLayer图层要addTo(map)加载在地图观察器上。例子当中瓦片底图使用的是openstreetmap，当然也可以使用天地图的瓦片数据作为一个家庭作业留给你们，参考htoooth/Leaflet.ChineseTmsProviders。
L.marker就是图标，首先需设置的是图标的坐标，bindPopup是绑定的冒泡提示，里面可以包装任意的innerHTML元素，openPopup是开启提示的方法。
总结
Leaflet简单易用，学习成本较低，文档参考。与之相比，国内的百度高德连WMS，WFS都没有，真的有点汗颜。希望真正的GISer应该选择真正的地图前段工具，如leaflet和openlayer。
案例
最近看到一个有趣的项目--科比投出的30699个球。科比退役让整个互联网的焦点都在他身上。LATime做了一个项目可视化所有科比投出的球，我一开始以为是用D3.js等高级的数据可视化工具，结果并非如此。仔细研读了一下源码发现，这项目采用的是leaflet.js和carto.js（按访问量收费），数据的表现才用地图瓦片的形式。数据保存在CartoDB的数据库，包含了地图瓦片数据，以及每个球的数据详情。
这是一个很典型的空间数据可视化项目。将对应的点数据转换成为矢量瓦片作为底图。当鼠标在地图位置滑动，对应的数据详情将会通过tooltip形式表现，和Leaflet 笔记一：简单入门的步骤相似。再者，结合了小地图和图例的用法，让数据的展示流畅生动。篮筐篮板的表示不过是使用了L.Polyline等画线画圆工具。
科比投出的30699个球
动图
594
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
