我有一个带多边形的GeoJSON矢量图层。当用户单击多边形时,应以某种方式突出显示。这样做很好:
modify = new ol.interaction.Modify({
features: select.getFeatures(),
// style: modifyStyle // does not work!
});
map.addInteraction(modify);
现在可以选择编辑选定的多边形。我是这样做的:
{{1}}
现在我想再次将另一种样式应用于编辑的多边形,但是,我无法弄清楚如何。将样式选项应用于修改交互,如上所示(已注释掉)似乎不起作用。这有可能吗?
答案 0 :(得分:2)
似乎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();
答案 1 :(得分:0)
利用modifyend
事件并循环修改功能:
modify.on('modifyend', function(evt){
var collection = evt.features;
collection.forEach(function(feature){
feature.setStyle(style_modify);
});
});