OpenLayers 3选择样式 [英] OpenLayers 3 select style

问题描述

在OL2中，我可以在样式定义中指定选择"样式.在OL3中似乎不存在.如果我理解正确，则可以为选择交互设置样式.但是，这对我而言可能行不通，因为每一层都有独特的选定"样式.我对能力的评估有误吗?在OL3中还有另一种/最佳的方法吗?

In OL2 I was able to specify a "select" style in the style definition. In OL3 this doesn't seem to exist. If I understand it correctly, I can set a style for the select interaction. However, this likely won't work in my case since every layer has a unique "selected" style. Am I mistaken in my assessment of the capability? Is there another/optimal way to do this in OL3?

推荐答案

我知道这是一个非常老的话题，但是由于我还无法找到解决此特定问题的明确解决方案，因此我仍然认为它适合发布我的.不确定如何容纳大量的图层和功能，但这是我能想到的最优雅，最简洁的解决方案. 顺便说一句:我正在使用最新版本的OpenLayers，目前是6.3.1.

I know this a very old thread, but since I haven't been able to find a clear solution to this particular problem yet, I still deem it fit to post mine. Not sure how it holds up with a large number of layers and features, but this is the most elegant and concise solution I could come up with. BTW: I'm using the latest version of OpenLayers, which at the moment is 6.3.1.

var map = new ol.Map({
    ...
    layers: [
        new ol.layer.Vector({
            ...
            // Default style for layer1
            style: default1,
            // Hover style for layer1 (custom property)
            hoverStyle: hover1,
            // Selected style for layer1 (custom property)
            selectedStyle: selected1
        }),
        new ol.layer.Vector({
            ...
            // Default style for layer2
            style: default2,
            // Hover style for layer2 (custom property)
            hoverStyle: hover2,
            // Selected style for layer2 (custom property)
            selectedStyle: selected2
        })
    ],
    ...
});

var hoverInteraction = new ol.interaction.Select({
    condition: ol.events.condition.pointerMove,
    style: function(feature) {
        var layer = hoverInteraction.getLayer(feature);
        return layer.values_.hoverStyle;
    }
});
map.addInteraction(hoverInteraction);

var selectInteraction = new ol.interaction.Select({
    condition: ol.events.condition.click,
    style: function(feature) {
        var layer = selectInteraction.getLayer(feature);
        return layer.values_.selectedStyle;
    }
});

这篇关于OpenLayers 3选择样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！