【OpenLayers 6】ズームレベルに応じてマーカーの表示/非表示を切り替える

はじめに

 マーカーをマップ上に増やしていくと、広域表示でごちゃごちゃするので、ズームレベルに応じてマーカーを非表示にしたくなる場合があります。今回は、ズームレベルでマーカーの表示/非表示を切り替える方法について説明したいと思います。

ズームレベルの変化を検知する

 ズームレベルの変化を検知するには、マップに対して moveend イベントを付加します。ズームレベルは getZoom() で取得し、その値に応じて setVisible() で マーカーを含んだレイヤーの表示/非表示を切り替えます。

//イベントの付加
map.on('moveend', function(e) {
  var zoom = map.getView().getZoom();
  if (zoom >=6) {
    markerLayer.setVisible(true);
  }
  else if (zoom < 6) {
    markerLayer.setVisible(false);
  }
});

実装例

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

<!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() {

  //ol.layer.Vector: マーカーを保持するレイヤー
  var markerLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
      features: [
        new ol.Feature({
          geometry: new ol.geom.Point(ol.proj.fromLonLat([142.14, 43.65]))
        })
      ]
    }),
    style: 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'
      })
    })
  });

  //マップの表示(マーカーレイヤーを地図に表示)
  var map = new ol.Map({
    target: 'mapcontainer',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      }),
      markerLayer
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([142.14, 43.65]),
      zoom: 6
    })
  });

  //イベントの付加
  map.on('moveend', function(e) {
    var zoom = map.getView().getZoom();
    if (zoom >=6) {
      markerLayer.setVisible(true);
    }
    else if (zoom < 6) {
      markerLayer.setVisible(false);
    }
  });
}

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

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

 実装例(ズームレベルを下げると、マーカーが非表示になります)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です