More than 1 year has passed since last update.

日本の旅客鉄道の変遷および日本の高速道路整備の変遷をMapLibre GL JSで表示してみました

Last updated at 2022-12-05Posted at 2022-12-05

はじめに

国土数値情報の鉄道時系列データと高速道路時系列データを用いて、日本の旅客鉄道の変遷（1872～2021年）および日本の高速道路整備の変遷（1963～2021年）をMapLibre GL JSで表示してみました。

鉄道時系列データおよび高速道路時系列データは、以下の国土数値情報の提供サイトよりgeojsonファイル（令和3年）をダウンロードして使用しています。
国土数値情報-鉄道時系列データ
https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N05-v1_3.html
国土数値情報-高速道路時系列データ
https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N06-v2_0.html
背景地図にはMapTilerを使用しているため、別途、MapTilerにてAPI Keyの取得が必要になります。

★★★↓Mapbox GL JS(v2)はこちらの記事を参照願います。★★★
日本の旅客鉄道の変遷をMapbox GL JSで表示してみました
 日本の高速道路整備の変遷をMapbox GL JSで表示してみました

アウトプットイメージ

Day 25 of #30DayMapChallenge - Colour Friday: 2 colours
日本の旅客鉄道🚆および日本の高速道路整備🚙の変遷を2色で表現。2色でボカシを入れて光らせるのは難しい📝#MapLibre #MapTiler pic.twitter.com/jOpAlTHrYk
— shi_works🌔 (@syanseto) November 25, 2022

前提条件

鉄道時系列データは、令和3年の「N05-21_RailroadSection2.geojson」を用いています※。
※ただし、フィルタで使用する、geojsonファイルの属性の供用開始年（N05_004）と設置期間（設置終了）（N05_005e）が文字列のため、あらかじめQGIS等で整数に変換したものを用いています。
高速道路時系列データは、令和3年の「N06-21_HighwaySection.geojson」を用いています。
下記のコード内のMapTilerのAPI Key、geojsonファイルのパスを入力してください。

html、CSS、JavaScript

