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

Javascript 如何将样式应用于OpenLayers 3中的修改交互?,javascript,openlayers-3,Javascript,Openlayers 3,我有一个带有多边形的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

我有一个带有多边形的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);     
现在我想再次将另一种样式应用于已编辑的多边形,但是,我不知道如何进行。将样式选项应用于如上所示的修改交互(注释掉)似乎不起作用。有可能吗?

通过修改的功能使用事件和循环:

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

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

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

首先,我将默认样式设置为图层:

var vectorLayer = new ol.layer.Vector({
  source: vectorSource,
  style: defaultStyle
});
现在,我使用侦听器设置选择样式:

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

我实际上需要不同的样式来表示“选择模式”和“编辑模式”。因此,直接应用“modifyStyle”而不使用(…)上的
modify.on
已经满足了我的需要。但是,编辑后,我需要重新应用默认样式,这似乎会阻止在
ol.interaction中应用选择样式。编辑后,当我再次选择某个功能时,请选择它。好的,请在编辑后使用我的答案应用任何样式(默认或其他)。