Leaflet官⽅教程（⼀）——LeafletQuickStartGuide
最近开始翻译的东西有点多啊，但是越看官⽅⽂档越是兴奋，觉得很有意思，⽩天⼯作忙，没时间翻译，有时候会看看实践实践，晚上加班翻译⼀下！⽼规矩，择要翻译！
Leaflet Quick Start Guide
⼀步⼀步开始使⽤leaflet基础，包括设置leaflet地图、添加markers、polylines和popups、处理事件。
Preparing your page
在开始写地图代码之前，你需要做⼀些准备⼯作：
access是什么意思啊了*将leaflet CSS⽂件include到head中
<link rel="stylesheet"href="unpkg/leaflet@1.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
*在CSS后之后将leaflet JavaScript⽂件include到head中
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="unpkg/leaflet@1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>
*将⼀个带有你希望图名元素的div放在body中
<div id="mapid"></div>
*确保地图容器已经定义了⾼度，譬如如下设置
#mapid { height: 180px; }
现在你已经初始化了地图，可以开始下⼀步了
Setting up the map
我们可以创建⼀个以伦敦为中⼼的Mapbox街道⽡⽚地图。⾸先，我们初始化地图并且为其设置坐标和缩放等级。
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
默认情况下，所有地图上的⿏标和触摸交互都默认开启，并且可以控制缩放等级。
注意：setView也可以返回地图对象，⼤多数leaflet⽅法不是返回明确的值，因此可以⽅便的实现类似jquery的⽅法链。
下⼀步，添加⽡⽚到地图中，这⼀步我们使⽤mapbox streets tile图层。创建⼀个⽡⽚图层通常包括设置⽡⽚地图的URL、
属性和最⼤缩放等级。在这个例⼦中，我们使⽤的是mapbox streets⽡⽚，需要从mapbox获取access token。
L.tileLayer('api.tiles.mapbox/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © <a href="/">OpenStreetMap</a> contributors,
<a href="/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery ©
<a href="www.mapbox/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.streets',
accessToken: 'your.ken'
}).addTo(mymap);
注意所有代码要放在div和leaflet.js的后⾯。
leaflet是不定义provider的格式的，这意味着不需要为⽡⽚图层选择特别的provider，你可以⽤mapbox.satellite代替streets，
你将看到底图变为卫星图。另外，leaflet甚⾄不需要包含特定的provider代码，你可以⽤其他的providers，只是mapbox很不错。Markers, circles and polygons
除了⽡⽚图层，你可以很容易的添加其他要素到地图，包括markers、ploylines、ploygons、circles和popups。我们先增加⼀个marker：
var marker = L.marker([51.5, -0.09]).addTo(mymap);
增加⼀个圆也是同样的原理，我们可以通过选项来控制样式：
var circle = L.circle([51.508, -0.11], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 500
}).addTo(mymap);
增加多边形很容易：
var polygon = L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(mymap);
Working with popups
弹出提⽰通常被我们⽤来给⼀些特殊事件添加说明，leaflet⼤⼤简化了弹出提⽰的使⽤：marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");
试着点击要素，绑定提⽰⽅法将提⽰绑定到要素上，所以在点击要素时，openPopup⽅法就
⽴刻弹出了提⽰。
你也可以将popups⽤作图层，即⽤作单独的图层，不绑定在任何要素上：
var popup = L.popup()
.setLatLng([51.5, -0.09])
.setContent("I am a standalone popup.")
.openOn(mymap);
这⾥我们使⽤openOn⽽不是使⽤addTo是因为当新的popup打开时，之前的popup就会⾃动关闭。
Dealing with events
每当⼀些事件在leaflet中被触发，如点击marker、地图缩放等，通信机制会发送事件，你可以⽤
函数监听事件来实现交互。
function onMapClick(e) {
alert("You clicked the map at " + e.latlng);}
<('click', onMapClick);
每个对象都有⾃⼰的⼀系列事件，监听函数的第⼀个参数是⼀个事件对象，它包含了被触发事件的有⽤信息。举个例⼦，点击地图事件有可以显⽰当前点击位置经纬度的latlng事件。
下⾯我们⽤⼀个popup代替alert：
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + String()) .openOn(mymap);}
<('click', onMapClick);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。