【OpenLayers 6】マップ上にマーカーを配置する

はじめに

 サイトやブログで相手に場所を伝えるとき、記事内にマップを埋め込むと効果的ですが、そういった場合にはマーカーを配置すると分かりやすいです。そこで今回は、OpenLayers 6 でマーカーを配置する方法についてまとめたいと思います。

マーカーの配置

 OpenLayers でマーカーを配置するには、座標情報を持つ Feature と、見た目の情報を持つ Style を定義して、レイヤーに追加することで、地図上に表示させます。

 まず、マーカーの座標情報を持つ ol.Feature を定義します。

//ol.Feature: マーカーの持つ座標情報等を保存するオブジェクト
var markerFeature = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([142.14, 43.65])) //[経度, 緯度]
});

次に、マーカーの見た目を管理する ol.style.Style を定義します。

//ol.style.Style: マーカーのアイコンや表示文字など、見た目に関する情報を管理するオブジェクト
var markerStyle = new ol.style.Style({
  image: new ol.style.Icon({
    anchor: [0.5, 46], //アンカーの位置
    anchorXUnits: 'fraction', //アンカーの位置の単位(X軸)
    anchorYUnits: 'pixels',   //アンカーの位置の単位(Y軸)
    src: 'https://openlayers.org/en/latest/examples/data/icon.png' //画像のURL
  })
});

 これらをレイヤーに追加します。ここで、 ol.source.Vector は Feature 一覧をまとめて管理するオブジェクトになっています。

//ol.layer.Vector: マーカーを保持するレイヤー
var markerLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [markerFeature]
  }),
  style: markerStyle
});

 最後に addLayer() でマップにレイヤーを追加すれば完成です。

//マップにマーカーレイヤーを追加
map.addLayer(markerLayer);

実装例

 全体のソースコードと実装例は以下のようになります。

<!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([142.14, 43.65]),
      zoom: 6
    })
  });

  //ol.Feature: マーカーの持つ座標情報等を保存するオブジェクト
  var markerFeature = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.fromLonLat([142.14, 43.65]))
  });

  //ol.style.Style: マーカーのアイコンや表示文字など、見た目に関する情報を管理するオブジェクト
  var markerStyle = new ol.style.Style({
    image: new ol.style.Icon({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      src: 'https://openlayers.org/en/latest/examples/data/icon.png'
    })
  });
 
  //ol.layer.Vector: マーカーを保持するレイヤー
  var markerLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
      features: [markerFeature]
    }),
    style: markerStyle
  });

  //マップにマーカーレイヤーを追加
  map.addLayer(markerLayer);
}

//ダウンロード時に初期化する
window.addEventListener('DOMContentLoaded', init_map());

</script>
</body>
</html>

実装例

コメントを残す

メールアドレスが公開されることはありません。