如何将样式应用于 OpenLayers 3 中的修改交互？

Question

我有一个带有多边形的 GeoJSON 矢量图层。当用户点击一个多边形时，它应该以某种方式突出显示。这样效果很好：

selectStyle = new ol.style.Style({ ... });
map = new ol.Map({ ... });
map.addLayer(vectorLayer);

var select = new ol.interaction.Select({
  condition: ol.events.condition.click,
  style: selectStyle
});
map.addInteraction(select);

现在有一个选项可以编辑选定的多边形。我这样做：

modify = new ol.interaction.Modify({
  features: select.getFeatures(),
  // style: modifyStyle // does not work!
});  
map.addInteraction(modify);

现在我想再次对编辑的多边形应用另一种样式，但是，我不知道该怎么做。如上所示（已注释掉）将样式选项应用于修改交互似乎不起作用。有可能吗？

Answer 1

利用 modifyend 事件并循环修改的特征：

modify.on('modifyend', function(evt){
    var collection = evt.features;

    collection.forEach(function(feature){
        feature.setStyle(style_modify);
    });
});

Answer 2

似乎 ol.interaction.Select 中的样式选项导致了我的问题。如果使用 feature.setStyle() 将样式明确设置为功能，ol.interaction.Select 中的样式选项将不再适用。我通过显式分配样式让它工作。

首先我给图层设置默认样式：

var vectorLayer = new ol.layer.Vector({
  source: vectorSource,
  style: defaultStyle
});

现在我用监听器设置 select 样式：

var collection = select.getFeatures();
collection.on('add', addSelectionListener);
collection.on('remove', removeSelectionListener); 

function addSelectionListener(){
  var collection = select.getFeatures();
  collection.forEach(function(feature){
  feature.setStyle(selectStyle);
  });
}

function removeSelectionListener(){
  var collection = vectorLayer.getSource().getFeatures();
  collection.forEach(function(feature){
  feature.setStyle(defaultStyle);
  });
}

修改功能时，我指定修改样式：

modify = new ol.interaction.Modify({
  features: select.getFeatures()
});  
map.addInteraction(modify);

var collection = select.getFeatures();
collection.forEach(function(feature){
    feature.setStyle(modifyStyle);
});

最后，在完成功能修改后，我重新分配了默认样式：

map.removeInteraction(modify);

var collection = select.getFeatures();
collection.forEach(function(feature){
    feature.setStyle(defaultStyle);
});

select.getFeatures().clear();

如何将样式应用于 OpenLayers 3 中的修改交互？

How to apply a style to the modify interaction in OpenLayers 3?

javascript

openlayers-3