在 Mapbox GL JS 弹出窗口中显示非空属性

Question

我的 Mapbox 地图显示了具有不同属性的点（约 300 列）。每个点的大部分属性都是空值。如何在弹出窗口中仅显示非空值（或 >0）的属性？

一般我都是在里面用简单的代码设置弹窗内容var popup 喜欢：

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

我找到了的 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

在 Mapbox GL JS 弹出窗口中显示非空属性

Show not null attributes in Mapbox GL JS popups

javascript

popup

mapbox