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

OpenLayers 3选择风格

2 个答案: