Изменение стиля в кластерных объектах OpenLayers - PullRequest
Новая
       25

Изменение стиля в кластерных объектах OpenLayers

0 голосов
/ 22 марта 2019

Я использую OpenLayers с Javascript и показываю кластеризованные объекты на карте. Я хотел бы изменить значок объекта в кластере в соответствии со значением одного из его атрибутов. 

var style1 = new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
        anchor: [0.5, 66],anchorXUnits: 'fraction',anchorYUnits: 'pixels',
        opacity: 0.85,src: 'https://img.icons8.com/flat_round/64/000000/home.png',scale: 0.3
      }));
      var style2 = new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
        anchor: [0.5, 66],anchorXUnits: 'fraction',anchorYUnits: 'pixels',
        opacity: 0.85,src: 'https://img.icons8.com/color/48/000000/summer.png',scale: 0.3
      }));
      function myStyleFunction(feature) {
        let props = feature.getProperties();
        if (props.id>50) {
          console.log(props.id);
          return new ol.style.Style({image: style1,stroke: new ol.style.Stroke({ color:"#fff", width:1 }) });
        } else {
          console.log(props.id);
          return new ol.style.Style({image: style2,stroke: new ol.style.Stroke({ color:"#fff", width:1 }) });
        }
      };

В приведенном выше коде я хочу получить доступ к свойству "id" одной из функций в кластере и установить его значок на основе значения "id". Тем не менее, я не могу получить свойство объекта.

Вот кодекс . Буду признателен за помощь.

1 Ответ

1 голос
/ 22 марта 2019

Если вы проверяете только первую функцию в каждом кластере: 

  function myStyleFunction(feature) {
    let props = feature.get('features')[0].getProperties();
    if (props.id>50) {
      console.log(props.id);
      return new ol.style.Style({image: style1,stroke: new ol.style.Stroke({ color:"#fff", width:1 }) });
    } else {
      console.log(props.id);
      return new ol.style.Style({image: style2,stroke: new ol.style.Stroke({ color:"#fff", width:1 }) });
    }
  };

Если вы хотите найти значение в любой функции в кластере 

  function myStyleFunction(feature) {
    let maxId = 0;
    feature.get('features').forEach(function(feature){
      maxId = Math.max(maxId, feature.getProperties().id);
    });
    if (maxId>50) {
      console.log(maxId);
      return new ol.style.Style({image: style1,stroke: new ol.style.Stroke({ color:"#fff", width:1 }) });
    } else {
      console.log(maxId);
      return new ol.style.Style({image: style2,stroke: new ol.style.Stroke({ color:"#fff", width:1 }) });
    }
  };

Для ol-extкластер 

  function myStyleFunction(feature) {
    let id = 0;
    let features = feature.get('features');
    if (features) {
      id = features[0].get('id');
    }
    if (id > 50) {
      return new ol.style.Style({image: style1,stroke: new ol.style.Stroke({ color:"#fff", width:1 }) });
    } else {
      return new ol.style.Style({image: style2,stroke: new ol.style.Stroke({ color:"#fff", width:1 }) });
    }
  };
...