最近开始入门leaflet,这里是简单的知识点整理及QuickStart,望dalao们批评指正!
leaflet的快速开始向导:
这篇循序渐进的引入文将快速的让你开始学习leaflet的基础内容,包含了创建一个使用标记,气泡点,多段线的用来处理事件的leaflet地图.
为你的页面做准备:
在你开始你的地图代码之前,你为页面需要做好以下几步准备:
--引入在文档头部leaflet的css文件:
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
--紧接着引入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>
--在你希望引入地图的位置处键入一个有id的div:
<div id="mapid"></div>
--请确定你需要的div有明确的高度,例如将样式写在css里:
#mapid { height: 180px; }
创建地图:
http://leafletjs.com/examples/quick-start/example-basic.html
让我们使用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
