最近开始入门leaflet,这里是简单的知识点整理及QuickStart,望dalao们批评指正!css
leaflet的快速开始向导:
这篇按部就班的引入文将快速的让你开始学习leaflet的基础内容,包含了建立一个使用标记,气泡点,多段线的用来处理事件的leaflet地图.html
为你的页面作准备:
在你开始你的地图代码以前,你为页面须要作好如下几步准备:
--引入在文档头部leaflet的css文件:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>app
--紧接着引入leaflet的JS文件:
<!-- Make sure you put this AFTER Leaflet's CSS -->学习
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>ui
--在你但愿引入地图的位置处键入一个有id的div:
<div id="mapid"></div>this
--请肯定你须要的div有明确的高度,例如将样式写在css里:
#mapid { height: 180px; }url
建立地图:
http://leafletjs.com/examples/quick-start/example-basic.htmlspa
让咱们使用Pretty Mapbox Streets来建立一个以伦敦为中心的地图,首先,咱们建立地图并设置它的视图到咱们选择的地理坐标上,设置好缩放等级.翻译
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
默认状况下(建立地图实例时咱们没有传递任何选项),全部的鼠标及触控交互操做都是可用的,而且包含缩放和属性控制.
注意到调用setView方法也会返回地图对象--大多数leaflet方法运行时也同样(不返回一个明确的值时),这使得相似jQuery的方法链十分方便.
接下来咱们添加一个基本图块到咱们的地图上,这样的话它就是一个Mapbox Street的基本图层了,建立一个基本图层一般包含为图层图像设置URL模板,属性文本以及图层的最大缩放等级.在这个例子中咱们将使用Mapbox`s"Classic maps"中的mapbox.sreets图层(为了从Mapbox中使用图层,你必须申请一个接入许可).
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>', maxZoom: 18, id: 'mapbox.streets', accessToken: 'your.mapbox.access.token' }).addTo(mymap);
确保全部的代码都在这个div和leaflet.js内容以后被调用.就是这样!你如今拥有一个正在运做的leaflet地图了.
值得注意的是leaflet是不区分提供方的,这就意味着它不强制选择图层的提供方.你能够试着用mapbox.satellite替换mapbox.streets,看看会发生什么.同理,leaflet甚至不包含任何一行特定提供商的代码,因此若是你须要的话,你能够任意的使用其余提供商(的代码)[咱们仍建议你是用Mapbox,它很美观]
标记,区域圆以及区域多边形:
http://leafletjs.com/examples/quick-start/example-overlays.html
除了基础图层,你能够轻易的在地图上添加其余东西,包括标记,多段线,区域多边形,区域圆和睦泡点.让咱们来增长一个标记:
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);
着手气泡点:
http://leafletjs.com/examples/quick-start/example-popups.html
气泡点一般使用在当你想要在地图上某些特定对象上附加一些信息时.为此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.");
试着点击咱们的对象,bindPopup 方法在你的标记上附加了一个带有特殊HTML内容气泡点因此在你点击了对象后出现了气泡点,而且openPopup方法(仅标记可用)马上显示了附加的气泡点
你也能够使用气泡点做为图层(当你的需求不止是仅仅显示一个气泡点时)
var popup = L.popup() .setLatLng([51.5, -0.09]) .setContent("I am a standalone popup.") .openOn(mymap);
这里咱们使用openOn而不是addTo是由于当开启一个新的气泡点时将自动关闭上一个打开的气泡点,这样提升了使用性.
处理事件:
在leaflet中时刻都在发生着事件,举个例子,用户点击了一个标记或地图缩放,相应的对象传送一个能够描述的事件的方法.这是你能就用户的交互作出反应:
function onMapClick(e) { alert("You clicked the map at " + e.latlng); } mymap.on('click', onMapClick);
每个对象都有它独有的一系列事件--详见文档,监听方法的第一个参数是一个事件对象--它包含着已发生事件的实用信息.例如,地图点击事件对象(例子中的e)有一个latlng属性表示点击发生的位置.
让咱们使用气泡点代替警示框来改进咱们的例子:
var popup = L.popup(); function onMapClick(e) { popup .setLatLng(e.latlng) .setContent("You clicked the map at " + e.latlng.toString()) .openOn(mymap); } mymap.on('click', onMapClick);
试着点击地图而后你会发现气泡点的坐标.浏览整个例子
如今你已经学习了leaflet的基础而且你能够马上开始搭建地图app!不要忘了查看下文档和其余实例
@2017 Vladimir Agafonkin.Maps © OpenStreetMap contributors.
2018.3.11
翻译自k2etrookie