問題発生
現在、以下のような、OpenLayersを使って図形のポップアップ表示を行っているのですが、
図形選択時(2回目)にポップアップ表示しない問題に直面しました。
図形選択前の画面イメージ
図形選択後の画面イメージ…2回目以降はポップアップ表示してくれない!
原因
図形のポップアップ表示は、OpenLayersの拡張機能である、ol-extのol.Overlay.PopupFeatureクラスを使っています。
このクラスは、図形を選択すると、ポップアップが表示されるのですが、ポップアップ画面を閉じた場合でも、選択状態がクリアされないことが判明しました。
そのため、1度ポップアップ表示すると、同じ図形は選択状態にあるため、他の図形に選択しないと、ポップアップ表示されない仕様のようです。
対策
ポップアップを閉じるタイミングで、選択図形をクリアする処理を入れました。その結果、
同じ図形でもポップアップ表示されることを確認しました。
以下、設定例です。必要な個所のみに抜粋しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
var select = new ol.interaction.Select({ }); map.addInteraction(select); var popup = new ol.Overlay.PopupFeature({ popupClass: 'default anim', select: select, closeBox: true, canFix: false, showImage: true, onclose: function () { select.getFeatures().clear(); }, template: { title: function (f) { return '<img src="../Content/' + f.get('photo_url') + '" />'; }, attributes: { 'report_id': { title: 'ID:' }, 'report_user': { title: '投稿者:' }, 'report_date': { title: '投稿日:' }, 'structure_type': { title: '種別:' }, 'report_status': { title: '状態:' } } } }); map.addOverlay(popup); var hover = new ol.interaction.Hover({ cursor: "pointer" }); map.addInteraction(hover); |