Question

我正在尝试遵循this示例

我已将其添加到按钮的（点击）处理程序中

let selectClick = new Select({
condition: click
});

mapValues.map.addInteraction(selectClick);
selectClick.on('select', function(e) {
console.log("Features selected : " + e.target.getFeatures().getLength());
console.log("Features deselected : " + e.deselected.length);  
});

，当我写下选择和取消选择的内容时，我看到控制台中的选择工作。但是矢量样式不会更改以显示它已被选中，并且在示例中我看不到样式。所以，我只是假设它现在是ol / interaction / Select.js的一部分

感谢您对将样式应用于所选矢量的任何帮助

Answer 1

在大多数情况下，首选解决方案是使用图层和交互样式设置要素样式。如果单个样式或样式数组足以满足所有情况下的所有功能，只需指定：

let vectorLayer = new VectorLayer({
  source: mySource,
  style: deselectedStyle
});

let selectClick = new Select({
  condition: click,
  style: selectedStyle
});

如果样式可能因功能的属性而异，请使用样式函数返回适当的样式：

let vectorLayer = new VectorLayer({
  source: mySource,
  style: function(feature) {
    ...  // choose appropriate deselected style for this feature
    return chosenStyle;
  }
});

let selectClick = new Select({
  condition: click,
  style: function(feature) {
    ...  // choose appropriate selected style for this feature
    return chosenStyle;
  }
});

如果对单个特征进行样式设置是首选样式，则在选择和取消选择样式时需要进行设置和重置：

selectClick.on('select', function(e) {
  e.selected.forEach(function(feature) { feature.setStyle(selectedStyle); });
  e.deselected.forEach(function(feature) { feature.setStyle(deselectedStyle); });
});

Openlayers 5选择向量

1 个答案: