覆蓋層

Leaflet API 中有 3 種覆蓋層

ImageOverlay：網格圖層，繼承自 Layer
VideoOverlay：網格圖層，繼承自 ImageOverlay
SVGOverlay：向量圖層，繼承自 ImageOverlay

在本教學中，您將學習如何使用這些覆蓋層。

`ImageOverlay`

L.ImageOverlay 用於在特定地圖範圍上載入和顯示單一圖像。

若要新增圖像覆蓋層 L.ImageOverlay，請使用以下方式

var imageOverlay = L.imageOverlay(imageUrl, latLngBounds, options);

建立地圖

首先，建立一個 Leaflet 地圖，並以常用的方式新增背景 L.TileLayer

var map = L.map('map').setView([37.8, -96], 4);

var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

讓我們建立一個具有多個選項的圖像覆蓋層

var imageUrl = 'https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg';
var errorOverlayUrl = 'https://cdn-icons-png.flaticon.com/512/110/110686.png';
var altText = 'Image of Newark, N.J. in 1922. Source: The University of Texas at Austin, UT Libraries Map Collection.';
var latLngBounds = L.latLngBounds([[40.799311, -74.118464], [40.68202047785919, -74.33]]);

var imageOverlay = L.imageOverlay(imageUrl, latLngBounds, {
	opacity: 0.8,
	errorOverlayUrl: errorOverlayUrl,
	alt: altText,
	interactive: true
}).addTo(map);

如果您想查看 ImageOverlay 所覆蓋的區域，您可以在地圖上新增一個具有相同 L.LatLngBounds 的 L.Rectangle

L.rectangle(latLngBounds).addTo(map);
map.fitBounds(latLngBounds);

opacity 定義圖像覆蓋層的不透明度，預設值為 1.0。降低此值可使圖像覆蓋層透明，並露出底層地圖圖層。
errorOverlayUrl 是覆蓋層圖像的 URL，用於顯示在無法載入的覆蓋層位置。
alt 設定 HTML alt 屬性，以提供圖像的替代文字描述。替代文字對於螢幕閱讀器使用者來說是重要的資訊。在網路連線不良的情況下，當圖像載入失敗時，它也可以幫助人們。此外，它還可以改善網站的 SEO。
interactive 的預設值為 false。如果為 true，當點擊或滑鼠懸停在圖像覆蓋層上時，它將發出滑鼠事件。

您可以在文件中找到 L.ImageOverlay 的其他選項。

請查看此獨立範例。

`VideoOverlay`

在建立網頁時，影片曾經是一項艱難的任務，直到 <video> HTML 元素可用。

如今，我們可以使用以下 HTML 程式碼

<video width="500" controls>
	<source src="https://www.mapbox.com/bites/00188/patricia_nasa.webm" type="video/webm">
	<source src="https://www.mapbox.com/bites/00188/patricia_nasa.mp4" type="video/mp4">
</video>

來顯示此影片

如果影片可以透過這種方式在網頁中顯示，那麼 Leaflet 就可以將其顯示在地圖內。重要的是，影片的準備方式應該適合地圖：影片應該具有「正北向上」的方向，並且其比例應該適合地圖。如果不是這樣，它看起來會不協調。

建立地圖

首先，建立一個 Leaflet 地圖，並以常用的方式新增背景 L.TileLayer

var map = L.map('map').setView([37.8, -96], 4);

var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

新增影片覆蓋層

新增影片覆蓋層的方式與新增圖像覆蓋層非常相似。

對於影片覆蓋層，只需

使用 L.VideoOverlay 而不是 L.ImageOverlay
L.VideoOverlay 用於在特定地圖範圍上載入和顯示影片播放器。繼承自 L.ImageOverlay。影片覆蓋層使用 <video> HTML 元素。
指定一個影片 URL *或* 一個影片 URL 陣列，而不是圖像 URL

var videoUrls = [
	'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
	'https://www.mapbox.com/bites/00188/patricia_nasa.mp4'
];
var errorOverlayUrl = 'https://cdn-icons-png.flaticon.com/512/110/110686.png';
var latLngBounds = L.latLngBounds([[32, -130], [13, -100]]);

