【MapLibre GL JS】ラインデータを表示する #JavaScript

はじめに

この記事は#30DayMapChallenge2022 2日目の記事です。
テーマはLinesです。
MapLibre GL JSを使ってLineデータを地図上に表示してみます。

Lineとは

ベクタデータの3要素（ポイント・ライン・ポリゴン）のうちの1つ。
複数の点を接続する線を指します。

地図表示

横浜駅周辺を表示してみます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>サンプル</title>
    <meta name="description" content="サンプルです">
    <link href="style.css" rel="stylesheet">
    <!-- 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' />
</head>
<body>
    <div id="map"></div>
    <script src="main.js"></script>
</body>
</html>

style.css

html, body{
    height: 100%;
 }
  
#map{
   height: 100%;
}

main.js

var map =  new maplibregl.Map({
    container: 'map',
    style: 'https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json', // 地図のスタイル
    center: [139.6226196,35.4660694], // 中心座標
    zoom: 14, // ズームレベル
    pitch: 0 // 傾き
})

ラインデータ取得

今回はGeoJSONを使って表示してみます。
国土数値情報から神奈川県のバスルートデータをダウンロードします。
https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N07.html#prefecture14
中身はシェープファイルだったので、QGISでGeoJSONに変換します。

これがラインデータ！
神奈川県の西側はバスのルート少ないんですねえ・・

ラインデータ表示

ラインデータが入ったGeoJSONを読み込んで、ラインを表示してみます

var map =  new maplibregl.Map({
    container: 'map',
    style: 'https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json', // 地図のスタイル
    center: [139.6226196,35.4660694], // 中心座標
    zoom: 14, // ズームレベル
    pitch: 0 // 傾き
})

+map.on('load', function () {
+    map.addSource('kanagawa_bus', {
+        type: 'geojson',
+        data: './data/kanagawa_bus.geojson'
+    });
+    map.addLayer({
+        'id': 'kanagawa_bus',
+        'type': 'line',
+        'source': 'kanagawa_bus',
+        'layout': {
+            'line-join': 'round',
+            'line-cap': 'round'
+        },
+        'paint': {
+            'line-color': '#0067c0',
+            'line-width': 5
+        }
+    });
+});

ラインデータを表示できました～

フィルタを追加

バスの事業者をフィルタ機能を使って絞ってみます。
今回は、神奈川中央交通（株）のバスルートだけを表示します

var map =  new maplibregl.Map({
    container: 'map',
    style: 'https://tile.openstreetmap.jp/styles/osm-bright-ja/style.json', // 地図のスタイル
    center: [139.6226196,35.4660694], // 中心座標
    zoom: 14, // ズームレベル
    pitch: 0 // 傾き
})

map.on('load', function () {
    map.addSource('kanagawa_bus', {
        type: 'geojson',
        data: './data/kanagawa_bus.geojson'
    });
    map.addLayer({
        'id': 'kanagawa_bus',
        'type': 'line',
        'source': 'kanagawa_bus',
        'layout': {
            'line-join': 'round',
            'line-cap': 'round'
        },
        'paint': {
            'line-color': '#0067c0',
            'line-width': 5
        },
+        'filter': ['==', 'N07_002', '神奈川中央交通（株）']
    });
});

いい感じです！

【MapLibre GL JS】ラインデータを表示する