更新

Question

我正在实现OpenLayers SelectFeature控件，并尝试在所选功能的顶部放置一个JQuery UI对话框小部件。要使用JQuery UI Position实用程序，它需要DOM元素或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?
            }
   });

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

注意我也在How do I get the DOM element from openlayers vector feature

发布了这个答案

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

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

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

3 个答案:

更新