【OpenStreet】オーバレイを使おう -10分-

概要
画像の入手
リンク先

概要

以下のようにオーバレイを使ってleafletに衛星画像を張り付けてみよう。

画像の入手

入手

以下から、画像を入手します。画像のフォーマットは、位置情報が含まれるtiff(GeoTiff)をダウンロードします。

https://landbrowser.airc.aist.go.jp/landbrowser/

QGISで位置情報を取得

tiffファイルがダウンロードできたら、QGISで位置情報を確認します。

[ラスター] ==> [その他] ==> [ラスターの情報]をクリックします。

入力レイヤーにtiffファイルを指定して、”画像統計量を・・・”にチェックして、”実行”ボタンをクリックします。

以下の場所に画像の4隅の位置情報が書かれています。

位置情報の変換

以下の4つの情報が取得できましたが、画像を張り付ける時に必要な情報は、左上の座標と右下の座標です。

Upper Left (15335368.214, 4444622.904) (137d45’35.84″E, 37d 2’22.43″N)
Lower Left (15335368.214, 4175564.564) (137d45’35.84″E, 35d 5′ 9.34″N)
Upper Right (15922404.591, 4444622.904) (143d 2′ 0.22″E, 37d 2’22.43″N)
Lower Right (15922404.591, 4175564.564) (143d 2′ 0.22″E, 35d 5′ 9.34″N)

緯度と経度は、以下の黄色の箇所に出力されます。

Upper Left (15335368.214, 4444622.904) (137d45’35.84″E, 37d 2’22.43″N)
Lower Right (15922404.591, 4175564.564) (143d 2′ 0.22″E, 35d 5′ 9.34″N)

緯度と経度は、60進法ですので10進法に変換します。

度分秒と十進度（十進経緯度）の相互換算

地図でよく使われる座標として緯度経度があります。たとえば日本経緯度原点はこのような緯度経度になります。東経139度44...

10進法に変換した結果は、以下の通りです。

      [137.759955556 ,37.0395638889]
      [143.033394444 ,35.0859277778]

Leafletで定義

以下のように、画像の定義と左上、右下の座標を定義します。緯度と経度は逆になっていることに注意して設定します。L.imageOverlayでは、tiffの画像フォーマットがダメなようで、JPEGかPNGなら大丈夫そうです。画像の透過が利用できるPNGに変換して、設定しました。

      ////////////////
      var image_url = './images/LC81070352021058LGN00_default.png';
      var bounds = L.latLngBounds(
          [37.0395638889 ,137.759955556],
          [35.0859277778,143.033394444]
      );
      var map = L.map('mapid',{
          center: [35.6911525833333 , 139.699627638889],
          zoom: 8,
          minZoom: 4,
          maxZoom: 30
      });

      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '
      }).addTo(map);

      L.imageOverlay(image_url, bounds, {
          attribution: '<a href="https://www.usgs.gov/">USGS</a>'
      }).addTo(map);

問題なく貼り付けできました。

拡大・縮小しても大丈夫です。

リンク先

無料でMapを作ろう