Leaflet簡(jiǎn)述

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

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

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

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

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

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

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

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

<link rel="stylesheet"  />

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

包括傳單JavaScript文件:

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

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

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

確保定義的映射容器有一個(gè)高度,例如通過設(shè)置CSS（必須定義一個(gè)高度，因?yàn)闊o法獲取指定的id名，因此這個(gè)庫(kù)并沒有進(jìn)行高度的處理設(shè)置，自己必須設(shè)置高度，如同div默認(rèn)是沒有高度的一樣）:

#mapid { height: 180px; }

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

設(shè)置地圖

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

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

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

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

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

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
 attribution: 'Map data © <a >OpenStreetMap</a> contributors, <a >CC-BY-SA</a>, Imagery © <a ,
 maxZoom: 18,
 id: 'your.mapbox.project.id',
 accessToken: 'your.mapbox.public.access.token'
}).addTo(mymap);

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

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

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

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

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

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

添加一個(gè)多邊形很簡(jiǎn)單:

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

彈出窗口時(shí)通常使用您想要一些信息附加到地圖上的一個(gè)特定的對(duì)象。傳單有非常方便的快捷方式（和上面添加的方式一樣，直接添加或者，另行添加，實(shí)際是一樣的  openPopup是表示默認(rèn)是否打開）:

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

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

   您還可以使用彈出窗口層(當(dāng)你需要更多的東西比附加一個(gè)彈出一個(gè)對(duì)象):

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

　　這里我們用openOn代替遭受因?yàn)樗幚碜詣?dòng)關(guān)閉之前打開彈出當(dāng)打開一個(gè)新的良好的可用性。

處理事件

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

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

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

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

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的開發(fā)入門教程，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論