メモ

Leafletで地図の代わりに画像を表示してみたのでそのメモ。(2023/8)

Leafletとは

地図を表示するときにGoogleマップを使っている方も多いと思います。
LeafletはGoogleマップの代替にできる、無償で利用できるWEBマップ用のツールです。
Leafletは約11年前に、ウクライナのキエフ在住の「Volodymyr Agafonkin」さんが作られました。

Leafletは地図を表示するための仕組みを提供します。Googleマップと同じように、ピンを置いたり、ポリゴンを書いたりといろいろできます。
地図自体は含まれていないので、別に準備する必要があります。
この記事を記載している時点では、国土地理院、OpenStreetMap、Goolge地図など一般的なタイルマップが利用できます。
国土地理院の地図をLeafletで使う方法は、国土交通省の国土地理院のサイトに記載されていますので、参考にしてください。
　国土地理院：https://maps.gsi.go.jp/development/sample.html」

ここでは、画像を地図の代わりに表示する方法を記載します。

地図の代わりに画像を表示する

LeafletはJavaScriptで動作します。
headタグに下記を記載します。

画像を地図の代わりに表示するときも、地図を表示するときと同じように初期化を行います。
ただし、「tileLayer」関数は使わずに、「imageOverlay」関数で表示する画像を指定します。
また、「L.map('map')」でインスタンス化するときに、オプションを設定します。

全体のコードは下記になります。

※「example_base.jpg」は適当な画像に置き換えてください。
実行のサンプルはこちら（一部変更あり）

mapの初期化時に「crs: L.CRS.Simple」を指定することで、地球のような球面の地図ではなく、画像の平面の座標を使用します。
（参考：https://leafletjs.com/reference.html#crs-l-crs-simple）

imageOverlayで画像を表示していますが、そのときにimageBoundsで、画像の左下の点の座標を（0, 0）、右上の点の座標を（画像の横幅、画像の縦幅）に指定しています。

これで、Leafletで地図の代わりに画像を表示してみた、はおしまいです。