通过 OpenLayers 中的过滤器设置 GeoJSON 样式

Question

我正在尝试根据图层的类分类来设置 GeoJSON 的样式。 我正在尝试使用greaterThan类型过滤器等的方法来做到这一点......这或多或少是我想要对GeoJSON进行分类的方式。

我做了以下操作，最初，我想只用一个时间间隔进行测试，看看它是否有效。

//style
var individuals = new ol.style.Style({
    symbolizers: [
      new ol.style.Stroke({color: '#000000', width: 1}),
      new ol.style.Fill({color: '#ff0000'})
    ],
    filter:ol.format.filter.greaterThan(
        ol.format.filter.GreaterThanOrEqualTo('individuals', '0'),
        ol.format.filter.LessThanOrEqualTo('individuals', '500')
    )
});

//vecLayer
var vectorDistribution = new ol.source.Vector({
    url: 'data/distribution.json',
    projection: 'EPSG:4326',
    format: new ol.format.GeoJSON(),
    
});

var distribution = new ol.layer.Vector({    
    name: 'Distribution',
    source: vectorDistribution,
    visible:true,
    displayInLayerSwitcher: false,
    style: individuo,
    maxZoom:7,
    //minResolution: 200,
    //maxResolution: 2000,
});

好吧，它并不象征，有人做过类似的事情，可以帮助我。

Answer 1

ol.style.Style 没有符号器或过滤器属性，您可能会将其与 OpenLayers 2 样式混淆。 在 OpenLayers 6 中，如果您想使用基于属性值的颜色填充多边形，您可以使用样式函数，例如

var style = new ol.style.Style({
    stroke: new ol.style.Stroke({color: '#000000', width: 1}),
    fill: new ol.style.Fill()
});

var individuals = function(feature) {
    var value = feature.get('individuals');
    var color = value <  115 ? '#ffffff' :
                value <  360 ? '#ff7f7f' :
                value <  570 ? '#ff3f3f' :
                value <  850 ? '#ff0000' :
                value < 1600 ? '#7f0000' : '#3f0000';
    style.getFill().setColor(color);
    return style;
};