本文将介绍有关于leaflet地图组件在web中的应用
什么是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>
新建地图
有关地图的完整api在这里
html
<div id="map" style="height:500px;"></div>
js
var map = L.map('map').setView([37.002553, 106.890747], 3)
var map = L.map('map', {
center: [37.002553, 106.890747],
zoom: 3
})
上面这两种实现的效果是一样的，都是在id为map的div上创建一个中心为[51, 51]，缩放等级为13的地图，那么现在你应该能看到一个没有地图内容的地图组件了。
加载地图内容
L.esri.tiledMapLayer({
url: 'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'
}).addTo(map)
上面的代码会去读取url里提供的地图内容并加载到名字为map的地图组件实例里，更多的内容可以复制上面的url，他们提供了另外几种地图的样式。好了，当你完成了这一步时你应该可以看到一个完整的地图已经被加载出来了。
添加覆盖物
添加标记点 官方api
var marker = L.marker([38.761954, 117.775429]).addTo(map)
添加圆形 官方api
var circle = L.circle([38.761954, 117.575429], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(map)
添加多边形 官方api
var polygon = L.polygon([
[38.561954, 117.675429],
[38.561954, 117.475429],
[38.361954, 117.375429]
]).addTo(map)
处理事件
你可以为map或者marker之类事件驱动的类上使用on或者off添加或关闭一个事件监听 官方api
var popup = L.popup()
map.on('click', function (e) {
popup
.setLatLng(e.latlng)
.setContent("你点击了 " + e.latlng.toString())
.openOn(map)
})
上述代码将在点击地图时弹出点击位置的信息，其中L.popup()可以初始化一个弹出框。
大体内容就介绍到这里，以下是完整的html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>leaflet地图测试</title>
<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的代码 -->
<script src="https://unpkg.com/esri-leaflet@2.1.4/dist/esri-leaflet.js"></script> <!-- 让leaflet加载地图更加简单 -->
</head>
<body>
<div id="map" style="height:500px;"></div>
<script>
var map = L.map('map').setView([37.002553, 106.890747], 3)
L.esri.tiledMapLayer({
url: 'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'
}).addTo(map)
var marker = L.marker([38.761954, 117.775429]).addTo(map)
var circle = L.circle([38.761954, 117.575429], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(map)
var polygon = L.polygon([
[38.561954, 117.675429],
[38.561954, 117.475429],
[38.361954, 117.375429]
]).addTo(map)
var popup = L.popup()
map.on('click', function (e) {
popup
.setLatLng(e.latlng)
.setContent("你点击了 " + e.latlng.toString())
.openOn(map)
})
</script>
</body>
</html>
