dayjournal memo

Total 975 articles!!

mapboxgljs

Mapbox GL JS #017 – ベクトルタイル背景を切り替え表示

Yasunori Kirimoto's avatar
Yasunori Kirimoto 2019/1/2


画像



ベクトルタイル背景を切り替え表示するメモ。



画像



Mapbox GL JSでは、Leafletのようなレイヤ切り替え機能は存在しません。機能を実装するためには、独自で構築する必要があります。

今回は、このサンプルを参考に構築しました。



index.html


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MapboxGLJS Starter</title>
</head>
<body>
    <nav id="menu"></nav>
    <div id="map"></div>
    <script src="./app.js"></script>
</body>
</html>


style.css


html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}

#map {
    z-index: 0;
    height: 100%;
}

#menu {
    background: #fff;
    position: absolute;
    z-index: 1;
    top: 10px;
    right: 10px;
    border-radius: 3px;
    width: 180px;
    border: 1px solid rgba(0,0,0,0.4);
}

#menu a {
    font-size: 13px;
    color: #404040;
    display: block;
    margin: 0;
    padding: 10px;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,0.25);
    text-align: center;
}

#menu a:last-child {
    border: none;
}

#menu a:hover {
    background-color: #f8f8f8;
    color: #404040;
}

#menu a.active {
    background-color: #8DCF3F;
    color: #ffffff;
}

#menu a.active:hover {
    background: #79bb2b;
}


script.js


// Mapbox APIkey
mapboxgl.accessToken = "pk.eyJ1Ijoic29iZXJqcCIsImEiOiJjamg0cmNtMmwwZ2Q4MnFvMzh5ODB2dTdwIn0.xezpDoQXZokQcjK9YgkeLQ";
// MIERUNE地図 APIkey
MIERUNE_apikey = "xxxxxxxxxx";


// Mapbox Streets読み込み
var map = new mapboxgl.Map({
    container: "map",
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [139.767, 35.681],
    zoom: 11
});


map.on("load", function() {

    // レイヤ設定
    var Map_BaseLayer = {
        streets: "Mapbox Streets",
        dark: "Mapbox Dark",
        satellite: "Mapbox Satellite",
        normal: "MIERUNE Normal",
        warm: "MIERUNE Warm"
    };


    // レイヤメニュー作成
    for (var i = 0; i < Object.keys(Map_BaseLayer).length; i++) {
        // StyleID取得
        var id = Object.keys(Map_BaseLayer)[i];
        // aタグ作成
        var link = document.createElement("a");
        link.href = "#";
        // id追加
        link.id = id;
        // 名称追加
        link.textContent = Map_BaseLayer[id];

        // 初期表示streets以外非表示
        if (id === "streets") {
            link.className = "active";
        } else {
            link.className = "";
        }

        //aタグクリック処理
        link.onclick = function (e) {
            // id取得
            var clickedLayer = this.id;
            e.preventDefault();
            e.stopPropagation();

            // ON/OFF判断
            if (this.className === "active") {
            } else {
                for (var j = 0; j < Object.keys(Map_BaseLayer).length; j++) {
                    // レイヤID取得
                    var ch_id = Object.keys(Map_BaseLayer)[j];

                    // レイヤの表示・非表示
                    if (ch_id === clickedLayer) {
                        // クリックしたレイヤを表示
                        this.className = "active";
                        // レイヤに対応したURLに切り替え
                        if (clickedLayer === "normal" || clickedLayer === "warm") {
                            map.setStyle("https://tile.cdn.mierune.co.jp/styles/" + clickedLayer + "/style.json" + "?key=" + MIERUNE_apikey);
                        } else {
                            map.setStyle('mapbox://styles/mapbox/' + clickedLayer + '-v9');
                        }
                    } else {
                        // クリックしたレイヤ以外を非表示
                        var ch_obj = document.getElementById(ch_id);
                        ch_obj.className = "";
                    }
                }
            }
        };

        // レイヤメニューにレイヤ追加
        var layers = document.getElementById("menu");
        layers.appendChild(link);
    }

});


// ズームコントロール
var nc = new mapboxgl.NavigationControl();
map.addControl(nc, 'top-left');



Mapbox GL JSを手軽に始めるビルド環境公開しています。
mapboxgljs-starter



book

Q&A