如何在OpenLayers中获取所选功能的Event或DOM元素

I'm implementing an OpenLayers SelectFeature control, and trying to position an JQuery UI dialog widget right on top of the selected feature. To use the JQuery UI Position utility, it requires either a DOM element or an Event.

我正在实现一个OpenLayers SelectFeature控件，并试图将JQuery UI对话框小部件放在所选功能的顶部。要使用JQuery UI Position实用程序，它需要DOM元素或Event。

The onSelect callback of the SelectFeature control gives me an OpenLayers.Feature.Vector object representing the selected feature. From this, how do I get either the DOM element of the selected feature, or the Event object of the click event?

SelectFeature控件的onSelect回调为我提供了一个表示所选特征的OpenLayers.Feature.Vector对象。从这里，我如何获得所选功能的DOM元素或click事件的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?
            }
   }); 

3 个解决方案

#1

You are doing it right.

你做得对。

If you do a console.log(feature) You'll see that it returns an object with CLASS_NAME = "OpenLayers.Feature.Vector"

如果你做一个console.log（功能）你会看到它返回一个CLASS_NAME =“OpenLayers.Feature.Vector”的对象

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

Update:

I see. You could add event listeners

我懂了。您可以添加事件侦听器

var selectControl = new OpenLayers.Control.SelectFeature(clientsLayer, {
    hover: false,
    clickout: false,
    multiple: false,
    eventListeners: {
        featurehighlighted: function (event) {
            console.log(event);
            console.log(event.feature);
        }
    }
});

#2

Is it something like this you look for ?

这是你想要的吗？

onSelect: function onFeatureSelect(event) {
              var feature = event.feature;
              if ( feature.layer.name == 'theone') {
              ...
              }
        }

#3

Note I have also posted this answer at How do I get the DOM element from openlayers vector feature

注意我也在“如何从openlayers矢量功能中获取DOM元素”中发布了此答案

If you want to find the position of the mouse or feature on hover so you can display a custom overlay, create a custom hover control and define the featurehighlighted function as follows:

如果要在悬停上找到鼠标或功能的位置，以便显示自定义覆盖，请创建自定义悬停控件并定义功能突出显示的功能，如下所示：

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);

If you require access to the SVG element representing your layer/feature (in the event you are using a third-party library and you don't feel like modifying the source code), use either of the following lines (depending if you require the layer or feature):

如果您需要访问代表您的图层/功能的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;

Note that since this only grabs the element's id, you'll still need to use an appropriate method to grab a reference to the element itself. Something like either of the following:

请注意，由于这只会抓取元素的id，因此您仍需要使用适当的方法来获取对元素本身的引用。像下列之一：

var elementReference1 = document.getElementById(featureElementId);
var elementReference2 = jQuery('#'+featureElementId)[0];