最近開始入門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