LeafletJS-Overlay

最新推荐文章于 2024-08-31 09:04:57 发布

丷丩

最新推荐文章于 2024-08-31 09:04:57 发布

阅读量1.3k

点赞数

分类专栏： Leaflet GIS 文章标签： js javascript gis

原文链接：https://www.tutorialspoint.com/leafletjs/leafletjs_overlay.htm

版权

GIS 同时被 2 个专栏收录

96 篇文章 27 订阅

订阅专栏

Leaflet

6 篇文章 0 订阅

订阅专栏

除了地图叠加层，您还可以在Leaflet应用程序中使用图像，视频叠加层。在本章中，我们将看到如何使用这些叠加层。

图像叠加

请按照下面给出的步骤使用图像叠加层。

步骤1-通过传递< div >元素（字符串或对象）和地图选项（可选）来创建地图对象。

步骤2-通过传递所需图块的URL 创建一个Layer对象。

第3步 -使用Map类的addLayer（）方法将图层对象添加到地图。

步骤4-使用L.imageOverlay（）创建图像叠加层。传递图像的URL和代表图像边界的对象，如下所示。

<span style="color:rgba(0, 0, 0, 0.87)">// Creating Image overlay
var imageUrl = 'tpPoster.jpg';
var imageBounds = [[17.342761, 78.552432], [16.396553, 80.727725]];
var overlay = L.imageOverlay(imageUrl, imageBounds);
</span>

步骤5-使用imageOverlay类的addTo（）方法将叠加层添加到地图，如下所示。

<span style="color:rgba(0, 0, 0, 0.87)">// Adding overlay to the map
overlay.addTo(map);
</span>

例

以下代码演示了图像叠加层的用法。

<span style="color:rgba(0, 0, 0, 0.87)"><!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></span>

它生成以下输出-