Javascript Openlayers3，向量数据层在继续执行select onchange（）函数后不可见

我输入了两个多边形geojson层，一个是边界层，另一个是矢量层，包含很多属性。 我添加了map.on（'click'，function（evt）），这样用户就可以单击地图，相应的功能将突出显示（使用另一种样式）。我通过添加一个新的覆盖层来实现这一点，该层仅包含此功能

我还有一个带有许多选项的Select和一个onchange（）函数，onchange（）函数可以根据Select选项的值改变矢量层的样式

单击并高亮显示功能在开始时运行良好，但当我更改“选择”的值和vectorlayer的样式时，高亮显示不起作用

我还尝试不使用onchange（）函数进行选择，然后高亮显示再次正常工作

我对此很困惑…为什么这两件事不能一起工作？谢谢

选择的示例：

  <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>

map.onclick：

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

---

您不必在每次单击地图时都添加新图层，只要更改所需图层的源即可，就像您在displayFeatureInfo函数末尾所做的那样

您能否提供一个JSFIDLE工作示例，以便我们调试您的代码并查看更多细节，这些细节现在没有显示出来？（例如，我们没有看到矢量层定义，或者您在问题开头提到的多边形）

          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.on('click', function(evt) 
  {
    if (evt.dragging) 
      {
        return;
      }
    pixel = map.getEventPixel(evt.originalEvent);
    displayFeatureInfo(pixel);