Leaflet快速開始教程

gecko23 發布于2019-08-23 15:39 / 2737人閱讀

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

提示：在Leaflet官方教程的基礎上，增加了一些注釋以及鏈接，可幫助讀者更好的學習Leaflet,有不正確或有待改進的地方，歡迎批評指出。

Leaflet

an open-source JavaScript library for mobile-friendly interactive maps

Leaflet Quick Start Guide

本教程將快速介紹有關于Leaflet的基礎知識，包括設置Leaflet地圖、創建(線、標記、提示框)以及處理一些事件，讓你對‘葉子’有個基本的了解。

準備

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

leaflet.js、leaflet.css

創建一個擁有具體id的div容器。

明確容器的高度。

#mapid { height: 180px; }

設置地圖

用Mapbox Streets的瓦片數據來創建一個以武漢為中心的地圖。首先我們將初始化地圖，通過選定的地理坐標設置地圖視角以及縮放級別。

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

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

添加瓦片圖層到地圖上。創建一個瓦片圖層通常需要為瓦片影像設置URL template、數據來源、最大縮放級別。

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不會強制用戶使用特定提供商的瓦片地圖。當然，使用不同提供商的瓦片地圖時，在使用語法上會有些許不同(詳情請參考:Leaflet-providers)，就比如Mapbox，你必須在Mapbox官網注冊，獲得ID以及ACCESS_TOKEN才可以使用。密鑰獲取地址：mapbox密鑰。
Markers，circles，polygons
??除了瓦片圖層，還可以很方便地在地圖上添加其他一些東西，包括marker、polylines、polygons、circles和popups。

添加marker
var marker = L.marker([51.5, -0.09]).addTo(mymap); //可以添加相應的options
添加circle
//通過傳入相應options控制circle樣式
var circle = L.circle([51.508, -0.11], {
    color: "red",         //圈軌跡顏色，即外邊框的顏色
    fillColor: "#f03",    //填充色，默認值與color值一致
    fillOpacity: 0.5,     //填充透明度
    radius: 500           //circle半徑，單位為米
}).addTo(mymap);
添加polygon
//面是一個二維坐標數組
var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(mymap);
使用彈出窗口

??當您想要將某些信息附加到地圖上的特定對象時，通常需要使用彈出窗口，Leaflet有非常方便快捷的方法：
marker.bindPopup("Hello world!
I am a popup.").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon.");
??bindPopup方法將帶有指定HTML內容的彈出窗口附加到您的標記上,以便在您單擊該對象時出現彈出窗口。同時openPopup方法僅僅只適用于marker。
??當你需要的東西不僅僅是附加一個彈出對象時，可以將popups作為圖層來使用：
var popup = L.popup()
    .setLatLng([51.5, -0.09])
    .setContent("I am a standalone popup.")
    .openOn(mymap); //使用openOn而不是addTo,此方法在打開一個新的彈出窗口時，會自動關閉之前打開的彈出窗口
處理事件
??在Leaflet上發生的一些事件，比如用戶點擊標記或改變地圖縮放大小，相應的對象會發送一個可以用函數描述的事件。它可以對用戶交互作出反應：
//點擊地圖任意位置，會彈出當前位置的坐標信息
function onMapClick(e) {
    alert("You clicked the map at " + e.latlng);
}
mymap.on("click", onMapClick);
??每個對象都有自己的一組事件，監聽函數on()的第一個參數是一個事件對象，它包含有發生的事件的有用信息。例如，地圖點擊事件對象（上例中的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);

云服務器 GPU云服務器服務端快速開始 leaflet leaflet 國內cdn python快速教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102375.html

HTML-CSS-JS

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

mikasa 2019-08-01 18:18 評論0 收藏0
HTML-CSS-JS

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

李世贊 2019-08-29 14:08 評論0 收藏0
HTML-CSS-JS

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

MudOnTire 2019-08-21 18:25 評論0 收藏0
2018年最佳JavaScript數據可視化和圖表庫

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

terasum 2019-08-02 11:51 評論0 收藏0
2018年最佳JavaScript數據可視化和圖表庫

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

dreambei 2019-08-29 17:08 評論0 收藏0