【OpenLayers】ズームレベルによってマーカーの表示/非表示を切り替える
Contents
はじめに
マーカーをマップ上に増やしていくと、広域表示でごちゃごちゃするので、ズームレベルに応じてマーカーを非表示にしたくなる場合があります。今回は、ズームレベルでマーカーの表示/非表示を切り替える方法について説明したいと思います。
この記事は「【OpenLayers入門】地図を表示する方法と基本的な使い方」の続きです。
ズームレベルの変化を検知する
ズームレベルの変化を検知するには、マップに対して moveend イベントを付加します。ズームレベルは getZoom() で取得し、その値に応じて setVisible() で マーカーを含んだレイヤーの表示/非表示を切り替えます。
//イベントの付加
map.on('moveend', function(e) {
const zoom = map.getView().getZoom();
if (zoom >=6) {
markerLayer.setVisible(true);
} else if (zoom < 6) {
markerLayer.setVisible(false);
}
});
全体のソースコードと実装例は以下の通りです。あらかじめ map に 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 -->
<script src="https://cdn.jsdelivr.net/npm/ol@v10.4.0/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.4.0/ol.css">
<script>
function init_map() {
const 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', //アンカーの位置の単位（X軸）
anchorYUnits: 'pixels', //アンカーの位置の単位（Y軸）
src: '画像のURL'
})
})
});
const 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,
minZoom: 0,
maxZoom: 18
})
});
map.on('moveend', function(e) {
const 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>実装例（ズームレベルを小さくすると、マーカーが非表示になります）
ちょっと宣伝
当サイトは Web 地図を積極的に用いた海外旅ブログまとめサイトとなっています。トップページに地図がありますが、地名を押すと画像が開き、画像を押すと関連記事一覧（クリック数順）が開きます。記事数が多い国ほど赤く、地名もその国で記事が多い都市の文字が大きくなるようにしています。ぜひ覗いてみてください。
当サイトで海外旅ブログを執筆することも可能です（もちろん無料です）！ また既にブログをお持ちの方も、当サイトからリンクを貼ることができるようになっています。パントレ開発部までお気軽にお問い合わせください。
このページが皆様のプログラミングの一助となりますことをお祈りいたします
パントレ開発部