var videoOverlay = L.videoOverlay(videoUrls, latLngBounds, {
	opacity: 0.8,
	errorOverlayUrl: errorOverlayUrl,
	interactive: true,
	autoplay: true,
	muted: true,
	playsInline: true
}).addTo(map);

這樣，您就可以在地圖上取得影片了

請查看此獨立範例。

autoplay 選項定義影片載入時是否自動開始播放。預設值為 true。重要的是要知道，在某些瀏覽器上，autoplay 功能只有在明確設定 muted 選項為 true 時才會運作。
muted 選項定義影片載入時是否靜音。預設值為 false。
playsInline 選項設定為 true 時，允許影片內嵌播放，而不會在行動瀏覽器中開始播放時自動進入全螢幕模式。預設值為 true。

您可以在文件中找到 L.videoOverlay 的其他選項。

影片覆蓋層的行為與任何其他 Leaflet 圖層類似 - 您可以新增和移除它們，讓使用者使用圖層控制從多個影片中選擇，等等。

稍微控制一下影片

如果您閱讀 API 文件，您會注意到 L.VideoOverlay 類別沒有 play() 或 pause() 方法。

為此，影片覆蓋層的 getElement() 方法非常有用。它會回傳覆蓋層的 HTMLVideoElement（繼承自 HTMLMediaElement）- 而它具有諸如 play() 和 pause() 之類的方法，例如。

videoOverlay.getElement().pause();

這允許我們建立自訂介面。例如，我們可以建立一個小的 L.Control 子類別，以在影片覆蓋層載入後播放/暫停它

videoOverlay.on('load', function () {
	var MyPauseControl = L.Control.extend({
		onAdd: function() {
			var button = L.DomUtil.create('button');
			button.title = 'Pause';
			button.innerHTML = '<span aria-hidden="true">⏸</span>';
			L.DomEvent.on(button, 'click', function () {
				videoOverlay.getElement().pause();
			});
			return button;
		}
	});
	var MyPlayControl = L.Control.extend({
		onAdd: function() {
			var button = L.DomUtil.create('button');
			button.title = 'Play';
			button.innerHTML = '<span aria-hidden="true">▶️</span>';
			L.DomEvent.on(button, 'click', function () {
				videoOverlay.getElement().play();
			});
			return button;
		}
	});

	var pauseControl = (new MyPauseControl()).addTo(map);
	var playControl = (new MyPlayControl()).addTo(map);
});

請查看此獨立範例。

`SVGOverlay`

L.SVGOverlay 用於在特定地圖範圍上載入、顯示 SVG 檔案並提供對其的 DOM 存取。

若要新增 SVG 覆蓋層 L.SVGOverlay，請使用以下方式

var svgOverlay = L.svgOverlay(SVGElement, svgElementBounds, options);

它會根據給定的 SVG 元素和它所連結的地理範圍來建立圖像覆蓋層物件。SVG 元素上需要 viewBox 屬性才能正確縮放。

建立 SVG 元素

讓我們建立一個 SVG 元素

var svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svgElement.setAttribute('viewBox', '0 0 200 200');
svgElement.innerHTML = '<rect width="200" height="200"/><rect x="75" y="23" width="50" height="50" style="fill:red"/><rect x="75" y="123" width="50" height="50" style="fill:#0013ff"/>';

或者，您可以使用 HTML 程式碼建立 SVG 元素

<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect width="200" height="200"/><rect x="75" y="23" width="50" height="50" style="fill:red"/><rect x="75" y="123" width="50" height="50" style="fill:#0013ff"/></svg>

並使用 querySelector 選擇此 SVG 元素

var svgElement = document.querySelector('#svg');

新增 SVG 覆蓋層

使用與 ImageOverlay 和 VideoOverlay 類似的方式，建立具有所需選項的 SVGOverlay

var latLngBounds = L.latLngBounds([[32, -130], [13, -100]]);
map.fitBounds(latLngBounds);

var svgOverlay = L.svgOverlay(svgElement, latLngBounds, {
	opacity: 0.7,
	interactive: true
}).addTo(map);

儘管 SVGOverlay 沒有其獨特的選項，但它繼承了 ImageOverlay、Interactive 圖層和 Layer 的各種選項。請查看文件以了解更多 L.SVGOverlay 選項。

請查看此獨立範例。