覆盖层

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 和 Layer 的各种选项。查看文档以了解有关 L.SVGOverlay 选项的更多信息。

查看此独立示例。