leaflet的開發入門教程_javascript技巧

Leaflet簡述

Leaflet 是一個為建設互動性好適用於行動裝置地圖，而開發的現代的、開源的 JavaScript 庫。代碼僅有 33 KB，但它具有開發線上地圖的大部分功能。Leaflet設計堅持簡便、高效能和可用性好的哲學思想，在所有主要案頭和移動平台能高效運作，在現代瀏覽器上會利用HTML5和CSS3的優勢，同時也支援舊的瀏覽器訪問。支援外掛程式擴充，有一個友好、便於使用的API文檔和一個簡單的、可讀的原始碼。Leaflet強大的開源庫外掛程式涉及到地圖應用的各個方麵包括地圖服務，資料提供，資料格式，地理編碼，路線和路線搜尋，地圖控制項和互動等類型的外掛程式共有140多個。

2016年9月27日—1.0leaflet,最快的,最穩定和嚴謹的leaflet,終於出來了!

leaflet是領先的開源JavaScript庫為行動裝置設計的互動地圖。重33 KB的JS,所有映射大多數開發人員所需要的特性。

leaflet設計簡單,效能和可用性。它有效地在所有主要的案頭和移動平台,可以擴充的外掛程式,有一個美麗的,便於使用和證據確鑿的API和一個簡單的、易讀的原始碼,是一個快樂作出貢獻。

讓我們開始一個小執行個體：準備一個空白頁

這裡我們建立一個地圖在地圖的div,添加瓷磚的選擇,然後添加一個標記,在彈出一些文本:

 地圖在編寫任何代碼之前,您需要做以下頁面上製備步驟:

包括leaflet CSS檔案標題部分的文檔:

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

　　（沒有這個檔案可以去下載，也可以自己引入,以下不再累述），點擊下載（穩定版本）;

包括傳單JavaScript檔案:

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

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

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

確保定義的映射容器有一個高度,例如通過設定CSS（必須定義一個高度，因為無法擷取指定的id名，因此這個庫並沒有進行高度的處理設定，自己必須設定高度，如同div預設是沒有高度的一樣）:

#mapid { height: 180px; }

現在您已經準備好初始化地圖,用它做一些東西。

設定地圖

讓我們建立一個地圖的中心北京某個地點漂亮Mapbox街道瓷磚。首先我們將初始化和設定它的視圖映射到我們選擇的地理座標和縮放層級（裡面的  mapid  必須和設定的id保持一致）:

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

在預設情況下(我們沒有通過任何選項建立地圖執行個體)時,所有滑鼠和觸摸互動啟用了在地圖上,它有放大和歸因控制。（這些都可以通過js來控制，目前只是入門，有深入瞭解的可以自己摸索）

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

接下來,我們將添加一個磚層來增加我們的地圖,在這種情況下這是一個Mapbox街道磚層。建立一個磚層通常涉及瓷磚映像的模板設定URL(在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: 'your.mapbox.project.id', accessToken: 'your.mapbox.public.access.token'}).addTo(mymap);

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

標記,圓圈和多邊形

除了磚層,您可以輕鬆地向地圖添加其他東西,包括標誌、折線、多邊形、圓和快顯視窗。讓我們添加一個標記:

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

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

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("故宮");　

快顯視窗時通常使用您想要一些資訊附加到地圖上的一個特定的對象。傳單有非常方便的捷徑（和上面添加的方式一樣，直接添加或者，另行添加，實際是一樣的  openPopup是表示預設是否開啟）:

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

　試著點擊我們的對象。bindPopup方法高度與指定的HTML內容彈出你的標記彈出出現當你點擊對象,和openPopup方法(標記)立即開啟彈出。

   您還可以使用快顯視窗層(當你需要更多的東西比附加一個彈出一個對象):

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

　　這裡我們用openOn代替遭受因為它處理自動關閉之前開啟彈出當開啟一個新的良好的可用性。

處理事件

每次發生在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的開發入門教程，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！