【OpenLayers 6】マーカーにクリックイベントを付加する
Contents
はじめに
マーカーは表示するだけではなくクリックイベントやポップアップイベントなどを追加すると利便性が向上します。今回は、マーカーにクリックイベントを付加して、マーカーをクリックすると別ページへとジャンプするように設定します。
クリックイベントの付加
マーカー（Feature）に直接クリックイベントを付加することはできないので、マップにクリックイベントを付加して、クリックした場所が Feature だった場合に、処理が実行するようにします。
// クリックイベント
map.on('click', function(e) {
// クリックした箇所がFeature の場合、処理を実行する
map.forEachFeatureAtPixel(e.pixel, function(feature, layer) {
// 処理内容
});
});実装例
全体のソースコードと実装例は以下のようになります。
<!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])),
URL: 'https://www.pref.hokkaido.lg.jp/'
})
],
}),
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('click', function(e) {
// クリックした箇所がFeature の場合、処理を実行する
map.forEachFeatureAtPixel(e.pixel, function(feature, layer) {
// Feature から URL を取り出してきて、その結果に基づきページを開く
window.open(feature.get('URL'));
});
});
}
//ダウンロード時に初期化する
window.addEventListener('DOMContentLoaded', init_map());
</script>
</body>
</html>実装例（マーカーをクリックすると、北海道のホームページが開きます）
