OpenLayers 3 показывает другой стиль выделения на основе типа слоя

Question

У меня есть карта с двумя слоями. На одном слое отображаются точки (круги) и другой слой, отображающий значок на карте.

Я бы хотел, чтобы два элемента выделяли стили, чтобы при нажатии пользователем на функцию он отображал правильный стиль выделения на основе типа слоя.

Сейчас я создал два стиля выделения. У меня также есть событие «select», которое выбирает выбранную функцию. Когда я нажимаю на новую функцию, «старая» функция не удаляет стиль выделения.

До сих пор у меня есть это:

var highlightOne = function() { 
    var scaleRadius = map.getView().getZoom() >= 7 ? 15 : 5; 
    return [new ol.style.Style({ 
     image: new ol.style.Circle({ 
      radius: scaleRadius, 
      fill: new ol.style.Fill({ 
       color: '#fff' 
      }), 
      stroke: new ol.style.Stroke({ 
       color: '#658acf', 
       width: 2 
      }) 
     }), 

     zIndex: 1 
    })] 
} 
var highlightTwo = function() { 
    var scaleRadius = map.getView().getZoom() >= 7 ? 15 : 15; 
    return [new ol.style.Style({ 
     image: new ol.style.RegularShape({ 
      radius: scaleRadius, 
      points: 4, 
      rotation: 0.8, 
      rotateWithView: true, 
      fill: new ol.style.Fill({ 
       color: '#fff' 
      }), 
      stroke: new ol.style.Stroke({ 
       color: '#658acf', 
       width: 2 
      }) 
     }), 

     zIndex: 1 
    })] 
} 

var selectInteraction = new ol.interaction.Select({ 
    condition: ol.events.condition.singleClick, 
    style: highlightStyle 
}); 

selectInteraction.on('select', function (e) { 
    var selected = e.selected, 
    deselected = e.deselected; 

    if (selected.length) // Selected feature 
    { 
     selected.forEach(function (feature) { 
      // Get the layer name to apply custom highlight style 
      if (feature.getLayer().get('name') == "layerone") 
      { 
       feature.setStyle(highlightTwo) 
      } else { 
       feature.setStyle(highlightOne) 
      } 
     }) 
    } else { 
     deselected.forEach(function (feature) { 
      // Remove highlight from the other features 
      feature.setStyle(null) 
     }) 
    } 
}); 

Answer 1

В общем, вы хотите, чтобы избежать создания стилей на особенностях при настройке стиля временного отображения (как вы делаете с выбором взаимодействия). Настройка функций стиля на слоях или взаимодействиях не только более эффективна с точки зрения памяти, но и требует от вас отстранения от стиля.

Я хотел бы предложить вам посмотреть на решение как

var selectInteraction = new ol.interaction.Select({ 
    condition: ol.events.condition.singleClick, 
    style: function(feature, resolution){ 
     if (feature.getLayer().get('name') == "layerone") { 
      return highlightTwo() 
     } else { 
      return highlightOne() 
     } 
    } 
}); 

Как примечание стороны, я предложил бы использовать параметр разрешения функции стиля, а не опрос карты для текущего уровня масштабирования. При настройке стиля на функцию с радиусом на основе текущего уровня масштабирования стиль не будет обновляться при масштабировании или выходе.