Leaflet學習筆記（一）

 

一.簡介

Leaflet是一個主要適用於移動端交互地圖的領先的開源javascript庫。雖然js庫只有38KB左右，但是卻能滿足大部分開發者的所有功能需求。

Leaflet擁有着簡單，高效和實用的設計思想。它可以在所有主要的桌面和移動端平台上高效的運轉，可以擴展插件，它有一個漂亮的、易用的和文檔清晰的API，還有一個簡單、易讀的源代碼。

 

二.入門實例展示

 

該圖展示了我們選擇的地圖圖層（tiles），以及初始化了基本的標記和彈窗。

 

三.快速開始

1.准備一個空白的html界面。

在head引入css樣式文件。

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>

引入js文件，確保js文件在css文件之后引入。

<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>

 

2.創建一個div元素並聲明id，此時必須有一個明確的寬度，否則默認為0.

<div id="mapid" style="width:600px;height:400px;"></div>

 

3.設置地圖

一個用漂亮的Mapbox Streets的地圖圖塊創建的倫敦中心的地圖，首先需要初始化地圖，並且設置視圖用選擇的地理坐標和縮放級別。

var mymap = L.map('mapid').setView([51.505, -0.09], 13); //（地理坐標，縮放等級）

 

默認情況下，地圖上所有的鼠標和觸摸的交互控件都是激活的。

注意：setView方法可以一個地圖對象，並且大部分的Leaflet方法在不返回明確的數值是都是返回一個對象。

在地圖上添加一個圖層，此時是一個Mapbox Streets的圖層。創建一個圖層通常需要涉及到為圖層設置URL模板，圖層的屬性文本和縮放的最大級別。在當前例子下，運用Mapbox中的經典地圖的 mapbox.streets 圖塊（為了從Mapbox中運用圖塊，必須請求token）。

//titleLayer是指基礎圖層的元素
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18, //最大放大倍數
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox.streets', //地圖類型，不強制選擇圖層的提供方，可替換mapbox.satellite等
    }).addTo(mymap);

 

4.添加其他元素（標記marker、圓圈circle和多邊形polygon等）

除了添加圖層之外，例子上還有標記、圓圈和多邊形。

例如，創建一個標記：

var marker = L.marker([51.5, -0.09]).addTo(mymap); //初始化添加一個標記

 

或者添加一個圓圈：

var circle = L.circle([51.5, -0.05], { 
　　color: 'red', 
　　fillColor: '#f03', 
　　fillOpacity: 0.5, 
　　radius: 500 
}).addTo(mymap); //初始化一個邊框red，內部背景顏色#f03，透明度0.5，半徑為500的圓圈范圍

 

或者添加一個多邊形：

var polygon = L.polygon([ [51.509, -0.08], [51.503, -0.06], [51.51, -0.047]]).addTo(mymap);  //初始化一個多邊形,自定義樣式如circle

 

也可以顯示一些彈窗提示：

marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup(); //openPopup()初始化界面時觸發
circle.bindPopup("I am a circle."); //點擊觸發
polygon.bindPopup("I am a polygon.");

或者初始化顯示彈窗是可以這么寫：

//這里我們使用openOn而不是addTo是因為當開啟一個新的氣泡點時將自動關閉上一個打開的氣泡點,這樣提高了使用性
var popup = L.popup() .setLatLng([51.5, -0.09]) .setContent("I am a standalone popup.") .openOn(mymap);

 

5.簡單的觸發事件

該方法展示了點擊可觸發一個彈窗，並顯示該點的坐標。

var popup = L.popup(); //聲明（初始化）一個彈窗
    function onMapClick(e) { 
        console.log(e.latlng) 
        popup .setLatLng(e.latlng) .setContent("You clicked the map at " + e.latlng.toString()) .openOn(mymap); //點擊時通過e.latlng顯示該點坐標
    } 
    mymap.on('click', onMapClick); //點擊時觸發onMapClick事件

 

以上就是簡單的Leaflet地圖顯示案例的基本屬性使用以及說明。