如何从openlayers矢量功能中获取DOM元素 [英] How do I get the DOM element from openlayers vector feature

问题描述

(我在帖子

(I've searched through the post How to get Event or DOM element of selected feature in OpenLayers without much success. They only solve the problem with events, it seems.)

我们的网站正在使用qTip2作为工具提示，我想在矢量层中弹出有关功能的弹出窗口.为了使生活更轻松，我想使用qTip2工具提示而不是openlayers弹出窗口(以便我们可以使用自己的样式.)

Our website is using qTip2 for tooltips and I want to have popups for the features in my vector layer. To make life easier, I want to use the qTip2 tooltip instead of the openlayers popup (so we can use our own styling.)

创建功能时，我需要引用DOM对象，以便可以将qTip2工具提示附加到该对象:

I need a reference to the DOM object when creating the feature so I can attach the qTip2 tooltip to it:

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

如果我具有图层中的要素，如何获取DOM对象?

How do I get the DOM object if I have the feature from the layer?

推荐答案

如果要在悬停时查找鼠标或要素的位置，以便可以显示自定义叠加层，请创建自定义悬停控件并将featurehighlighted函数定义为如下:

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

如果您需要访问代表您的图层/功能的SVG元素(如果您使用的是第三方库，并且不想修改源代码)，请使用以下任意一行(取决于是否您需要图层或要素):

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

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，因此您仍然需要使用适当的方法来获取对元素本身的引用.类似于以下任何一种情况:

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:

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

这篇关于如何从openlayers矢量功能中获取DOM元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！