OpenLayers 3 选择样式

Question

在 OL2 中，我能够在样式定义中指定“选择”样式。在 OL3 中，这似乎不存在。如果我理解正确，我可以为选择交互设置样式。但是，这可能不适用于我的情况，因为每个图层都有独特的“选定”样式。我对能力的评估是否有误？在 OL3 中是否有另一种/最佳方式来执行此操作？

Answer 1

假设您在每个ol.Feature 中存储了一个样式参数，您可以将ol.style.StyleFunction 添加到您的ol.interaction.Select 并根据此参数返回一个样式。像这样：

var styles = {
  'route': new ol.style.Style({
    stroke: new ol.style.Stroke({
      width: 6,
      color: [237, 212, 0, 0.8]
    })
  }),
  'icon': new ol.style.Style({
    image: new ol.style.Icon({
      anchor: [0.5, 1],
      src: 'pin.png'
    })
  }),
  'geoMarker': new ol.style.Style({
    image: new ol.style.Circle({
      radius: 7,
      snapToPixel: false,
      fill: new ol.style.Fill({color: 'black'}),
      stroke: new ol.style.Stroke({
        color: 'white',
        width: 2
      })
    })
  })
};

var select = new ol.interaction.Select({
  style: function(feature, resolution) {
    return [styles[feature.get('style_parameter')]];
  }
});

你的功能会是这样的：

var geoMarker = new ol.Feature({
  style_parameter: 'geoMarker',
  geometry: new ol.geom.Point([0,0])
});

Answer 2

我知道这是一个非常古老的帖子，但由于我还没有找到解决这个特定问题的明确解决方案，我仍然认为它适合发布我的帖子。不确定它如何支持大量的层和功能，但这是我能想到的最优雅和简洁的解决方案。 顺便说一句：我使用的是最新版本的 OpenLayers，目前是 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;
    }
});