Как да приложа стил към взаимодействието за модифициране в 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
});
map.addInteraction(select);

Сега има опция за редактиране на избрания многоъгълник. Аз го правя така:

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

Сега искам да приложа още веднъж друг стил към многоъгълника, който се редактира, но не можах да разбера как. Прилагането на опцията за стил към взаимодействието за промяна, както е показано по-горе (коментирано), изглежда не работи. Възможно ли е по някакъв начин?


javascript openlayers-3
person Mark    schedule 11.09.2015    source източник

Отговори (2)


arrow_upward
2
arrow_downward

Изглежда, че опцията за стил в 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();
person Mark    schedule 15.09.2015

arrow_upward
0
arrow_downward

Използвайте modifyend събитие и цикъл чрез модифицирани функции:

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

    collection.forEach(function(feature){
        feature.setStyle(style_modify);
    });
});
person Jonatas Walker    schedule 11.09.2015
comment
Това, от което всъщност се нуждая, са различни стилове, за да покажа режим на избор и режим на редактиране. Така че прилагането на modifyStyle директно без modify.on(...) вече прави това, от което се нуждая. Въпреки това, след редактиране, трябва да приложа отново стила по подразбиране, което изглежда предотвратява прилагането на избрания стил в ol.interaction.Select, когато избера функция отново, след като я редактирах. - person Mark; 14.09.2015
comment
Е, използвайте моя отговор, за да приложите всеки стил (по подразбиране или друг) след редактиране. - person Jonatas Walker; 14.09.2015