使用 HTML 和 JavaScript 實現 Leaflet.js

要使用 Leaflet，請將其樣式表和 JavaScript 檔案載入到你的頁面：

<link rel="stylesheet" href="/css/leaflet.css" />
<script src="/js/leaflet.js"></script>

這些資源可以從各種位置下載，如 Leaflet 的主頁或 Leaflet Github 儲存庫 ，或者你可以直接使用 CDN，

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" ></script>

你的地圖需要一個容器。開發人員通常使用 id 為 map 的 div。確保你的地圖 div 也是一個高度，否則地圖可能不會顯示。

<div id="map" style="height: 200px;"></div>

通過使用 Leaflet.map(mapContainerId) 方法建立地圖物件來初始化地圖。在下面的示例中，緯度和經度被設定為預設值，預設縮放級別為 13。

var map = L.map('map').setView([42.35, -71.08], 13);

這將建立我們的空地圖，我們現在應該提供一個切片圖層作為我們的基本地圖。瓦片層是一種服務，它以瓦片形式提供地圖影象，小影象以特定順序由 x，y 和 z 引數訪問（見下文）。

tile 圖層 URL 可能如下所示，其中 {s}，{z}，{x} 和 {y} 是 Leaflet 在操作期間自動更改的佔位符：

"http://{s}.domain.com/foo/{z}/{x}/{y}.png"

我們現在可以新增我們的 tilelayer，以及歸因資訊和最大可能縮放級別，並將其新增到地圖中：

L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
{
  attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
  maxZoom: 17,
  minZoom: 5
}).addTo(map);

注意： 在包含 leaflet.js 和地圖容器 div 元素之後，需要進行地圖初始化和載入切片圖層。