はじめに
この記事は#30DayMapChallenge2022 13日目の記事です。
テーマは5 minute mapです。
OpenLayersを使って背景地図を表示してみます。
OpenLayersとは
簡単にダイナミックなマップを設置することができるJavaScriptライブラリ
地図タイル、ベクトルデータ、マーカーを表示することができる
フリーかつオープンソースで、2条項のBSDライセンス（FreeBSDとしても知られています）の下でリリースされている
執筆時の最新バージョンはv7.1.0でした
最近ロゴが変わって可愛くなりました（余談）
他のマップライブラリと比べて、座標系などGISの知識が必要になりますが高機能なことができる印象です。
OpenLayersの利用方法として以下の2つがあります。今回はCDNを使います。
- CDNからインポートする
- npmでインストールする
背景地図を表示
OpenStreetMapを表示してみます。（5分で出来たのはここまで・・涙）
<!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>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
new ol.Map({
layers: [new ol.layer.Tile({ source: new ol.source.OSM() })],
view: new ol.View({
center: [0, 0],
zoom: 2,
}),
target: 'map',
});
背景地図としてOpenStreetMapを表示できました！
OpenLayersで地理座標系を指定したい
上の状態で中心座標を経度・緯度で設定しても、うまく動作しません。
new ol.Map({
layers: [new ol.layer.Tile({ source: new ol.source.OSM() })],
view: new ol.View({
center: [139.68786, 35.68355],
zoom: 6,
}),
target: 'map',
});
東京都を指定したのに、南アフリカに飛ばされてしまいます。
これは座標系の指定によるものです。
OpenLayersでは、明示的に座標系を指定しない場合はWeb メルカトル座標系（EPSG:3857）となります。
地理座標系（経度・緯度）を使う場合は、座標系を地理座標系に変更するか、座標を地理座標系からWebメルカトルに変換する必要がありそうです。
The projection determines the coordinate system of the center, and its units determine the units of the resolution (projection units per pixel). The default projection is Web Mercator (EPSG:3857).
引用元：OpenLayers API
座標系を地理座標系に変更する
ViewのプロパティでマップのEPSGコードを地理座標系のものに設定してみます。
new ol.Map({
layers: [new ol.layer.Tile({ source: new ol.source.OSM() })],
view: new ol.View({
center: [139.68786, 35.68355],
zoom: 6,
projection: 'EPSG:4326',
}),
target: 'map',
});
経度・緯度で中心座標を日本を指定できました！
ですが、地図がゆがんで見えます。。
座標を地理座標系からWebメルカトルに変換する
proj.transformで、変換元のEPSGコード、変換先のEPSGコードを指定することで
Webメルカトル用の座標に変換してみます。
new ol.Map({
layers: [new ol.layer.Tile({ source: new ol.source.OSM() })],
view: new ol.View({
center: ol.proj.transform([139.68786, 35.68355], 'EPSG:4326', 'EPSG:3857'),
zoom: 6,
}),
target: 'map',
});
こちらだと地図がゆがみません！
OpenLayersは難しい・・
参考文献