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

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

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

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

Answer 2

这是你想要的吗？

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

Answer 3

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

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

 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 // eg showTooltip(e.feature.attributes.name, featureCenterPoint.x, featureCenterPoint.y) } , featureunhighlighted: function(e) { // hide your custom popup here // eg hideTooltip() } } }); map.addControl(featureHoverControl); 

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