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

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è)空白頁(yè)

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

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

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

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

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

• 包括傳單JavaScript文件:

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

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

1	<div id="mapid"></div>

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

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

1	#mapid { height: 180px; }

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

設(shè)置地圖

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

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

　　

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

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

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

1 2 3 4 5 6

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包含。就是這樣!現(xiàn)在你有一個(gè)工作leaflet地圖。

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

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

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

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

1 2 3 4 5

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

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

1 2 3 4 5 6

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)是否打開）:

1 2 3

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ì)象):

1 2 3 4

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)緯度）:

1 2 3 4 5

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è)警告:

1 2 3 4 5 6 7 8 9 10

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

　　試著點(diǎn)擊地圖,你會(huì)看到一個(gè)彈出的坐標(biāo)

轉(zhuǎn)載于:https://www.cnblogs.com/ExMan/p/8027514.html

總結(jié)

以上是生活随笔為你收集整理的leaflet的入门开发（一）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。