成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Leaflet快速開始教程

gecko23 / 2750人閱讀

摘要：提示在官方教程的基礎(chǔ)上，增加了一些注釋以及鏈接，可幫助讀者更好的學(xué)習(xí)有不正確或有待改進(jìn)的地方，歡迎批評(píng)指出。明確容器的高度。首先我們將初始化地圖，通過選定的地理坐標(biāo)設(shè)置地圖視角以及縮放級(jí)別。

提示：在Leaflet官方教程的基礎(chǔ)上，增加了一些注釋以及鏈接，可幫助讀者更好的學(xué)習(xí)Leaflet,有不正確或有待改進(jìn)的地方，歡迎批評(píng)指出。

Leaflet 
an open-source JavaScript library for mobile-friendly interactive maps
Leaflet Quick Start Guide

本教程將快速介紹有關(guān)于Leaflet的基礎(chǔ)知識(shí)，包括設(shè)置Leaflet地圖、創(chuàng)建(線、標(biāo)記、提示框)以及處理一些事件，讓你對(duì)‘葉子’有個(gè)基本的了解。

準(zhǔn)備

引入leaflet.js、leaflet.css文件。

leaflet.js、leaflet.css

創(chuàng)建一個(gè)擁有具體id的div容器。

明確容器的高度。

#mapid { height: 180px; }

設(shè)置地圖

用Mapbox Streets的瓦片數(shù)據(jù)來創(chuàng)建一個(gè)以武漢為中心的地圖。首先我們將初始化地圖，通過選定的地理坐標(biāo)設(shè)置地圖視角以及縮放級(jí)別。

//在leaflet中的經(jīng)緯度坐標(biāo)與實(shí)際坐標(biāo)位置是相反的，即真實(shí)的地理經(jīng)緯度坐標(biāo)為[114.398902, 30.518762]
var mymap = L.map("mapid").setView([30.518762, 114.398902], 13);

??默認(rèn)情況下（在我們創(chuàng)建地圖實(shí)例的時(shí)候沒有傳入任何的選項(xiàng)配置），所有的鼠標(biāo)和觸控交互都是無效的，界面上會(huì)有縮放(左上角)和來源(右下角)控件。

添加瓦片圖層到地圖上。創(chuàng)建一個(gè)瓦片圖層通常需要為瓦片影像設(shè)置URL template、數(shù)據(jù)來源、最大縮放級(jí)別。

L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}", {
    attribution: "Map data © OpenStreetMap contributors, CC-BY-SA, Imagery ? 

??值得注意的是，Leaflet不會(huì)強(qiáng)制用戶使用特定提供商的瓦片地圖。當(dāng)然，使用不同提供商的瓦片地圖時(shí)，在使用語(yǔ)法上會(huì)有些許不同(詳情請(qǐng)參考:Leaflet-providers)，就比如Mapbox，你必須在Mapbox官網(wǎng)注冊(cè)，獲得ID以及ACCESS_TOKEN才可以使用。密鑰獲取地址：mapbox密鑰。

Markers，circles，polygons

??除了瓦片圖層，還可以很方便地在地圖上添加其他一些東西，包括marker、polylines、polygons、circles和popups。


添加marker


var marker = L.marker([51.5, -0.09]).addTo(mymap); //可以添加相應(yīng)的options


添加circle


//通過傳入相應(yīng)options控制circle樣式
var circle = L.circle([51.508, -0.11], {
    color: "red",         //圈軌跡顏色，即外邊框的顏色
    fillColor: "#f03",    //填充色，默認(rèn)值與color值一致
    fillOpacity: 0.5,     //填充透明度
    radius: 500           //circle半徑，單位為米
}).addTo(mymap);


添加polygon


//面是一個(gè)二維坐標(biāo)數(shù)組
var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(mymap);

使用彈出窗口


??當(dāng)您想要將某些信息附加到地圖上的特定對(duì)象時(shí)，通常需要使用彈出窗口，Leaflet有非常方便快捷的方法：


