2

I input two polygon geojson layers, one is just boundary layer, another is the vectorlayer contains many attributes.

I add map.on('click', function(evt), so users can click on the map, and the corresponding feature will be highlighted (with another style). I did this by add a new overlay layer with only this feature.

I also have a Select with many options and a onchange function. The onchange() functions let style of vectorlayer change based on the value of select option.

The click and highlight feature thing works well at begining, but when I change the value of the select and the style of vectorlayer changes, the highlight does not work.

I also tried to not using the onchange function for select, then the highlight works well again.

I'm quite confused about this... Why does this two thing could not work together?

Example of select:

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

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]);
            }

    };

highlight style:

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

overlay layer:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.