Leaflet.jsで画像を表示する

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

サンプル

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

html,body{
	margin: 0px;
	padding: 0px;
}
#map {
	width: 690px;
	height:460px;
}

html,body{

margin: 0px;

padding: 0px;

}

#map {

width: 690px;

height:460px;

}

var map = L.map('map', {
	maxZoom: 24,
	minZoom: 1,
	crs: L.CRS.Simple
}).setView([0, 0], 1);

map.setMaxBounds(new L.LatLngBounds([0,345], [230,0])); //表示可能範囲

var imageUrl = 'Antique_shop.jpg'; //size 5616 x 3744
var imageBounds = [[230,0], [0,345]]; //初期表示範囲


L.imageOverlay(imageUrl, imageBounds, {
	attribution:'<a target="_blank" href="https://www.flickr.com/photos/75389913@N02/6777568417/">swords & other stuff at the antique shop</a>'
}).addTo(map);

var map = L.map('map', {

maxZoom: 24,

minZoom: 1,

crs: L.CRS.Simple

}).setView([0, 0], 1);

map.setMaxBounds(new L.LatLngBounds([0,345], [230,0])); //表示可能範囲

var imageUrl = 'Antique_shop.jpg'; //size 5616 x 3744

var imageBounds = [[230,0], [0,345]]; //初期表示範囲

L.imageOverlay(imageUrl, imageBounds, {

attribution:'<a target="_blank" href="https://www.flickr.com/photos/75389913@N02/6777568417/">swords & other stuff at the antique shop</a>'

}).addTo(map);

サンプル

投稿者: shimizu