5

我正在实现一个 OpenLayers SelectFeature 控件，并尝试将一个 JQuery UI 对话框小部件放置在所选功能的顶部。要使用 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

您正在寻找这样的东西吗？

onSelect: function onFeatureSelect(event) {
              var feature = event.feature;
              if ( feature.layer.name == 'theone') {
              ...
              }
        }
于 2012-10-26T07:52:40.797 回答
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 回答
0

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

如果您想在悬停时找到鼠标或功能的位置以便显示自定义叠加层，请创建自定义悬停控件并定义 featurehighlighted 函数，如下所示：

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 回答