您还可以在Leaflet应用程序中使用图像，视频叠加层，而不是地图叠加层.在本章中，我们将看到如何使用这种叠加.
按照下面给出的步骤使用图像叠加.
第1步 : 通过传递< div >创建地图对象element(字符串或对象)和地图选项(可选).
第2步 : 通过传递所需图块的URL来创建图层对象.
步骤3 : 使用 Map 类的 addLayer()方法将图层对象添加到地图.
步骤4 : 使用 L.imageOverlay()创建图像叠加层.传递图像的URL和表示图像边界的对象，如下所示.
//创建图像叠加 var imageUrl = 'tpPoster.jpg'; var imageBounds = [[17.342761,78.552432]，[16.396553,80.727725]]; var overlay = L.imageOverlay(imageUrl，imageBounds);
第5步 : 使用 imageOverlay 类的 addTo()方法将叠加层添加到地图中，如下所示.
//向地图添加叠加层 overlay.addTo(map);
以下代码演示了图像叠加的用法.
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Polygons</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: [16.506174, 80.648015],
zoom: 7
}
var map = new L.map('map', mapOptions); // Creating a map object
// Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer(layer); // Adding layer to the map
map.on("click", function(e){
new L.Marker([e.latlng.lat, e.latlng.lng]).addTo(map);
})
</script>
</body>
</html>它生成以下输出 :
