Показывать ненулевые атрибуты во всплывающих окнах Mapbox GL JS

Question

Моя карта Mapbox показывает точки с различными атрибутами (~ 300 столбцов).Большинство атрибутов для каждой точки являются нулевыми.Как я могу показать только атрибуты, которые не равны нулю (или> 0) во всплывающем окне?

Обычно я устанавливаю всплывающее содержимое, используя простой код внутри var popup, например:

.setHTML("attr_1: " + feature.properties.attr_1 + "attr_2: " + feature.properties.attr_2)

Iнашел тот же вопрос для Leaflet, но ничего для Mapbox.

Answer 1

Вы можете перебирать свойства, фильтровать их в зависимости от вашего состояния, а затем создавать всплывающее содержимое в виде строки.

Рассмотрим пример:

const feature = {
  properties: {
    attr1: 'text',
    attr2: null,
    attr3: 42,
    attr4: null,
    ...
  }
};

const popupContent = Object
  .keys(feature.properties)
  .reduce((acc, property) => {
    const value = feature.properties[property];

    // your condition here
    if (value) {
      acc.push(`${property}: ${value}`);
    }

    return acc;
  }, [])
  .join(', ');

console.log(popupContent) // attr1: text, attr3: 42