Question

我的Mapbox地图显示具有不同属性（约300列）的点。每个点的大多数属性为空。如何仅显示弹出窗口中不为null（或> 0）的属性？

通常，我使用var popup中的简单代码来设置弹出内容喜欢：

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

我为Leaflet找到了the same question，但没有为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

在Mapbox GL JS弹出窗口中显示不为空的属性

1 个答案: