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