隐藏/删除Mapbox GL JS通过表创建的弹出框中的空属性

Question

我创建了一个Mapbox地图，你可以点击点打开弹出窗口。弹出窗口中显示的信息存储在一个表中。有一些空字段没有任何信息。如果是这样的话，我希望整个行从弹出窗口中消失，包括行标题。

这是我使用的代码。如果"信息";字段在表中为空，弹出应该只显示城市的名称，而不是更多(甚至没有标题说&;information &;)。你怎么才能做到呢?

const popup = new mapboxgl.Popup({offset: [0, -15]})
.setMaxWidth("auto")
.setLngLat(feature.geometry.coordinates)
.setHTML(
`<table>
<tr>
<td>City Name</td>
<td>${feature.properties.City}</td>
</tr>
<tr>
<td>Information</td>
<td><${feature.properties.Information}</td>
</tr></table>`) .addTo(map);});

Answer 1

这里与Mapbox无关。有很多方法可以做到这一点。通常，您将HTML分成如下几部分:

let html = `<table>`;
if (feature.properties.City) {
html += `<tr>
<td>City Name</td>
<td>${feature.properties.City}</td>
</tr>`
}
if (feature.properties.Information) {
html += `<tr>
<td>Information</td>
<td><${feature.properties.Information}</td>
</tr>`;
}
html += `</table>`
popup.setHTML(html)

Answer 2

`map.on('click', ['contour-1', 'contour-2', 'contour-3'], (e) => {
const feature = e.features[0];
data = feature.properties;
var table = "<table>";
for (let key in data) {
table += `<tr><td>${key}</td><td>${data[key]}</td></tr>`;
}
table += "</table>";
new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML(
'<div>'
+ table
+ 'Координаты: ' + Number((e.lngLat.lng).toFixed(6)) + ', ' + Number((e.lngLat.lat).toFixed(6)) +
'</div>'
)
.addTo(map);
});`

文件的数据源是Django models.JSONField。不需要配置NUll，长度可以可变