3

It is not recommended to have multiple select interactions in Openlayers. I can create a hover interaction using the select function with the pointMove condition to highlight features and display a popup if required. The interaction targets multiple layers and the styling is defined by the source of the feature. The problem which I am having is with overlapping features. In particular with lines and points from separate layers which intersect polygon features.

If for example I run with cursor along a line into a polygon the line stays highlighted as expected. The same is true if I highlight a polygon but then want to highlight a point inside the polygon or a line which crosses the polygon. This seems to be impossible with the current library. The pointer condition is still true for the polygon geometry but I would like to assign an index to the other overlays with point or line features to highlight these features if the pointerMove condition validates.

Here is jsfiddle to show the issue.

5
  • Do you really need one layer for feature? Commented Jun 12, 2015 at 13:53
  • No the features could be all on the same layer, but that doesn't change the behavior. Once the polygon item is selected and in the foreground the pointMove condition will never evaluate for an underlying feature. Commented Jun 12, 2015 at 15:09
  • 1
    I'm doing some tests here. Commented Jun 12, 2015 at 15:10
  • Did you see this answer? Commented Jun 12, 2015 at 17:44
  • Get an idea there... I guess I need to build something around the forEachFeatureAtPixel event. Should be able to solve this and post an updated jsFiddle later today. Thanks for looking into this. Commented Jun 12, 2015 at 19:18

2 Answers 2

7

I don't know if you're yet interested but I came up with this plunker. I've learnt a lot doing this.

It looks like yours but I didn't remove ol.interaction.Select.

4
  • Thanks a lot mate. I like that solution. That you have both items selected and then only one item as you move into the selection is exactly the behavior I was looking for. Commented Jun 15, 2015 at 19:29
  • You're welcome. It was a good challenge! Commented Jun 16, 2015 at 9:21
  • @ads I'm not sure what is your case, I guess it's better if you create your own question. Commented Apr 28, 2016 at 10:40
  • Hover interaction will kill your performance unless you've got very few features. Commented Sep 6, 2016 at 13:59
3

In the end I solved this selection quagmire by looking at forEachFeatureAtPixel in the pointermove event of the map object and add these to FeatureOverlay.

var featureOverlay = new ol.FeatureOverlay({
  map: map,
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: '#0d47a1',
      width: 2}),
      image: new ol.style.Circle({
        radius: 5.5,
        stroke: new ol.style.Stroke({
          color:'#0d47a1',
          width:2
          })
        })
      })
    });

map.on('pointermove', function (evt) {
  featureOverlay.getFeatures().clear();
  features = [];
  map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
    features.push(feature);
    });
  features.forEach(function(f){
    featureOverlay.addFeature(f);
    });
  });

Here is the forked jsFiddle.

1
  • this is how the earthquake example works too
    – ryansstack
    Commented Jun 12, 2015 at 23:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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