0

我受到本节的启发：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;
 }
});

我希望你们中的一个能让我朝着正确的方向前进。如果有一本书或网站上有一个例子，我已经很高兴了。

谢谢迈克的另一个大帮助 ，我也做了一些其他的改变。我希望它可以帮助其他人。似乎无法在setColor()零件中进行计算。为此，您需要先var在 variabele 中创建一个。您可以在 () 之间调用该变量。

下面你会看到几个例子。请注意，我将样式的名称从 更改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)
4

1 回答 1

0

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

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;
 }
});
于 2020-03-14T15:06:39.697 回答