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

问题描述

我正在尝试根据图层的分类对GeoJSON进行样式设置。我正在尝试使用GreaterThan类型过滤器等方法进行此操作。这或多或少是我想要对GeoJSON进行分类的方式。

enter image description here

我做了以下工作，最初，我想仅隔一个时间进行测试以查看其是否有效。

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

嗯，这并不表示，有人做了类似的事情，可以为我提供帮助。

解决方法

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

openlayers openlayers openlayers-5