GUNMA GIS GEEK

群馬県の片隅でオープンデータとデータビジュアライゼーションとGIS(地理情報システム)に戯れるエンジニアのブログ

leaflet.js

Leaflet.jsで画像を表示する

投稿日:2015年6月2日

先日の「社寺参詣曼荼羅」が面白い。の記事で、曼荼羅画像を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)で表示しています。

About Me

著者: 清水正行
所在地: 群馬県高崎市

群馬・東京間を行き来する出稼ぎエンジニア。GIS(地理情報システム)・データビジュアライゼーション・オープンデータなどについて書いてます。