Openlayers 3 Punkte wurden durch Polygone abgedeckt

Question

var normalstyles = { 
    'Point': [new ol.style.Style({ 
     image: new ol.style.Circle({ 
      fill: new ol.style.Fill({ 
       color: 'rgba(255,255,255,0)' 
      }), 
      stroke: new ol.style.Stroke({ 
       color: 'rgba(0,0,0,1)' 
      }), 
      radius: 5 
     }) 
    })], 
    'Polygon': [new ol.style.Style({ 
     fill: new ol.style.Fill({ 
      color: 'rgba(255,255,255,0)' 
     }), 
     stroke: new ol.style.Stroke({ 
      width: 1, 
      color: 'rgba(255,255,0,0)' 
     }) 
    })] 
}; 

var geoJSON = new ol.layer.Image({ 
    title: 'buildings', 
    source: new ol.source.ImageVector({ 
     source: new ol.source.Vector({ 
      url: 'data/geojson', 
      format: new ol.format.GeoJSON({ 
       defaultDataProjection :'EPSG:4326', 
       projection: 'EPSG:3857' 
      }) 
     }), 
     style: function(feature, resolution){ 
      var geom = feature.getGeometry().getType(); 
      return normalstyles[geom]; 
     }  
    }) 
}); 

var highlightstyles = { 
    'Point': [new ol.style.Style({ 
     image: new ol.style.Circle({ 
      fill: new ol.style.Fill({ 
       color: 'rgba(255,0,0,0.1)' 
      }), 
      stroke: new ol.style.Stroke({ 
       color: '#f00' 
      }), 
      radius: 5 
     }) 
    })], 
    'Polygon': [new ol.style.Style({ 
     fill: new ol.style.Fill({ 
      color: 'rgba(255,0,0,0.1)' 
     }), 
     stroke: new ol.style.Stroke({ 
      color: '#f00', 
      width: 1 
     }) 
    })] 
}; 

var map = new ol.Map({  
    layers: [new ol.layer.Tile({ source: new ol.source.OSM()}), geoJSON], 
    target: document.getElementById('map'), 
    view: new ol.View({ 
     center: center, 
     zoom: 15 
    }) 
}); 

var featureOverlay = new ol.layer.Vector({ 
    source: new ol.source.Vector(), 
    map: map, 
    style: function(feature, resolution){ 
     var geom = feature.getGeometry().getType(); 
     return highlightstyles[geom]; 
    } 
}); 

var highlight; 
var displayFeatureInfo = function(pixel) { 

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

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

}; 

Das ist mein Code. Es zeigt im Wesentlichen die Informationen im Geojson und gibt ihnen ein Highlight zum Mouseover-Effekt. [This is what it looks like when it is idle] [This is what it looks like when I mouseover the polygon]

Für Punkte außerhalb des Polygons, kann ich die Highlight-Effekt, wenn ich den Kreis Mouseover, der den Punkt darstellt. Diese Punkte innerhalb von Polygonen können jedoch nicht erreicht werden. Sie sind von den Polygonen bedeckt.

Gibt es eine Idee, wie man diese Kreise erhält, die Punkte darstellen, die nicht durch Polygone abgedeckt sind?

Update:

Jetzt habe ich meinen Code dies geändert und die Punkte werden immer Highlights. Polygone können die Hervorhebungen jedoch nicht mehr anzeigen. Irgendeine Idee?

var displayFeatureInfo = function(pixel) { 

    var featurePoint = map.forEachFeatureAtPixel(pixel, function(feature) { 
     if (feature.getGeometry().getType() != 'Point') return feature; 
    }); 

    var featurePolygon = map.forEachFeatureAtPixel(pixel, function(feature) { 
     if (feature.getGeometry().getType() != 'Polygon') return feature; 
    }); 

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

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

}; 

Answer 1

Die beste Weise, die ich denken kann, ist Ihre Funktionen in verschiedenen Schichten zu setzen, einen für Punkte und eine andere für Polygone auf diese Weise in Ihrem

var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) { 
//here you can add a condition on layer 
    return feature; 
}); 

oder, wenn es unbedingt notwendig ist, um sie zu halten In einer Ebene können Sie den Geometrietyp überprüfen

var featurePoint = map.forEachFeatureAtPixel(pixel, function(feature) { 
    if(feature.getGeometry().getType()!="Point"){ 
     return feature; 
    } 
}); 
var featurePolygon = map.forEachFeatureAtPixel(pixel, function(feature) { 
    if(feature.getGeometry().getType()!="Polygon"){ 
     return feature; 
    } 
});