はじめに
この記事は#30DayMapChallenge2022 18日目の記事です。
テーマはColour Friday: Blueです。
OpenLayersを使って栃木県の河川のラインデータを表示してみます。
OpenLayersとは
簡単にダイナミックなマップを設置することができるJavaScriptライブラリ
地図タイル、ベクトルデータ、マーカーを表示することができる
フリーかつオープンソースで、2条項のBSDライセンス（FreeBSDとしても知られています）の下でリリースされている
執筆時の最新バージョンはv7.1.0でした
ラインデータを取得する
今回はGeoJSONを使って表示してみます。
国土数値情報から栃木県の河川データをダウンロードします。
https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-W05.html
中身はシェープファイルだったので、QGISでGeoJSONに変換します。
ラインデータを表示する
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>サンプル</title>
<meta name="description" content="サンプルです" />
<link href="style.css" rel="stylesheet" />
<!-- OpenLayers -->
<script src="https://cdn.jsdelivr.net/npm/ol@v7.1.0/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.1.0/ol.css" />
</head>
<body>
<div id="map"></div>
<script src="main.js"></script>
</body>
</html>
style.css
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
main.js
const style = {
MultiLineString: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 3,
}),
}),
};
const styleFunction = function (feature) {
return style[feature.getGeometry().getType()];
};
const vectorSource = new ol.source.Vector({
url: 'data/tochigi_river.geojson',
format: new ol.format.GeoJSON(),
attributions: 'データの出典：国土数値情報（河川データ）（国土交通省）',
});
const vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: styleFunction,
});
const map = new ol.Map({
layers: [new ol.layer.Tile({ source: new ol.source.OSM() }), vectorLayer],
view: new ol.View({
center: ol.proj.transform([139.8825316, 36.5551416], 'EPSG:4326', 'EPSG:3857'),
zoom: 12,
}),
target: 'map',
});
ラインデータのスタイルを定義します
GeoJSONを読み込み、スタイルを設定します。
Mapオブジェクトに作成したレイヤを追加します。
ラインデータを表示できました！
思ったよりも川多いですね！
参考文献