Question

（我在帖子How to get Event or DOM element of selected feature in OpenLayers中搜索得不太成功。他们似乎只用事件来解决问题。）

我们的网站使用qTip2提供工具提示，我想在我的矢量图层中使用弹出窗口。为了让生活更轻松，我想使用qTip2工具提示而不是openlayers弹出窗口（所以我们可以使用自己的样式。）

在创建要素时我需要对DOM对象的引用，因此我可以将qTip2工具提示附加到它：

function onFeatureCreate(feature){
    var elem=?
    $(elem).qTip2(...);
}

如果我有图层中的功能，如何获取DOM对象？

Answer 1

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

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

Answer 2

如果你的功能是数据驱动的，你可以添加一些元数据到功能属性对象，这应该映射到dom属性然后你可以使用这些属性来查询我认为这应该工作

如何从openlayers矢量功能中获取DOM元素

2 个答案: