はじめに
この記事は#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', '神奈川中央交通（株）']
});
});
いい感じです！
参考文献