Question

我正在寻找一种仅在该特征上呈现悬停特征向量的方法，本质上在其特征上呈现悬停向量，而不在其他特征之上呈现（具体而言，LineString悬停时不在邻近标记之上呈现）

我已经按照vector example进行了悬停设置，所有功能均按我想要的顺序进行渲染（LineStrings在标记下方）。问题在于，当将LineString悬停在其悬停功能上时，不仅会在该LineString之上进行渲染，还会在LineString越过其下的任何标记上都进行渲染，因此LineString的悬停在该标记上有很大的条纹。仅考虑要素叠加矢量的工作原理，我就能看到这是有道理的，但我看不到如何进行调整。

我发现有几篇文章似乎没有提供有关设置样式中的zIndex或使用renderOrder函数的建议，尽管似乎没有任何一篇文章完全适用于这种情况，或者超出了我的n00b的能力。我尝试在所有相关的样式以及this renderOrder function的行上设置zIndex，但是没有达到预期的效果。特别是对于后者，我无法弄清楚该函数的位置，以便悬停可以根据该函数进行渲染。

任何建议都将不胜感激！

var map = new ol.Map({
    layers: [
    new ol.layer.Tile({
        source: new ol.source.OSM()
    })
    ],
    target: 'map',
    view: new ol.View({
    center: ol.proj.fromLonLat([132.4903, 34.0024]),
    zoom: 4
    })
});

var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: '../static/gpx/summer3.kml',
        format: new ol.format.KML({
            extractStyles: false
        })
    }),
    style: function(feature) {
        return routeStyle;
    },
});
vectorLayer.getSource().on('addfeature', function(event) {
    event.feature.set('hoverstyle', 'route');
});
map.addLayer(vectorLayer);

var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: '../static/gpx/testmoo3.kml',
        format: new ol.format.KML({
            extractStyles: false,
        }),
    }),
    style: function(feature) {
        return iconStyle;
    },
});
vectorLayer.getSource().on('addfeature', function(event) {
    event.feature.set('hoverstyle', 'route');
});
map.addLayer(vectorLayer);

var hoverStyles = {
    'moo': new ol.style.Icon({
        anchor: [0.5, 30],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: '../static/GPX/icon/mooinb.png',
    }),
    'route': new ol.style.Stroke({
        color: 'rgba(236, 26, 201, 0.5)',
        width: 5
    })
};

var routeStyle = new ol.style.Style({
    stroke: new ol.style.Stroke({
        color: 'rgba(209,14,14,.6)',
        width: 4
    })
});

var iconStyle = new ol.style.Style({
    image: new ol.style.Icon({
        anchor: [0.5, 30],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: '../static/GPX/icon/moo7.png',                
    }),
});

var hoverStyleCache = {}
function hoverStyler(feature, resolution) {
    var hover = feature.get('hoverstyle');
    var geometry = feature.getGeometry().getType();
    console.log(hover);
    while (geometry === 'Point') {
        if (!hoverStyleCache[hover]) {
            hoverStyleCache[hover] = new ol.style.Style({
                image: hoverStyles[hover],
            })
        }
        return [hoverStyleCache[hover]];
    }
    while (geometry === 'LineString') {
        if (!hoverStyleCache[hover]) {
            hoverStyleCache[hover] = new ol.style.Style({
                stroke: hoverStyles[hover]
            })
        }
        return [hoverStyleCache[hover]];
    }
}


var featureOverlay = new ol.layer.Vector({
    source: new ol.source.Vector(),
    map: map,
    style: hoverStyler
});

var highlight;
var hover = function(pixel) {
var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
    return feature;
});

    if (feature !== highlight) {
        if (highlight) {
        featureOverlay.getSource().removeFeature(highlight);
        }
        if (feature) {
        featureOverlay.getSource().addFeature(feature);
        }
        highlight = feature;
    }

};

map.on('pointermove', function(evt) {
    if (evt.dragging) {
        return;
    }
    var pixel = map.getEventPixel(evt.originalEvent);
    hover(pixel);
});

***** 编辑1 *****

Here is a plunkr that at least illustrates what I mean（悬停矢量与标记重叠）。

我继续摆弄，并通过将点和线串的“ featureOverlay”向量分离为两个单独的向量来设法实现了我想要的目标，尽管要使其正常工作，我还必须复制它所暗示的所有内容（ hoverStyler函数，悬停功能等）。

同样，当我在上面提到不协调的建议时，尤其是因为我能够在任何矢量层上设置zIndex，但是在Styles中却没有，因为我在发现的所有其他问题中都读过但向量本身。因此，

var featureOverlay = new ol.layer.Vector({
    source: new ol.source.Vector(),
    map: map,
    style: hoverStyler,
    zIndex: 1,
});

可以工作（zIndex同样适用于其他所有矢量层），但是因为点和线串共享“覆盖”功能，这也意味着标记的悬停矢量图像位于要悬停的标记下方：以这种方式应用线串和标记，或者两者都没有悬停在上面。

因此，我试图提供类似于hoverStyler的功能来区分它们：

function zIndexer(feature, resolution) {
    var geometry = feature.getGeometry().getType();
    if (geometry === 'Point') {
        return 5
    }
    if (geometry === 'LineString') { 
        return 1
    }
}

但无济于事（我不确定应返回什么确切值，并尝试了各种输入；因为其他输入无效，所以

所以我可以使用重复的featureOverlay设备，但是最好使用方便的zIndex函数：）

（*注：我无法让zIndex在样式或样式之外的如上所述的plunkr中工作，因此它并不能说明我后来的摆弄，而只能说明原始问题）

***** 编辑2 *****

我在下面对提供的答案的评论中指出，尽管答案的工作效果非常好，但确实使按功能设置样式的聚类样式无效（原始post0中未提及。我用以下向量克服了这个问题，该向量有效，但我没有资格说效果很好：

var clusterCache = {}
var CLM = new ol.layer.Vector({
    source: new ol.source.Vector(),
    style: function(feature) {
        var size = feature.get('features').length;
        var style = clusterCache[size]
        if (size === 1) {
            return [hoverStyles['moo']]
        }
        else if (size > 1) {
            if (!style) {
                style =  new ol.style.Style({
                    image:new ol.style.Icon({
                        anchor: [0.5, 30],
                        anchorXUnits: 'fraction',
                        anchorYUnits: 'pixels',
                        src: '../static/GPX/icon/moo3Hover.png',
                    }),
                    text: new ol.style.Text({
                        text: size.toString(),
                        font: '12px Calibri,sans-serif',
                        fill: new ol.style.Fill({
                            color: '#fff'
                        }),
                        stroke: new ol.style.Stroke({
                            color: '#000',
                            width: 5
                        }),
                        offsetX: 22,
                        offsetY: 6, 
                    })
                }),
                clusterCache[size] = style;
            }
            return style;
        }
    }
});

hoverLayers['clustermoo'] = CLM;

Answer 1

方法

基本思想是，您需要为路线和图标（从上到下）分别设置悬停层：

图标悬停层
图标层
路线悬停层
路线层

这意味着说未悬停的图标将画在悬停路线的顶部。

ZIndex

您不能使用zIndex样式，因为它仅适用于图层中的要素。也就是说，层zIndex的优先级高于样式zIndex。在您的plunkr中，我根本无法使zIndex图层正常工作，但是在添加图层的顺序中它是隐式的。

因此，您需要：

创建单独的悬停层
按照我在上面给出的顺序设置图层
将要素悬停时，将其移至适当的悬停层
取消悬停地图项时，请将其从相应悬停图层中删除

样式缓存

另一件事，您的样式缓存实现相当可疑。实际上，您不需要样式缓存，因为您使用的是图层样式，并且仅分配/创建一次。

Plunkr

这是具有以下更改的更新的插件：https://plnkr.co/edit/gpswRq3tjTTy9O0L

var createHoverLayer = function(style) {
    return new ol.layer.Vector({
        source: new ol.source.Vector(),
        style: style,
        });
}

var hoverLayers = {};
hoverLayers['route'] = createHoverLayer([hoverStyles['route']]);
hoverLayers['moo'] = createHoverLayer([hoverStyles['moo']]);

map.addLayer(routeLayer);
map.addLayer(hoverLayers['route']);
map.addLayer(mooLayer);
map.addLayer(hoverLayers['moo']);

var highlight;
var hover = function(pixel) {
var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
    return feature;
});
    if (feature !== highlight) {
        if (highlight) {
            var highlightType = highlight.get('type');
            hoverLayers[highlightType].getSource().removeFeature(highlight);
        }
        if (feature) {
            var featureType = feature.get('type');
            hoverLayers[featureType].getSource().addFeature(feature);
        }
        highlight = feature;
    }
};

替代方法

完全不要使用单独的悬停层
通过样式功能使用每种功能样式
悬停/取消悬停功能时，在其上设置“悬停”属性为真/假
在样式函数中，检查此属性并使用适当的风格
您将需要使用此方法的样式缓存

Openlayers悬停渲染顺序，悬停功能渲染超过所有其他功能

1 个答案: