Question

我输入了两个多边形geojson图层，一个是边界图层，另一个是vectorlayer包含许多属性。我添加了map.on（'click'，function（evt），因此用户可以点击地图，相应的功能将突出显示（使用其他样式）。我通过添加仅具有此功能的新覆盖层来实现此目的。

我还有一个Select with many options和onchange（）函数。 onchange（）函数让vectorlayer的样式根据select选项的值而改变。

点击和突出显示功能在开始时效果很好，但是当我更改选择的值和矢量图层的样式更改时，突出显示不起作用。

我也尝试不使用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>

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定义，或者您在问题开头提到的多边形）

在继续选择onchange（）函数

1 个答案: