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]

I点を表す円をマウスオーバーするとき、私はハイライト効果を得ることができます。ただし、ポリゴンの内側にあるポイントには到達できません。それらはポリゴンで覆われています。

ポリゴンで覆われていないポイントを表す円をどのように取得するかについてのアイデアはありますか？

更新：

は今、私はこれに私のコードを変更したとの点がハイライトを取得しています。ただし、ポリゴンはハイライトをもう表示できません。何か案が？

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

か、それらを保つために絶対に必要である場合で1つのレイヤーでジオメトリタイプを確認できます

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