Leaflet.jsを使って、巨大な画像を地図のように表示するプラグイン「Leaflet.Zoomify」

下記は画像なので動きません。

「Leaflet.Zoomify」は、地図ライブラリのLeaflet.jsを使用して画像を地図のように表示するプラグインです。

下処理として、「ZoomifyExpress4」というアプリケーションを使って画像をタイル化します。（解凍したファイルの中から「Zoomify Converter.exe」を実行し、タイル化する画像を選択すれば後は自動で処理がおこなわれます）

タイルに変換すると容量がかなり増えるので気を付けてください。

サンプル

STARMEN.NETからダウンロードした「Full Map of MOTHER / EarthBound Zero」画像をZoomifyExpress4を使ってタイル化し、Leaflet.Zoomifyで地図として表示しました。

※下記の地図は動きます。

leaflet.jsを読み込んだ後に、L.TileLayer.Zoomify.jsを読み込んでください。

<link rel="stylesheet" href="leaflet-0.7.3/leaflet.css" />
<script src="leaflet-0.7.3/leaflet-src.js"></script>
<script type="text/javascript" src="L.TileLayer.Zoomify.js"></script>

基本的には、タイル化した画像が収められているフォルダを指定するだけです。

var map = L.map('map').setView(new L.LatLng(0,0), 0);

L.tileLayer.zoomify('mother_map/', { //タイル画像フォルダを指定
    width: 16384,
    height: 14336,
    tolerance: 0,
    attribution: 'Image: <a href="http://starmen.net/mother1/miscinfo/">starmen.net</a>'
}).addTo(map);


map.setView(new L.LatLng(74.56673621013677, -117.18017578125));

var map = L.map('map').setView(new L.LatLng(0,0), 0);

L.tileLayer.zoomify('mother_map/', { //タイル画像フォルダを指定

width: 16384,

height: 14336,

tolerance: 0,

attribution: 'Image: <a href="http://starmen.net/mother1/miscinfo/">starmen.net</a>'

}).addTo(map);

map.setView(new L.LatLng(74.56673621013677, -117.18017578125));

ちょー簡単！

サンプル

投稿者: shimizu