Leaflet.jsを使って任意の画像の拡縮を行いたい

この記事はFOSS4G Advent Calendar 2015の12日目の記事です。

はじめに

こんにちは。Code for Sapporo のすずきゆうすけ (@yuskesuzki) と申します。

わたしは普段 PHP や Salesforce を用いて、主に業務アプリケーションの作成に関っているエンジニアですが、わたしが所属する Code for Sapporo でリリースした 「さっぽろ保育園マップ」 の開発を通じて、OpenLayers や Leaflet.js など、自分の本業外である地理位置情報を取り扱う機会が増えました。

しかし本業外だと思っていても気がつくと本業に交じってる事も多いので、なんでもやっておくべきだなーと思うことしきりであります。

今回は小ネタとなりますが、Leaflet.js のインタフェースを使って、地図以外の画像を取り扱ってみたいと思います。

Leaflet.js で画像を取り扱う

Leaflet.js で地図タイル画像以外の任意の画像を取り扱う場合、Leaflet.js の L.Map の上に L.imageOverlay を用いて画像を重ねます。

その際、Leaflet.js の L.Map の CRS には、L.CRS.Simple を指定します。

index.html

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

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

        var imageUrl = 'https://farm6.staticflickr.com/5495/9188725689_ac415ed0b5_h.jpg';
        var imageBounds = [[230,0], [0,345]]; //初期表示範囲

        L.imageOverlay(imageUrl, imageBounds, {attribution:''}).addTo(map);

これで Leaflet.js のズームスライダーを用いて画像の拡縮を行ったり、ドラッグして画像を動かすことができるようになります。

http://jsbin.com/gist/1c8c754f7237f06cac99?js,output
→ソースコード

またある程度ズームしたときに別の画像を切替えることもできます。

http://jsbin.com/gist/5185ebbf7d5f48e806f0?js,output
→ソースコード

こうすることで、

• 建物の図面を表示して、ズームすると店舗位置を示す図面に切り替えて表示
• 服を着た女の子イラストをズームすると、同じ構図の水着を着た女の子イラスト画像に切り替えて表示

といった応用も行うことができるかと。
特に２番めについてはサンプルを作ってましたが公開に間に合わす事ができず残念です。

こちらからは以上です。