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

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

![image](https://raw.githubusercontent.com/tjukanovt/30DayMapChallenge/main/images/flyers/30dmc-2022.png)

https://30daymapchallenge.com/

## 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 // 傾き
})
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667439/bc2a593c-872a-6fa4-14f3-6cbf26a05d26.png)

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

これがラインデータ！
神奈川県の西側はバスのルート少ないんですねえ・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667439/aee3df1d-482e-bcc8-5e35-31c6c625847d.png)

## ラインデータ表示
ラインデータが入ったGeoJSONを読み込んで、ラインを表示してみます
```diff_javascript
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
+        }
+    });
+});
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667439/9dcd869e-7678-ec43-c42b-4f14eea2cd03.png)


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

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

```diff_javascript
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', '神奈川中央交通（株）']
    });
});
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667439/2b5b9a44-c215-b4b9-64e9-eb942550f47c.png)

いい感じです！

## 参考文献
https://www.pasco.co.jp/recommend/word/word022/

https://maplibre.org/maplibre-gl-js-docs/example/geojson-line/

https://maplibre.org/maplibre-gl-js-docs/example/filter-markers/