marker.bindPopup("Hello world!
I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");


??bindPopup方法將帶有指定HTML內(nèi)容的彈出窗口附加到您的標(biāo)記上,以便在您單擊該對(duì)象時(shí)出現(xiàn)彈出窗口。同時(shí)openPopup方法僅僅只適用于marker。
??當(dāng)你需要的東西不僅僅是附加一個(gè)彈出對(duì)象時(shí)，可以將popups作為圖層來使用：


var popup = L.popup()
    .setLatLng([51.5, -0.09])
    .setContent("I am a standalone popup.")
    .openOn(mymap); //使用openOn而不是addTo,此方法在打開一個(gè)新的彈出窗口時(shí)，會(huì)自動(dòng)關(guān)閉之前打開的彈出窗口

處理事件

??在Leaflet上發(fā)生的一些事件，比如用戶點(diǎn)擊標(biāo)記或改變地圖縮放大小，相應(yīng)的對(duì)象會(huì)發(fā)送一個(gè)可以用函數(shù)描述的事件。它可以對(duì)用戶交互作出反應(yīng)：


//點(diǎn)擊地圖任意位置，會(huì)彈出當(dāng)前位置的坐標(biāo)信息
function onMapClick(e) {
    alert("You clicked the map at " + e.latlng);
}
mymap.on("click", onMapClick);


??每個(gè)對(duì)象都有自己的一組事件，監(jiān)聽函數(shù)on()的第一個(gè)參數(shù)是一個(gè)事件對(duì)象，它包含有發(fā)生的事件的有用信息。例如，地圖點(diǎn)擊事件對(duì)象（上例中的e）具有l(wèi)atlng屬性，該屬性是點(diǎn)擊發(fā)生時(shí)的位置。
??讓我們通過使用彈出窗口而不是消息對(duì)話框來改進(jì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);

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102375.html

相關(guān)文章

  • HTML-CSS-JS

    摘要：本周于上海閉幕，掘金和知乎上都有對(duì)應(yīng)的實(shí)錄和問答，但會(huì)議的視頻目前都還沒放出來，有心的同學(xué)如果找到了歡迎分享。建議中英文對(duì)照閱讀。英文原文前端獨(dú)立技術(shù)博客推薦推薦一些現(xiàn)在還在堅(jiān)持原創(chuàng)的博主，有業(yè)界大牛，也有小鮮肉，也有國(guó)外美女。 CSS 樣式書寫規(guī)范最佳實(shí)踐 本文的所列是實(shí)踐當(dāng)中得出的一套比較不錯(cuò)的 CSS 書寫規(guī)范，可以結(jié)合自身團(tuán)隊(duì)發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...

    mikasa 評(píng)論0 收藏0

  • HTML-CSS-JS

    摘要：本周于上海閉幕，掘金和知乎上都有對(duì)應(yīng)的實(shí)錄和問答，但會(huì)議的視頻目前都還沒放出來，有心的同學(xué)如果找到了歡迎分享。建議中英文對(duì)照閱讀。英文原文前端獨(dú)立技術(shù)博客推薦推薦一些現(xiàn)在還在堅(jiān)持原創(chuàng)的博主，有業(yè)界大牛，也有小鮮肉，也有國(guó)外美女。 CSS 樣式書寫規(guī)范最佳實(shí)踐 本文的所列是實(shí)踐當(dāng)中得出的一套比較不錯(cuò)的 CSS 書寫規(guī)范，可以結(jié)合自身團(tuán)隊(duì)發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...

    李世贊 評(píng)論0 收藏0

  • HTML-CSS-JS

    摘要：本周于上海閉幕，掘金和知乎上都有對(duì)應(yīng)的實(shí)錄和問答，但會(huì)議的視頻目前都還沒放出來，有心的同學(xué)如果找到了歡迎分享。建議中英文對(duì)照閱讀。英文原文前端獨(dú)立技術(shù)博客推薦推薦一些現(xiàn)在還在堅(jiān)持原創(chuàng)的博主，有業(yè)界大牛，也有小鮮肉，也有國(guó)外美女。 CSS 樣式書寫規(guī)范最佳實(shí)踐 本文的所列是實(shí)踐當(dāng)中得出的一套比較不錯(cuò)的 CSS 書寫規(guī)范，可以結(jié)合自身團(tuán)隊(duì)發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...

    MudOnTire 評(píng)論0 收藏0

  • 2018年最佳JavaScript數(shù)據(jù)可視化和圖表庫(kù)

    摘要：它有什么圖表加粗文字如何使用這個(gè)圖表庫(kù)可以通過存儲(chǔ)庫(kù)下載或通過包管理器安裝。數(shù)據(jù)可以直接從文件加載到圖表中。它有什么圖表如何使用該庫(kù)可在包管理器和他們自己的內(nèi)容傳送網(wǎng)絡(luò)中使用。該庫(kù)專為風(fēng)格的數(shù)據(jù)可視化而設(shè)計(jì)，提供一系列高度可配置的圖表。 現(xiàn)在有很多圖表庫(kù)，但哪一個(gè)最好用？這可能取決于許多因素，如業(yè)務(wù)需求，數(shù)據(jù)類型，圖表本身的目的等等。在本文中，每個(gè)JavaScript圖表庫(kù)將與一些關(guān)鍵...

    terasum 評(píng)論0 收藏0

  • 2018年最佳JavaScript數(shù)據(jù)可視化和圖表庫(kù)

    摘要：它有什么圖表加粗文字如何使用這個(gè)圖表庫(kù)可以通過存儲(chǔ)庫(kù)下載或通過包管理器安裝。數(shù)據(jù)可以直接從文件加載到圖表中。它有什么圖表如何使用該庫(kù)可在包管理器和他們自己的內(nèi)容傳送網(wǎng)絡(luò)中使用。該庫(kù)專為風(fēng)格的數(shù)據(jù)可視化而設(shè)計(jì)，提供一系列高度可配置的圖表。 現(xiàn)在有很多圖表庫(kù)，但哪一個(gè)最好用？這可能取決于許多因素，如業(yè)務(wù)需求，數(shù)據(jù)類型，圖表本身的目的等等。在本文中，每個(gè)JavaScript圖表庫(kù)將與一些關(guān)鍵...

    dreambei 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<