Openlayers 3点被多边形覆盖

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

}; 

这是我的代码。它基本上显示了geojson中的信息，并为鼠标悬停效果提供了一个亮点。 [This is what it looks like when it is idle] [This is what it looks like when I mouseover the polygon]

对于点多面之外，当我鼠标悬停它代表该点的圆形，我可以得到高光效果。但是，那些在多边形内部的点是无法到达的。它们被多边形覆盖。

关于如何让那些圆代表未被多边形覆盖的点的任何想法？

更新：

现在我改变了我的代码，这和点越来越突出。但是，多边形不能再显示高光。任何想法？

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

我能想到的最好的办法是把你的功能在不同的层，一个点和另一个多边形这种方式在你的

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

，或者如果它是绝对必要的，让他们在一层中可以检查几何类型

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