Tờ rơiJS - Lớp phủ
Thay vì lớp phủ bản đồ, bạn cũng có thể sử dụng lớp phủ hình ảnh, video trong ứng dụng Tờ rơi. Trong chương này, chúng ta sẽ xem cách sử dụng các lớp phủ như vậy.
Lớp phủ Hình ảnh
Làm theo các bước dưới đây để sử dụng lớp phủ hình ảnh.
Step 1 - Tạo một Mapđối tượng bằng cách chuyển một phần tử < div > (Chuỗi hoặc đối tượng) và các tùy chọn bản đồ (tùy chọn).
Step 2 - Tạo một Layer đối tượng bằng cách chuyển URL của ô mong muốn.
Step 3 - Thêm đối tượng lớp vào bản đồ bằng cách sử dụng addLayer() phương pháp của Map lớp học.
Step 4 - Tạo lớp phủ hình ảnh bằng cách sử dụng L.imageOverlay(). Chuyển URL của hình ảnh và một đối tượng đại diện cho các giới hạn của hình ảnh, như được hiển thị bên dưới.
// Creating Image overlay
var imageUrl = 'tpPoster.jpg';
var imageBounds = [[17.342761, 78.552432], [16.396553, 80.727725]];
var overlay = L.imageOverlay(imageUrl, imageBounds);Step 5 - Thêm lớp phủ vào bản đồ bằng cách sử dụng addTo() phương pháp của imageOverlay lớp, như hình dưới đây.
// Adding overlay to the map
overlay.addTo(map);Thí dụ
Đoạn mã sau minh họa việc sử dụng lớp phủ hình ảnh.
<!DOCTYPE html>
<html>
<head>
<title>Image Overlay Example</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.342761, 78.552432],
zoom: 8
}
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
// Creating Image overlay
var imageUrl = 'tpPoster.jpg';
var imageBounds = [[17.342761, 78.552432], [16.396553, 80.727725]];
var overlay = L.imageOverlay(imageUrl, imageBounds);
overlay.addTo(map);
</script>
</body>
</html>Nó tạo ra kết quả sau:
