2

クラスのSelectFeatureメソッドは、イベントをControlリッスンすることでベクター レイヤーにポップアップを追加および削除する方法を提供します。以下は、openlayers Web サイトの例から取得したサンプル コードを示しています。featureselectedfeatureunselected

// create the layer with listeners to create and destroy popups
var vector = new OpenLayers.Layer.Vector("Points",{
 eventListeners:{
  'featureselected':function(evt){
   var feature = evt.feature;
   var popup = new OpenLayers.Popup.FramedCloud("popup",
    OpenLayers.LonLat.fromString(feature.geometry.toShortString()),
    null,
    "<div style='font-size:.8em'>Feature: " + feature.id +"<br>Foo: </div>",
    null,
    true
   );
   feature.popup = popup;
   map.addPopup(popup);
  },
  'featureunselected':function(evt){
   var feature = evt.feature;
   map.removePopup(feature.popup);
   feature.popup.destroy();
   feature.popup = null;
  }
 }
});

vector.addFeatures(features);

// create the select feature control
var selector = new OpenLayers.Control.SelectFeature(vector,{
 hover:true, # this line
 autoActivate:true
});

上記のコードにより、Geometry オブジェクト (地図上のアイコンまたはマーカー) にマウスオーバーするとポップアップが表示されます。線hover:trueを削除すると、Geometry オブジェクトをマウスでクリックしたときにのみポップアップが表示されます。

私が望むのは、マウスオーバー時にあるタイプのポップアップ (画像とタイトルなど) を表示し、マウスクリック時に別のタイプ (例、詳細な説明) を表示できるようにすることです。どうすればこれができるのかわかりません。いくつかの助けをいただければ幸いです。ありがとう。

4

1 に答える 1

3

また、別の方法として、API を正しく使用するというよりハックですが、うまくいくようです。コールバックを上書きおよび上書きできます。

var selectControl = new OpenLayers.Control.SelectFeature(vectorLayer, {

    callbacks: {
        over: function(feat) {
            console.log('Show popup type 1');
        },
        out: function(feat) {
            console.log('Hide popup type 1');
        }
    },

    eventListeners: {
        featurehighlighted: function(feat) {
            console.log('Show popup type 2');
        },
        featureunhighlighted: function(feat) {
            console.log('Hide popup type 2');
        }
    }    
});

これが実際の例です: http://jsfiddle.net/eW8DV/1/

詳細を理解するには、選択コントロールのソースを見てください。

于 2012-11-07T17:40:44.410 に答える