自入門--leaflet學習筆記
最近開始入門leaflet,這裏是簡單的知識點整理及QuickStart,望dalao們批評指正!
leaflet的快速開始向導:
這篇循序漸進的引入文將快速的讓你開始學習leaflet的基礎內容,包含了創建一個使用標記,氣泡點,多段線的用來處理事件的leaflet地圖.
http://leafletjs.com/examples/quick-start/example.html
為你的頁面做準備:
在你開始你的地圖代碼之前,你為頁面需要做好以下幾步準備:
--引入在文檔頭部leaflet的css文件:
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
--緊接著引入leaflet的JS文件:
<!-- Make sure you put this AFTER Leaflet‘s CSS -->
<script src="https://unpkg.com/[email protected]/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
自入門--leaflet學習筆記