highway&railroad_transition.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>日本の旅客鉄道および日本の高速道路整備の変遷</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <!-- MapLibre -->
    <script src='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js'></script>
    <link href='https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css' rel='stylesheet' />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <style>
        .map-overlay {
            font: 18px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
            position: absolute;
            width: 25%;
            top: 0;
            left: 0;
            padding: 10px;
        }

        .map-overlay .map-overlay-inner {
            background-color: #fff;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
            border-radius: 3px;
            padding: 10px;
            margin-bottom: 10px;
        }

        .map-overlay h2 {
            line-height: 24px;
            display: block;
            margin: 0 0 10px;
        }

        .map-overlay .legend .bar {
            height: 10px;
            width: 100%;
            background: linear-gradient(to right, #CCFFCC, #00ff00);
        }

        .map-overlay input {
            background-color: transparent;
            display: inline-block;
            width: 100%;
            position: relative;
            margin: 0;
            cursor: ew-resize;
        }
    </style>
    <div id="map"></div>
    <div class="map-overlay top">
        <div class="map-overlay-inner">
            <h3>日本の旅客鉄道および日本の高速道路整備の変遷</h3>
            使用データ：<br>
            <a href="https://nlftp.mlit.go.jp/index.html" target="_blank" rel="noopener">
                国土数値情報, 鉄道時系列データ及び高速道路時系列データ（国土交通省）</a><br><br>
            <label id="year_label"></label>
            <input id="slider" type="range" min="1872" max="2021" step="1" value="1872">
        </div>
    </div>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script>
        var map = new maplibregl.Map({
            container: 'map',
            style: 'https://api.maptiler.com/maps/darkmatter/style.json?key=MapTilerのAPI Keyを入力してください',
            center: [139.6226196, 35.4660694], // 中心座標
            zoom: 8, // ズームレベル
            pitch: 0 // 傾き
        })

        // ズーム・回転
        map.addControl(new maplibregl.NavigationControl());

        // フルスクリーンモードのオンオフ
        map.addControl(new maplibregl.FullscreenControl());

        // スケール表示
        map.addControl(new maplibregl.ScaleControl({
            maxWidth: 200,
            unit: 'metric'
        }));

        function filterBy(year) {
            const filter1 = ['all', ['<=', 'N06_002', year]]; // 設置期間（開始年）
            map.setFilter('highway-lines-1', filter1);
            map.setFilter('highway-lines-2', filter1);
            map.setFilter('highway-lines-3', filter1);

            const filter2 = ['all', ['<=', 'N05_004_int', year], ['>=', 'N05_005e_int', year]]; // 供用開始年と設置期間（設置終了）
            map.setFilter('railroad-lines-1', filter2);
            map.setFilter('railroad-lines-2', filter2);
            map.setFilter('railroad-lines-3', filter2);

            // スライダー表示用ラベル
            document.getElementById('year_label').textContent = year.toString() + '年';
        }

        map.on('load', () => {
            d3.json(
                'data/N06-21_HighwaySection.geojson',
                json1Callback
            );
            d3.json(
                'data/N05-21_RailroadSection2_int.geojson',
                json2Callback
            );
        });

        function json2Callback(data) {
            map.addSource('railroad', {
                'type': 'geojson',
                'data': data
            });

            // ライン
            map.addLayer({
                'id': 'railroad-lines-1',
                'type': 'line',
                'source': 'railroad',
                'layout': {
                    'line-join': 'round',
                    'line-cap': 'round'
                },
                'paint': {
                    'line-color': [
                        'interpolate',
                        ['linear'],
                        ['get', 'N05_004_int'],
                        1872,
                        /*'#006400',*/
                        /*'#CCFFCC',*/
                        'rgba(25, 0, 101, 0.3)',
                        2021,
                        'rgba(25, 0, 101, 0.3)'
                    ],
                    'line-width': 18,
                    'line-blur': 0.8
                }
            });
            map.addLayer({
                'id': 'railroad-lines-2',
                'type': 'line',
                'source': 'railroad',
                'layout': {
                    'line-join': 'round',
                    'line-cap': 'round'
                },
                'paint': {
                    'line-color': [
                        'interpolate',
                        ['linear'],
                        ['get', 'N05_004_int'],
                        1872,
                        /*'#006400',*/
                        /*'#CCFFCC',*/
                        'rgba(0, 0, 203, 0.6)',
                        2021,
                        'rgba(0, 0, 203, 0.6)'
                    ],
                    'line-width': 6,
                    'line-blur': 0.4
                }
            });
            map.addLayer({
                'id': 'railroad-lines-3',
                'type': 'line',
                'source': 'railroad',
                'layout': {
                    'line-join': 'round',
                    'line-cap': 'round'
                },
                'paint': {
                    'line-color': [
                        'interpolate',
                        ['linear'],
                        ['get', 'N05_004_int'],
                        1872,
                        /*'#006400',*/
                        /*'#CCFFCC',*/
                        'rgba(204, 242, 255, 1)',
                        2021,
                        'rgba(204, 242, 255, 1)'
                    ],
                    'line-width': 1.5,
                }
            });
            // フィルター実行
            // filterBy(1962); // 初期表示
            filterBy(1872); // 初期表示
            document.getElementById('slider').addEventListener('input', (e) => {
                const year = parseInt(e.target.value, 10); // スライダーで選択した年次を整数化
                filterBy(year);
            });
        }

        function json1Callback(data) {
            map.addSource('highway', {
                'type': 'geojson',
                'data': data
            });

            // ライン
            map.addLayer({
                'id': 'highway-lines-1',
                'type': 'line',
                'source': 'highway',
                'layout': {
                    'line-join': 'round',
                    'line-cap': 'round'
                },
                'paint': {
                    'line-color': [
                        'interpolate',
                        ['linear'],
                        ['get', 'N06_002'],
                        1962,
                        /*'#006400',*/
                        /*'#CCFFCC',*/
                        'rgba(0, 112, 32, 0.3)',
                        2021,
                        'rgba(0, 112, 32, 0.3)'
                    ],
                    'line-width': 18,
                    'line-blur': 0.8
                }
            });
            map.addLayer({
                'id': 'highway-lines-2',
                'type': 'line',
                'source': 'highway',
                'layout': {
                    'line-join': 'round',
                    'line-cap': 'round'
                },
                'paint': {
                    'line-color': [
                        'interpolate',
                        ['linear'],
                        ['get', 'N06_002'],
                        1962,
                        /*'#006400',*/
                        /*'#CCFFCC',*/
                        'rgba(0, 172, 64, 0.6)',
                        2021,
                        'rgba(0, 172, 64, 0.6)'
                    ],
                    'line-width': 6,
                    'line-blur': 0.4
                }
            });
            map.addLayer({
                'id': 'highway-lines-3',
                'type': 'line',
                'source': 'highway',
                'layout': {
                    'line-join': 'round',
                    'line-cap': 'round'
                },
                'paint': {
                    'line-color': [
                        'interpolate',
                        ['linear'],
                        ['get', 'N06_002'],
                        1962,
                        /*'#006400',*/
                        /*'#CCFFCC',*/
                        'rgba(220, 236, 220, 1)',
                        2021,
                        'rgba(220, 236, 220, 1)'
                    ],
                    'line-width': 1.5,
                }
            });

            // フィルター実行
            // filterBy(1962); // 初期表示
            filterBy(1872); // 初期表示
            document.getElementById('slider').addEventListener('input', (e) => {
                const year = parseInt(e.target.value, 10); // スライダーで選択した年次を整数化
                filterBy(year);
            });
        }
    </script>
</body>
</html>

参考文献

タイムスライダーを作成
https://docs.mapbox.com/jp/mapbox-gl-js/example/timeline-animation/

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up