Openlayers3, векторный слой данных не отображается после продолжения select onchange() function

Question

Я ввожу два слоя многоугольника geojson, один - только пограничный слой, другой - векторный слой, содержащий много атрибутов. Я добавляю map.on ('click', function (evt), чтобы пользователи могли щелкнуть по карте, и соответствующая функция будет выделена (с другим стилем). Я сделал это, добавив новый слой наложения с этой функцией .

у меня также есть Select с большим количеством опций и функции OnChange(). в OnChange() функции позволяют стиль изменения vectorlayer на основе значения выбора опции.

клик и выделить особенность, что хорошо работает в начале, но когда я изменяю значение выбора и стиль изменений векторного слоя, подсветка не работает.

Я также попытался не использовать функцию onchange() для выбора, затем th e подсветка снова работает хорошо.

Я совершенно смущен этим ... Почему эта две вещи не могут работать вместе? Спасибо.

Пример выбора:

<select id="vai_year" onchange="get_vaiSelect(vectorLayer)"> 
    <option value="VAI_2013">2013年</option> 
    <option value="VAI_2012">2012年</option> 
    <option value="VAI_2011">2011年</option> 
    </select> 

OnChange функции:

function get_vaiSelect(layer) 
    { 
    featureOverlay.setStyle(highlightStyle); 
    featureOverlay.setZIndex(50); 
    map.addLayer(featureOverlay); 

     features = layer.getSource().getFeatures(); 
     length = features.length; 
     attributes = layer.getSource().getProperties(); 

     var vaivalue = document.getElementById("vai_year"); 


     for(var f=0;f < length; f++) 
      { 
        if (vaivalue.value == 'VAI_2013') 
         { 
         level = features[f].getProperties().vai_2013+1; 
         } 
        else if (vaivalue.value == 'VAI_2012') 
         { 
         level = features[f].getProperties().vai_2012+1; 
         } 

         ... 
        else if (vaivalue.value == 'VAI_1992') 
         {   
         level = features[f].getProperties().vai_1992+1;        
         } 

        styleCache[level] = new ol.style.Style 
         ({ 
           fill: new ol.style.Fill({color: vai_levels[level],}), 
          }); 

        features[f].setStyle(styleCache[level]); 
      } 

    }; 

событием стиль:

  highlightStyle = function(feature, resolution) 
      { 
      var text = resolution < 5000 ? feature.get('NL_NAME_3') : ''; 

      highlightStyleCache = new ol.style.Style(
      { 
       stroke: new ol.style.Stroke(
       { 
       color: 'rgba(166,18,12,1)', 
       width: 1.2 
       }), 
       fill: new ol.style.Fill(
       { 
       color: 'rgba(255,255,128,0.8)' 
       }), 
       text: new ol.style.Text(
       { 
       font: '14px Calibri,sans-serif', 
       text: text, 
       color:'rgba(0,0,100,1)' 
       }) 
      }); 
      return highlightStyleCache; 
      } 

наложения слоя:

featureOverlay = new ol.layer.Vector(
    { 
    source: new ol.source.Vector(), 
    style: highlightStyle, 
    ZIndes: 60 
    }); 

    displayFeatureInfo = function(m) 
    { 
    featureOverlay.setZIndex(70); 
    vectorLayer.setZIndex(40); 

    map.addLayer(featureOverlay); 

    feature= map.forEachFeatureAtPixel 
    (
     m, 
     function (feature, vectorLayer) 
     { 
      return feature; 
     } 
    /* function(layer) 
    { 
    return layer === vectorLayer; 
    }*/ 
    ); 


    if (feature !== highlight) 
     { 
      if (highlight) 
      { 
       featureOverlay.getSource().removeFeature(highlight); 
      } 
      if (feature) 
      { 
       featureOverlay.getSource().addFeature(feature); 
      } 
      highlight = feature; 
     } 

    }; 

map.onclick:

map.on('click', function(evt) 
    { 
    if (evt.dragging) 
     { 
     return; 
     } 
    pixel = map.getEventPixel(evt.originalEvent); 
    displayFeatureInfo(pixel); 

Answer 1

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

Не могли бы вы предоставить нам рабочий пример jsfiddle, чтобы мы могли отлаживать ваш код и видеть больше деталей, которые не отображаются сейчас? (Мы не видим, например, определения vectorLayer или полигонов, которые вы упомянули в начале вашего вопроса)