LeafletJS - 入門指南

什麼是 Leaflet.js

Leaflet.js 是一個開源庫，我們可以使用它來部署簡單、互動式、輕量級的 Web 地圖。

Leaflet JavaScript 庫允許您使用圖層，例如瓦片圖層、WMS、標記、彈出視窗、向量圖層（折線、多邊形、圓形等）、影像疊加層和 GeoJSON。
您可以透過拖動地圖、縮放（雙擊或滾輪滾動）、使用鍵盤、使用事件處理以及拖動標記來與 Leaflet 地圖進行互動。
Leaflet 支援 Chrome、Firefox、Safari 5+、Opera 12+、IE 7–11 等桌面瀏覽器，以及 Safari、Android、Chrome、Firefox 等移動瀏覽器。

在網頁上載入地圖的步驟

請按照以下步驟在您的網頁上載入地圖：

步驟 1：建立 HTML 頁面

建立一個基本的 HTML 頁面，其中包含如下所示的 head 和 body 標籤：

<!DOCTYPE html>
<html>
   <head>
   </head>
   
   <body>
      ...........
   </body>
</html>

步驟 2：載入 Leaflet CSS 指令碼

在示例中包含 Leaflet CSS 指令碼：

<head>
   <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
</head>

步驟 3：載入 Leaflet 指令碼

使用 script 標籤載入或包含 Leaflet API：

<head>
   <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>

步驟 4：建立容器

為了容納地圖，我們必須建立一個容器元素。通常，<div> 標籤（通用容器）用於此目的。

建立一個容器元素並定義其尺寸：

<div id = "sample" style = "width:900px; height:580px;"></div>

步驟 5：地圖選項

Leaflet 提供了多種選項，例如控制元件選項、互動選項、地圖狀態選項、動畫選項等。透過為這些選項設定值，我們可以根據需要自定義地圖。

建立一個 mapOptions 物件（它就像一個字面量一樣建立）併為中心和縮放選項設定值，其中

center - 作為此選項的值，您需要傳遞一個 LatLng 物件，指定我們要將地圖居中的位置。（只需在 [] 大括號內指定緯度和經度值）
zoom - 作為此選項的值，您需要傳遞一個整數，表示地圖的縮放級別，如下所示。

var mapOptions = {
   center: [17.385044, 78.486671],
   zoom: 10
}

步驟 6：建立地圖物件

使用 Leaflet API 的 Map 類，您可以在頁面上建立地圖。您可以透過例項化 Leaflet API 中名為 Map 的類來建立地圖物件。在例項化此類時，您需要傳遞兩個引數：

作為此選項的引數，您需要傳遞一個字串變數，表示 DOM ID 或 <div> 元素的例項。此處，<div> 元素是一個 HTML 容器，用於容納地圖。
一個可選的物件字面量，包含地圖選項。

透過傳遞 <div> 元素的 ID 和在上一步驟中建立的 mapOptions 物件來建立地圖物件。

var map = new L.map('map', mapOptions);

步驟 7：建立圖層物件

您可以透過例項化 TileLayer 類來載入和顯示各種型別的地圖（瓦片圖層）。在例項化它時，您需要以字串變數的形式傳遞一個 URL 模板，從服務提供商請求所需瓦片圖層（地圖）。

建立瓦片圖層物件，如下所示。

var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

這裡我們使用了 openstreetmap。

步驟 8：將圖層新增到地圖

最後，使用 addlayer() 方法將上一步中建立的圖層新增到地圖物件，如下所示。

map.addLayer(layer);

示例

以下示例演示瞭如何載入海德拉巴市縮放級別為 10 的 open street map。

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet sample</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>

   <body>
      <div id = "map" style = "width: 900px; height: 580px"></div>
      <script>
         // Creating map options
         var mapOptions = {
            center: [17.385044, 78.486671],
            zoom: 10
         }
         
         // Creating a map object
         var map = new L.map('map', mapOptions);
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         
         // Adding layer to the map
         map.addLayer(layer);
      </script>
   </body>
   
</html>

它生成以下輸出：

Leaflet 地圖提供商

就像 open street map 一樣，您可以載入各種服務提供商的圖層，例如 Open Topo、Thunder forest、Hydda、ESRI、Open weather、NASA GIBS 等。為此，您需要在建立 TileLayer 物件時傳遞其相應的 URL。

var layer = new L.TileLayer('URL of the required map');

下表列出了 Openstreetmap 提供的圖層的 URL 及其相應的示例地圖。

地圖型別	URL 和輸出
Mapnik	http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
黑白	http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png
DE	http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/ {y}.png
法國	http://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png
熱力圖	http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png
BZH	http://tile.openstreetmap.bzh/br/{z}/{x}/{y}.png

列印頁面