マイ地図タイルを作ろう #5 OpenSeadragon

画像ビューアライブラリ OpenSeadragon

出来立てのプラグインの動作テストを兼ねていろんな大きい画像からタイルを作っては Leaflet で表示させて画像ビューア風にして楽しんでいたところ、そもそも JavaScript の画像ビューア的なものはあるのかと思い至って探してみたら OpenSeadragon というよさげなライブラリがあることを知りました。

こちらのページで、OpenSeadragon が採用されているサイトのリストを見ることができます。写真を展示しているサイトや大学・図書館等での実績が多数載っています。

デモを触ってみたところさすが専用だけあって Leaflet を画像ビューアにするよりもズームやドラッグ移動がずっと滑らかでキレイ。デフォルトで全画面表示切替もついています。

ちょうど大きい画像をいろいろ持っているところだし、せっかくなので触ってみることに。

OpenSeadragon で Google Maps 仕様のタイルを扱う

サイト内のドキュメントをさらっと見てみたところ、幸い自作プラグインで作ったタイルをそのまま流用できそうです。

対応しているタイルの形式はサイトの Supported Tile Sources に一覧があり、Google Maps 仕様のタイルを使う場合はこの中の Custom Tile Sources にサンプルがあるのでこれに倣います。オブジェクト OpenSeadragon に渡すパラメータの詳細は OpenSeadragon API を参考に。

するとこんな感じに。ぬるぬるー！ナビつきだし回転するし！

OpenSeadragon Demo – 神奈川沖浪裏 (葛飾北斎)

前回作った北斎のタイルをファイル構成もそのままに丸ごと読み込んでいます。
参考までに Leaflet のほうは（ズームが滑らかに見えるように少々パラメータをいじった）

Leaflet Demo – 神奈川沖浪裏 (葛飾北斎)

餅は餅屋なり。Leaflet もいずれこんなふうになったらいいなあ。

OpenSeadragon オブジェクト

ご参考までに、今回作った JavaScript まわりを載せておきます（右クリックでソース見れないみたいだったので）。

CDN を使用、OpenSeadragon のオプションは OpenSeadragon#Options、tileSources のオプションは OpenSeadragon.TileSource に説明があります。

<div id="osd"></div>
<script>
OpenSeadragon({
    id:                   'osd',
    prefixUrl:            'https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.0/images/',
    showNavigator:        true,
    navigatorSizeRatio:   0.15,
    showRotationControl:  true,
    zoomPerScroll:        1.3,
    minZoomImageRatio:    0.6,
    defaultZoomLevel:     0.6,
    tileSources: {
        type:         'tiledmapservice',
        tileSize:     256,
        width:        256 * 17,
        height:       256 * 12,
        minLevel:     8,
        tileOverlap:  0,
        getTileUrl: function(level, x, y) {
            return 'tiles/hokusai/' + (level - 8) + '/' + x + '/' + y + '.jpg';
        }
    }
});
</script>

今回の Custom Tile Sources の場合、getTileUrl を自分で書いてタイルのパスを合わせてやる必要があります。Leaflet だったら L.TileLayer に tiles/{z}/{x}/{y}.jpg と指定するみたいに。

OpenSeadragon とても楽しいです。もう少し詳しくやりたい気もしますが今回はこのぐらいにします。

2018.10.15

LeafletでBotW地図を作ろう

Leaflet, OpenSeadragon