【Leaflet】複数のカスタム画像を使った地図で画像を切り替える

ネコニウム研究所

PCを利用したモノづくりに関連する情報を掲載するブログ

【Leaflet】複数のカスタム画像を使った地図で画像を切り替える

2022-8-15 | ,

Leafletで作った複数のカスタム画像を使った地図で画像(レイヤー)を切り替えたい!

概要

今回の記事では、Leafletで作った複数のカスタム画像を使った地図で画像(レイヤー)を切り替える手順を掲載する。

建物のフロアガイド的な感じ。

仕様書

環境

  • Leaflet 1.7.1

手順書

今回は、例えば建物のフロアガイドのように階毎に画像(レイヤー)を切り替えてみる。

コードは下記のようになる。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet Custom Image Map Test</title>
    <link rel="stylesheet" href="/libs/leaflet/leaflet.css" />
    <script src="/libs/leaflet/leaflet.js"></script>
    <script>
        function init() {
            var image1 = {
                url: 'https://blog.nekonium.com/wp-content/uploads/dq3-myhome-1f.png',
                width: 352,
                height: 287
            };
            var image2 = {
                url: 'https://blog.nekonium.com/wp-content/uploads/dq3-myhome-2f.png',
                width: 352,
                height: 287
            };

            var map = L.map('leaflet-container', {
                crs: L.CRS.Simple,
                minZoom: -1,
                maxZoom: 5
            });

            var imageBounds = L.latLngBounds([
                map.unproject([0, image1.height], 4),
                map.unproject([image1.width, 0], 4)
            ]);

            map.fitBounds(imageBounds);
            map.setMaxBounds(imageBounds.pad(0.5));

            L.control.layers({
                "1F": L.imageOverlay(image1.url, imageBounds).addTo(map),
                "2F": L.imageOverlay(image2.url, imageBounds)
            }).addTo(map);
        }
    </script>
</head>
<body onload="init()">
    <div id="leaflet-container" style="position:absolute;top:0;left:0;right:0;bottom:0;"></div>
</body>
</html>

解説

レイヤー毎の画像の設定してる部分。

            var image1 = {
                url: 'https://blog.nekonium.com/wp-content/uploads/dq3-myhome-1f.png',
                width: 352,
                height: 287
            };
            var image2 = {
                url: 'https://blog.nekonium.com/wp-content/uploads/dq3-myhome-2f.png',
                width: 352,
                height: 287
            };

レイヤーを登録してる部分。

            L.control.layers({
                "1F": L.imageOverlay(image1.url, imageBounds).addTo(map),
                "2F": L.imageOverlay(image2.url, imageBounds)
            }).addTo(map);

連想配列のキーの文字列("1F""2F"の部分)が、レイヤーの名前になる。コントロールでレイヤを選択する際に表示される。

"1F": L.imageOverlay(image1.url, imageBounds).addTo(map).addTo(map)でページの読み込み時に最初に表示するレイヤーを設定する。この場合は、1Fが表示される。

デモ

CODEPENで動かしてみると下記のような感じ。
右上のアイコンを左クリックして表示したいレイヤーのチェックを入れると、その画像に切り替わる。

See the Pen
Untitled
by 108nen (@108nen)
on CodePen.

まとめ(感想文)

この画像の元ネタは、ファミコン版のドラゴンクエストIIIの受信後(勇者)の実家っぽい見取り図です。