dayjournal memo

Total 975 articles!!

mapboxgljs

Mapbox GL JS #018 – GeoJSONを切り替え表示

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


画像



GeoJSONを切り替え表示するメモ。



画像



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


// MIERUNE MONO読み込み
var map = new mapboxgl.Map({
    container: "map",
    style: {
        version: 8,
        sources: {
            m_mono: {
                type: "raster",
                tiles: ["https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png"],
                tileSize: 256
            }
        },
        layers: [{
            id: "m_mono",
            type: "raster",
            source: "m_mono",
            minzoom: 0,
            maxzoom: 18
        }]
    },
    center: [139.7670, 35.6810],
    zoom: 13
});


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

    // ポイント追加
    map.addSource("MapCircle", {
        type: "geojson",
        data: {
            type: "Feature",
            geometry: {
                type: "Point",
                coordinates: [139.7600,35.6800]
            }
        }
    });
    map.addLayer({
        id: "MapCircle",
        type: "circle",
        source: "MapCircle",
        layout: {},
        paint: {
            "circle-pitch-alignment": "map",
            "circle-stroke-color": "#1253A4",
            "circle-stroke-width": 5,
            "circle-stroke-opacity": 0.8,
            "circle-color": "#1253A4",
            "circle-radius": 5,
            "circle-opacity": 0.5
        }
    });

    // ライン追加
    map.addSource("MapLine", {
        type: "geojson",
        data: {
            type: "Feature",
            properties: {},
            geometry: {
                type: "LineString",
                coordinates: [
                    [139.7627,35.6641],
                    [139.7552,35.6721],
                    [139.7580,35.6888],
                    [139.7666,35.6970]
                ]
            }
        }
    });
    map.addLayer({
        id: "MapLine",
        type: "line",
        source: "MapLine",
        layout: {
            "line-join": "round",
            "line-cap": "round"
        },
        paint: {
            "line-color": "#FFD464",
            "line-width": 10,
            "line-opacity": 0.8
        }
    });

    // ポリゴン追加
    map.addSource("MapPolygon", {
        type: "geojson",
        data: {
            type: "Feature",
            geometry: {
                type: "Polygon",
                coordinates: [[
                    [139.7661,35.6759],
                    [139.7718,35.6741],
                    [139.7722,35.6745],
                    [139.7786,35.6837],
                    [139.7734,35.6843],
                    [139.7709,35.6846],
                    [139.7687,35.6799],
                    [139.7661,35.6759]
                ]]
            }
        }
    });
    map.addLayer({
        id: "MapPolygon",
        type: "fill",
        source: "MapPolygon",
        layout: {},
        paint: {
            "fill-color": "#58BE89",
            "fill-opacity": 0.5
        }
    });


    // レイヤ設定
    var Map_AddLayer = {
        MapCircle: "ポイント",
        MapLine: "ライン",
        MapPolygon: "ポリゴン"
    };


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

        // 初期表示全て表示
        link.className = "active";

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

            // ON/OFF状態取得
            var visibility = map.getLayoutProperty(clickedLayer, "visibility");

            // ON/OFF判断
            if (visibility === 'visible') {
                // クリックしたレイヤを非表示
                map.setLayoutProperty(clickedLayer, 'visibility', 'none');
                this.className = '';
            } else {
                // クリックしたレイヤを表示
                map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
                this.className = 'active';
            }
        };

        // レイヤメニューにレイヤ追加
        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