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