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

Openlayers 3点被多边形覆盖

Openlayers 3 points got covered by polygons

javascript

openlayers-3