LeafletJS-オーバーレイ

マップオーバーレイの代わりに、リーフレットアプリケーションで画像、ビデオオーバーレイを使用することもできます。この章では、このようなオーバーレイの使用方法を説明します。

画像オーバーレイ

画像オーバーレイを使用するには、以下の手順に従ってください。

ステップ1 *-<div>要素（文字列またはオブジェクト）とマップオプション（オプション）を渡すことで *Map オブジェクトを作成します。

ステップ2 *-目的のタイルのURLを渡すことで *Layer オブジェクトを作成します。

ステップ3 *- *Map クラスの* addLayer（）*メソッドを使用して、レイヤーオブジェクトをマップに追加します。

ステップ4 *- L.imageOverlay（）*を使用して画像オーバーレイを作成します。以下に示すように、画像のURLと画像の境界を表すオブジェクトを渡します。

//Creating Image overlay
var imageUrl = 'tpPoster.jpg';
var imageBounds = [[var overlay = L.imageOverlay(imageUrl, imageBounds);

ステップ5 *-以下に示すように、 *imageOverlay クラスの* addTo（）*メソッドを使用して、マップにオーバーレイを追加します。

//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 = [[var overlay = L.imageOverlay(imageUrl, imageBounds);
         overlay.addTo(map);
      </script>
   </body>

</html>

それは次の出力を生成します-

オーバーレイ

Leafletjs-overlay

LeafletJS-オーバーレイ

画像オーバーレイ

例