Leaflet.jsで画像を表示する

先日の「社寺参詣曼荼羅」が面白い。の記事で、曼荼羅画像をLeaflet.jsを使って表示しましたが、Leaflet.jsで画像を表示する方法についてサンプルコードを載せておきます。

サンプル

example

ポイントはmapオブジェクト初期化時、crsにL.CRS.Simpleを指定することです。(L.CRS.Simpleは緯度経度の代わりにシンプルなXY座標でマップを表示します)
画像をLeaflet内にぴったり表示したい場合は、元画像のサイズ(縦横)を縮尺してMapのサイズを決め、Boundsに比率にあった適切な値を設定します。今回は5616 x 3744サイズの画像を約16/1サイズ(690 x 460)で表示しています。

シェアする