OL6，动态颜色/不透明度/透明度取决于特征中的数量（百分比）答案

【问题标题】：OL6, dynamic color/opacity/transparancy depending on number (percentage) in featureOL6，动态颜色/不透明度/透明度取决于特征中的数量（百分比）
【发布时间】：2020-03-15 21:46:01
【问题描述】：

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

我正在考虑根据要素中的数字更改多边形的不透明度。在我的 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-script 部分的样式部分如下所示：

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)

【问题讨论】：

标签： dynamic geojson opacity openlayers-6

【解决方案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;
 }
});

【讨论】：