OL6，动态 color/opacity/transparancy 取决于特征中的数字（百分比）

Question

我受到这部分的启发：https://openlayers.org/workshop/en/vector/style.html 特别是 'dynamic styling'。有没有一种简单方法可以在我的地图中包含动态样式？

我正在考虑根据要素中的数字更改多边形的不透明度。在我的 geojson 文件中，我有一个百分比特征 (VVD_perc)

我想我必须围绕这一行在我的样式部分中更改一些内容：color: 'rgba(100, 100, 100, 0.25)', 但我不确定要更改什么以及在哪里更改。

我在想百分比越高，多边形变得越不透明。所以不透明度来自：

color: 'rgba(100, 100, 100, 0.01)'1 个百分点至 color: 'rgba(100, 100, 100, 1)' 100%。

java-脚本部分中的样式部分如下所示：

var partijStyle = new ol.style.Style({
  fill: new ol.style.Fill({
    color: 'rgba(100, 100, 100, 0.25)',
    }),
  stroke: new ol.style.Stroke({
    color: '#319FD3',
    width: 2
  }),
  text: new ol.style.Text({
    font: '10px Calibri,sans-serif',
    fill: new ol.style.Fill({
    color: '#000'
    }),
    stroke: new ol.style.Stroke({
      color: '#fff',
      width: 3
    })
  })
});

这是我要求使用百分比的功能的部分。也许这也有用？

var vvdLayer = new ol.layer.Vector({
  source: geojsonSource,
  //style: partijStyle
  style: function(feature) {
    partijStyle.getText().setText(feature.get(('VVD_perc'))
        );
    return  partijStyle;
 }
});

我希望你们中的一位能给我指明正确的方向。如果有一本书或网站有这方面的例子，我已经很高兴了。

感谢 Mike 的又一次帮助 我也做了一些其他的改变。我希望它能帮助别人。似乎无法在 setColor() 部分进行计算。为此，您需要先像在变量中那样制作 var 。您可以在 ().

之间调用该变量

下面是几个例子。请注意，我将样式名称从 partijStyle 更改为 vvdStyle。 vvd_c代表vvd_color。

    //var vvd_c = 'rgba(255, 50, 0, ' + (feature.get('VVD_perc')/100) + ')';
    //var vvd_c = 'rgba(255,'+ (1000/4) +', 0, ' + (feature.get('VVD_perc')/100) + ')';
    //var vvd_c = 'rgba(255,'+ (255-(feature.get('VVD_perc')))  +', 0, ' + (feature.get('VVD_perc')/100) + ')';
    var vvd_c  = 'rgba('+ (feature.get('VVD_perc')+150) +','+ (255-(feature.get('VVD_perc')))  +', 0, ' + (feature.get('VVD_perc')/100) + ')';
    vvdStyle.getFill().setColor(vvd_c)

Answer 1

您可以像设置文本一样动态设置样式的其他一些属性

var vvdLayer = new ol.layer.Vector({
  source: geojsonSource,
  style: function(feature) {
    var perc = feature.get('VVD_perc');
    var color = rgba(100, 100, 100, ' + (perc/100) + ')';
    partijStyle.getFill().setColor(color);
    partijStyle.getText().setText(perc);
    return  partijStyle;
 }
});

OL6，动态 color/opacity/transparancy 取决于特征中的数字（百分比）

OL6, dynamic color/opacity/transparancy depending on number (percentage) in feature

dynamic

opacity

geojson

openlayers-6