LeafletJS - ภาพซ้อนทับ
แทนที่จะใช้การวางซ้อนบนแผนที่คุณยังสามารถใช้ภาพซ้อนทับวิดีโอในแอปพลิเคชัน Leaflet ในบทนี้เราจะดูวิธีใช้การวางซ้อนดังกล่าว
ภาพซ้อนทับ
ทำตามขั้นตอนด้านล่างเพื่อใช้ภาพซ้อนทับ
Step 1 - สร้างไฟล์ Mapวัตถุโดยส่งผ่านองค์ประกอบ< div > (สตริงหรือวัตถุ) และตัวเลือกแผนที่ (ไม่บังคับ)
Step 2 - สร้างไฟล์ Layer ออบเจ็กต์โดยส่ง URL ของไทล์ที่ต้องการ
Step 3 - เพิ่มวัตถุเลเยอร์ลงในแผนที่โดยใช้ไฟล์ addLayer() วิธีการของ Map ชั้นเรียน
Step 4 - สร้างภาพซ้อนทับโดยใช้ L.imageOverlay(). ส่ง URL ของรูปภาพและวัตถุที่แสดงขอบเขตของภาพดังที่แสดงด้านล่าง
// 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 - เพิ่มภาพซ้อนทับลงในแผนที่โดยใช้ addTo() วิธีการของ imageOverlay ชั้นเรียนดังที่แสดงด้านล่าง
// Adding overlay to the map
overlay.addTo(map);ตัวอย่าง
รหัสต่อไปนี้แสดงให้เห็นถึงการใช้ภาพซ้อนทับ
<!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>สร้างผลลัพธ์ต่อไปนี้ -
