【OpenLayers 6】マップ上にラインを描画する
はじめに
GPS ロガーで記録したデータを地図上で表示する等、OpenLayers を使ってラインを描画したくなる場合が有ります。ここでは、KML や GPX の読み込み機能は使わないで、配列で渡した経緯度を用いてラインを描画する方法について説明します。
ラインの描画
OpenLayers でラインを描画するには、マーカーと同様に、座標情報を持つ Feature と、見た目の情報を持つ Style を定義して、レイヤーに追加することで、地図上に表示させます。
まず、ラインの座標情報を持つ ol.Feature を定義します。ここで、経緯度 (EPSG:4326) を保存した配列データを、Web Mercator 座標系 (EPSG:3857) に変換しておきます。
var points = [[139.75, 35.68,], [135.52, 34.68]];
//WGS84 緯度経度 (EPSG:4326) から Web Mercator (EPSG:3857) に変換
for (var i = 0; i < points.length; i++) {
points[i] = ol.proj.transform(points[i], 'EPSG:4326', 'EPSG:3857');
}
//ol.Feature: ラインの持つ座標情報等を保存するオブジェクト
var lineFeature = new ol.Feature({
geometry: new ol.geom.LineString(points)
});次に、ラインの見た目を管理する ol.style.Style を定義します。
//ol.style.Style: ラインの見た目に関する情報を管理するオブジェクト
var lineStyle = new ol.style.Style({
stroke: new ol.style.Stroke({ color: '#000000', width: 2 })
})これらをレイヤーに追加します。ここで、 ol.layer.Vector は Feature 一覧をまとめて管理するオブジェクトになっています。
//ol.layer.Vector: ラインを保持するレイヤー
var lineLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [lineFeature]
}),
style: lineStyle
})最後に addLayer() でマップにレイヤーを追加すれば完成です。
//マップにラインレイヤーを追加
map.addLayer(lineLayer);実装例
全体のソースコードと実装例は以下のようになります。
<!DOCTYPE html>
<html>
<head>
<title>htmlMap</title>
<meta http-equiv='content-type' charset='utf-8'>
<meta name='viewport' content='width=device-width'>
</head>
<body>
<!-- 埋め込みマップのdivタグ。マップサイズはwidth（幅）とheight（高さ）で決まる -->
<div id='mapcontainer' style='width:100%; height:300px; z-index:0;'></div>
<!-- 以下OpenLayersのJavaScriptとCSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/build/ol.js"></script>
<script>
function init_map() {
// マップを表示
var map = new ol.Map({
target: 'mapcontainer',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([137.76, 35.12]),
zoom: 6
})
});
var points = [[139.75, 35.68,], [135.52, 34.68]];
//WGS84 緯度経度 (EPSG:4326) から Web Mercator (EPSG:3857) に変換
for (var i = 0; i < points.length; i++) {
points[i] = ol.proj.transform(points[i], 'EPSG:4326', 'EPSG:3857');
}
//ol.Feature: ラインの持つ座標情報等を保存するオブジェクト
var lineFeature = new ol.Feature({
geometry: new ol.geom.LineString(points)
});
//ol.style.Style: ラインの見た目に関する情報を管理するオブジェクト
var lineStyle = new ol.style.Style({
stroke: new ol.style.Stroke({ color: '#000000', width: 2 })
})
//ol.layer.Vector: ラインを保持するレイヤー
var lineLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [lineFeature]
}),
style: lineStyle
})
//マップにラインレイヤーを追加
map.addLayer(lineLayer);
}
//ダウンロード時に初期化する
window.addEventListener('DOMContentLoaded', init_map());
</script>
</body>
</html>実装例
