オープンソースの地図ライブラリである Leaflet.js を使って(正確には「 Leaflet.js の UI 」を使って)、地図以外の情報を表示することができます。今回は「画像」を表示する方法を紹介します。

例えば Leaflet.js を使って OSM(OpenStreetMap) の地図を表示するには以下のような JavaScript コードをブラウザで実行します:
<div id="demoMap"></div>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>


<script>
var map = L.map('demoMap', { dragging: false, zoomControl: false, minZoom: 5, maxZoom: 5 }).setView( [ 35.695, 139.983 ], 5 );
L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data © <a href="http://openstreetmap.org/">OpenStreetMap</a>',
    maxZoom: 5
  }
).addTo( map );
</script>

20200506


詳しくは紹介しませんが、青字の行でマップの定義を行って、赤字部分で OSM を指定して地図を表示する、という処理を実行しています。 この赤字部分ではタイルレイヤー(tileLayer)を使って OSM のタイルを指定しているのですが、Leaflet ではここを変えることで地図以外のオブジェクトを扱うことも可能です。今回はその中の1つである「画像」を扱う方法を紹介します。

まず Leaflet.js 利用時に限りませんが、地図アプリの UI というのはなかなか便利です。目的のオブジェクト(普通は地図)をマウスやスワイプでスクロールしたり、拡大・縮小したりして見たり、クリック・ダブルクリックによって特定位置を指定したりすることができます。これ自体が非常に便利な UI となっていて、地図以外でもこのようなインターフェースを使いたくなることがあります。今回は「(比較的大きな)画像ファイル」を対象に Leaflet.js でスクロール・拡大・縮小といったインターフェースが使えるように表示させてみます。

今回の表示対象画像は「いらすとや」「家にいるアマビエ」の画像とします:
amabie_stay_home


オリジナルは横 400 x 縦 373 ピクセルの画像だったのですが、これを 3600 x 3600 に拡大した画像(3600x3600.png)を用意しました。このファイルを使って以下のようなコードを用意します:
<div id="demoMap"></div>

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>

<script>
//. 空の地図を OpenStreetMap データで表示
var map = L.map('demoMap', { dragging: true, zoomControl: true, minZoom: -5, maxZoom: 5, crs: L.CRS.Simple, preferCanvas: true } );

//. 表示する画像のパスとサイズ
var image = {
  url: './3600x3600.png',
  width: 3600,
  height: 3600
};

//. 画像領域を地図に設定
var imageBounds = L.latLngBounds([
  map.unproject( [ 0, image.height ] ),
  map.unproject( [ image.width, 0 ] )
]);
map.fitBounds( imageBounds );
map.setMaxBounds( imageBounds.pad( 0.5 ) );

//. 画像をオーバーレイで設定
L.imageOverlay( image.url, imageBounds ).addTo( map );
</script>

青字部分と赤字部分がそれぞれ元のコードに対応しています。ただ今回は赤字部分の前に画像を用意した後に、画像オーバーレイ(L.imageOverlay)を実行するための準備コードが間に含まれています。


実際にこのコードを使って動くページを用意しました。ワーキングデモはこちらを参照してください:
https://dotnsf.github.io/leaflet_overlay/


上記サイトに PC ブラウザかスマホブラウザでアクセスすると、画面中央に上述の画像が表示されます。ただ単に画像が表示されているわけではなく、画面左上に Leaflet.js のズームコントローラーが、右下には Leaflet ロゴが表示されています:
2020050201


ズームコントローラーを使うか、あるいはスマホなどでピンチイン・アウト操作を行うことで画像が拡大・縮小して表示できます:
2020050202


またマウスやスワイプ処理で画像をスクロール表示することも可能です:
2020050203


こういったユーザーインターフェースが簡単に作れてしまうという点で Leaflet.js は本当に便利です。


(このページの続きはこちらです)
http://dotnsf.blog.jp/archives/1077424924.html