0

My aim is to highlight that two differently colored layers wfs when passing the mouse over one of these layers.

It would need to obtain the name of the Vector Layer and also use a style in one layer and another in another.

This is my code WFS:

  var Urbana_source = new ol.source.Vector({
             format: new ol.format.GeoJSON(),
             url: function(extent, resolution, projection) {
      return 'http://localhost:8080/geoserver/wfs?service=WFS&' +
    'version=1.1.0&request=GetFeature&typename=pucol:Urbana&' +
    'outputFormat=application/json&srsname=EPSG:3857&' +
    'bbox=' + extent.join(',') + ',EPSG:3857';
  },
  strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
  maxZoom: 19
  }))

   });
   var urbana_wfs = new ol.layer.Vector({
                    source: Urbana_source,
                    style: new ol.style.Style({

                   stroke: new ol.style.Stroke({
                  color: 'rgba(0, 0, 0, 0)',
                  width: 2
       })
     })
   });
   urbana_wfs.set('name', 'urbana');

  var Rustica_source = new ol.source.Vector({
  format: new ol.format.GeoJSON(),
  url: function(extent, resolution, projection) {
   return 'http://localhost:8080/geoserver/wfs?service=WFS&' +
    'version=1.1.0&request=GetFeature&typename=pucol:Rustica&' +
    'outputFormat=application/json&srsname=EPSG:3857&' +
    'bbox=' + extent.join(',') + ',EPSG:3857';
   },
    strategy: ol.loadingstrategy.tile(ol.tilegrid.createXYZ({
    maxZoom: 19
   }))

 });
 var rustica_wfs = new ol.layer.Vector({
 source: Rustica_source,
 style: new ol.style.Style({

  stroke: new ol.style.Stroke({
     color: 'rgba(0, 0, 0, 0)',
        width: 2
     })
   })
 });
   rustica_wfs.set('name', 'rustica');

    var displayFeatureInfo = function(pixel) {

   var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
    return feature;
  });

   var info = document.getElementById('info');
   if (feature) {
  //info.innerHTML =feature.get('referencia');
    var ref =feature.get('referencia');
   document.getElementById("Getfeatureinfo").value = ref;
   document.getElementsByName("info").innerHTML=ref;
  } else {
  info.innerHTML = ' ';
 }

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

    featureOverlay.getSource().addFeature(feature);
  }
map.getLayers().forEach(function(el) {
      if (el.get('name') === 'urbana') {
        console.log(urbana_wfs.get('name'));
      }else if (el.get('name') === 'rustica') {
        console.log(rustica_wfs.get('name'));
      }
    })
highlight = feature;
  }

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

 map.on('click', function(evt) {
 displayFeatureInfo(evt.pixel);
 });
 };

This is my code. What I would like to make is that when I pass the mouse over the layer urbana_wfs color glows and when I do the other rustic lighting.

My problem is that when I do this, I always get the two log, not one. as you could get the name of this layer?

1

For setting a name to a layer, you can do

urbana_wfs.set('name', 'my_layer_name'); // Arbitrary key 'name'. It could be whatever you want e.g urbana_wfs.set('whatever', 'my_layer_name');

Then, if you already set the name, try below code:

console.log(urbana_wfs.get('name')); // If you set 'whatever', it would be console.log(urbana_wfs.get('whatever'));

Just do the same in the following loop:

map.getLayers().forEach(function(el) {
  if (el.get('name') === 'my_layer_name') {
    console.log(el);
  }
})

With this, you should now be able to change styles depending of layer name

  • This solution did not work, I put in an if, where this name and another one for me to make a log, other layer as this, and I returned the two log – Sergio_Az Nov 10 '15 at 21:43
  • I already tried it so what did you do to make it failed? Explain your process or I can't help you – ThomasG77 Nov 10 '15 at 21:53
  • It's not that easy to help this guy. – Jonatas Walker Nov 11 '15 at 8:11
  • I just edit the question ... apologies for my poor initial explanation. I hope this more clearly now – Sergio_Az Nov 11 '15 at 17:39
0

I found a solution that works properly.

var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) { 

    if (layer == urbana_wfs){//especificando la capa que es condicionas que la accion solo vaya a esa capa
            var capa="urbana";
            prue[0]=capa;
         return feature;}

    if (layer == rustica_wfs){//especificando la capa que es condicionas que la accion solo vaya a esa capa
            var capa= "rustica";
            prue[0]=capa;
          return feature;}
          });

The solution is to condition you want to do one thing layer and mark it with a name and also use this later to perform an action or another.

Now that you have prue[0] with the value of the layer and you can perform any action with any IF.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.