OL6, динамический c цвет / непрозрачность / прозрачность в зависимости от числа (в процентах) в функции - PullRequest
Новая
       21

OL6, динамический c цвет / непрозрачность / прозрачность в зависимости от числа (в процентах) в функции

0 голосов
/ 14 марта 2020

Я вдохновлен этим разделом: https://openlayers.org/workshop/en/vector/style.html особенно «Dynami c Styling». Есть ли простой способ включить динамический c стиль в мою карту?

Я думаю об изменении непрозрачности многоугольника в зависимости от числа в объекте. В моем файле geo json есть функция с процентами (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;
 }
});

Надеюсь, один из вас может направить меня в правильном направлении. Если есть книга или сайт с примером об этом, я уже счастлив.

Спасибо, Майк, за еще одну большую помощь Я также внес некоторые другие изменения. Я надеюсь, что это помогает другим. Похоже, что нельзя делать вычисления в 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)

1 Ответ

0 голосов
/ 14 марта 2020

Вы можете динамически устанавливать некоторые другие свойства стиля так же, как вы устанавливаете текст 

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