Leaflet簡述

Leaflet 是一個為建設(shè)互動性好適用於行動裝置地圖，而開發(fā)的現(xiàn)代的、開源的 JavaScript 函式庫。程式碼僅有 33 KB，但它具有開發(fā)線上地圖的大部分功能。 Leaflet設(shè)計堅持簡單、高效能和可用性好的哲學(xué)思想，在所有主要桌面和行動平臺能高效運(yùn)作，在現(xiàn)代瀏覽器上會利用HTML5和CSS3的優(yōu)勢，同時也支援舊的瀏覽器存取。支援插件擴(kuò)展，有一個友好、易於使用的API文檔和一個簡單的、可讀的源代碼。 Leaflet強(qiáng)大的開源庫插件涉及地圖應(yīng)用的各個方麵包括地圖服務(wù)，數(shù)據(jù)提供，數(shù)據(jù)格式，地理編碼，路線和路線搜索，地圖控件和交互等類型的插件共有140多個。

2016年9月27日—1.0leaflet,最快的,最穩(wěn)定和嚴(yán)謹(jǐn)?shù)膌eaflet,終於出來了!

leaflet是領(lǐng)先的開源JavaScript庫為行動裝置設(shè)計的互動地圖。重33 KB的JS,所有映射大多數(shù)開發(fā)人員所需的特性。

leaflet設(shè)計簡單,性能和可用性。它有效地在所有主要的桌面和移動平臺,可以擴(kuò)展的插件,有一個美麗的,易於使用和證據(jù)確鑿的API和一個簡單的、易讀的源代碼,是一個快樂作出貢獻(xiàn)。

讓我們開始一個小實(shí)例：準(zhǔn)備一個空白頁

這裡我們創(chuàng)建一個地圖在地圖的div,添加瓷磚的選擇,然後添加一個標(biāo)記,在??彈出一些文本:

?地圖在編寫任何代碼之前,您需要做以下頁面上準(zhǔn)備步驟:

包含leaflet CSS文件標(biāo)題部分的文件:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />

? ?

　?。]有這個文件可以去下載，也可以自己引入以下再累述），點(diǎn)擊以下下載（穩(wěn)定版本）;

包括傳單JavaScript檔:

<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>

? ?

放一個div元素與特定的id,你想要你的地圖:

<div id="mapid"></div>
（id名字可以隨便設(shè)定，但是必須與下面js代碼定義個一樣。。）

? ?透過設(shè)定CSS（必須定義一個高度，因?yàn)闊o法取得指定的id名，因此這個函式庫並沒有進(jìn)行高度的處理設(shè)置，自己必須設(shè)定高度，如同div預(yù)設(shè)是沒有高度的一樣）:

   
#mapid { height: 180px; }

? ?

現(xiàn)在您已經(jīng)準(zhǔn)備好初始化地圖,用它做一些東西。

設(shè)定地圖

讓我們創(chuàng)建一個地圖的中心北京某個地點(diǎn)漂亮Mapbox街道瓷磚。首先我們將初始化和設(shè)定它的視圖映射到我們選擇的地理座標(biāo)和縮放等級（裡面的? mapid? 必須和設(shè)定的id保持一致）:

   
var mymap = L.map('mapid').setView([39.9788, 116.30226], 14);

? ?

在預(yù)設(shè)情況下(我們沒有透過任何選項(xiàng)創(chuàng)建地圖實(shí)例)時,所有滑鼠和觸控互動啟用了在地圖上,它有放大和歸因控制。 （這些都可以透過js來控制，目前只是入門，有深入了解的可以自己摸索）

注意setView調(diào)用返回地圖對象——大多數(shù)leaflet方法這樣的行為時不返回一個顯式的值,它允許方便類別jQuery方法控制。

接下來,我們將添加一個磚層來增加我們的地圖,在這種情況下這是一個Mapbox街道磚層。創(chuàng)建一個磚層通常涉及瓷磚圖像的模板設(shè)置URL(在Mapbox得到你),歸因的文本和的最大縮放級別層:

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
 attribution: &#39;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>&#39;,
 maxZoom: 18,
 id: &#39;your.mapbox.project.id&#39;,
 accessToken: &#39;your.mapbox.public.access.token&#39;
}).addTo(mymap);

? ?

確保所有的代碼稱為div和傳單。 js包含。就是這樣!現(xiàn)在你有一個工作leaflet地圖。

標(biāo)記,圓圈和多邊形

除了磚層,您可以輕鬆地向地圖添加其他東西,包括標(biāo)誌、折線、多邊形、圓和彈出窗口。讓我們加一個標(biāo)記:

L.marker([39.9788, 116.30226]).addTo(mymap)
 .bindPopup("北京大廈<br>").openPopup();

? ?

添加一個圓是相同的(除了指定半徑米作為第二個參數(shù)),但允許您控制看起來如何通過選擇在創(chuàng)建對象時作為最後一個參數(shù):

L.circle([39.9908, 116.26625], 500, {
 color: 'red',
 fillColor: '#f03',
 fillOpacity: 0.5
}).addTo(mymap).bindPopup("頤和園歡迎你");

? ?

添加一個多邊形很簡單:

L.polygon([
 [39.92096, 116.38591],
 [39.91079, 116.38676],
 [39.91118, 116.3962],
 [39.92014, 116.39482]
]).addTo(mymap).bindPopup("故宮");　

? ?

窗口時通常使用您想要一些附加資訊到地圖上的一個特定的物件。傳單有非常方便的快捷方式（和上面添加的方式一樣，直接添加或者，另行添加，實(shí)際是一樣的? openPopup是表示預(yù)設(shè)是否打開）:

marker.bindPopup("北京大廈").openPopup();
circle.bindPopup("頤和園");
polygon.bindPopup(故宮");

? ?

　試著點(diǎn)擊我們的物件。 bindPopup方法高度與指定的HTML內(nèi)容彈出你的標(biāo)記彈出出現(xiàn)當(dāng)你點(diǎn)擊物件,和openPopup方法(標(biāo)記)立即打開彈出。

?? 您也可以使用彈出視窗層(當(dāng)你需要更多的東西比附加一個彈出一個物件):

var popup = L.popup()
 .setLatLng([51.5, -0.09])
 .setContent("I am a standalone popup.")
 .openOn(mymap);

? ?

　　這裡我們用openOn取代遭受因?yàn)樗幚碜詣雨P(guān)閉之前打開彈出因?yàn)樗幚碜詣雨P(guān)閉之前打開的良好的可用性。

處理事件

每次發(fā)生在leaflet,比如用戶點(diǎn)擊地圖上標(biāo)記或縮放變化,相應(yīng)的對象發(fā)送一個事件,你可以訂閱功能。它允許您對用戶交互（這里顯示的是每次你點(diǎn)擊位置的經(jīng)緯度）:

function onMapClick(e) {
 alert("You clicked the map at " + e.latlng);
}
 mymap.on('click', onMapClick);

每個對象都有自己的一組事件,有關(guān)詳細(xì)信息,請參閱文檔。偵聽器函數(shù)的第一個參數(shù)是一個事件對象,它包含有用的信息的事件發(fā)生。例如,地圖點(diǎn)擊事件對象(e在上面的示例中)latlng屬性點(diǎn)擊出現(xiàn)的位置。

讓我們改善我們的例子中,使用一個彈出一個警告:

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);

? ?