5

OpenLayers SelectFeatureコントロールを実装しており、選択した機能の真上にJQueryUIダイアログウィジェットを配置しようとしています。JQuery UI Positionユーティリティを使用するには、DOM要素またはイベントのいずれかが必要です。

SelectFeatureコントロールのonSelectコールバックは、選択された機能を表すOpenLayers.Feature.Vectorオブジェクトを提供します。これから、選択した機能のDOM要素、またはクリックイベントのEventオブジェクトを取得するにはどうすればよいですか？

  var selectControl = new OpenLayers.Control.SelectFeature(clientsLayer, {
            hover   : false,
            clickout: false,
            multiple: false,
            onSelect: function(feature) {
                // how do I get the DOM element of the feature
                // or alternately, the click event of the selection?
            }
   });
4

3 に答える 3

1

あなたはそれを正しくやっています。

を実行するconsole.log(feature)と、CLASS_NAME="OpenLayers.Feature.Vector"のオブジェクトが返されることがわかります。

onSelect: function(feature) {
    console.log(feature);
}

アップデート：

そうか。イベントリスナーを追加できます

var selectControl = new OpenLayers.Control.SelectFeature(clientsLayer, {
    hover: false,
    clickout: false,
    multiple: false,
    eventListeners: {
        featurehighlighted: function (event) {
            console.log(event);
            console.log(event.feature);
        }
    }
});
于 2012-10-25T18:05:21.177 に答える
1

あなたが探しているのはこのようなものですか？

onSelect: function onFeatureSelect(event) {
              var feature = event.feature;
              if ( feature.layer.name == 'theone') {
              ...
              }
        }
于 2012-10-26T07:52:40.797 に答える
0

この回答は、OpenLayersのベクター機能からDOM要素を取得する方法にも投稿しています。

カスタムオーバーレイを表示できるようにホバー上のマウスまたは機能の位置を見つけたい場合は、カスタムホバーコントロールを作成し、次のように機能強調表示機能を定義します。

var featureHoverControl = new OpenLayers.Control.SelectFeature([myLayer], {
    id: 'featureHoverControl',
    hover: true,
    autoActivate: true,
    highlightOnly: true,
    renderIntent: "temporary",
    eventListeners: {
       featurehighlighted: function(e) {
            // either use the mouse's position when the event was triggered
            var mouseXPosition = this.handlers.feature.evt.x;
            var mouseYPosition = this.handlers.feature.evt.y;

            // or retrieve the feature's center point
            var featureCenterLonLat = e.feature.geometry.bounds.getCenterLonLat();
            var featureCenterPoint = map.getPixelFromLonLat(featureCenterLonLat);

            // display your custom popup here
            // e.g. showTooltip(e.feature.attributes.name, featureCenterPoint.x, featureCenterPoint.y)
        }
        ,
        featureunhighlighted: function(e) {
            // hide your custom popup here
            // e.g. hideTooltip()
        }
    }
});
map.addControl(featureHoverControl);

レイヤー/機能を表すSVG要素へのアクセスが必要な場合（サードパーティのライブラリを使用していて、ソースコードを変更したくない場合）、次の行のいずれかを使用します（必要かどうかに応じてレイヤーまたは機能）：

var layerElement = map.getLayersByName("My Layer")[0].features.root;
var layerElementId = map.getLayersByName("My Layer")[0].features.root.id;
var featureElementId = map.getLayersByName("My Layer")[0].getFeaturesByAttribute("name","My Feature Name")[0].geometry.components[0].id;

これは要素のIDのみを取得するため、適切なメソッドを使用して要素自体への参照を取得する必要があることに注意してください。次のいずれかのようなもの：

var elementReference1 = document.getElementById(featureElementId);
var elementReference2 = jQuery('#'+featureElementId)[0];
于 2014-11-22T21:09:26.197 に答える