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

在Mapbox GL JS中，弹出窗口是一种在地图上点击或悬停在要素上时显示相关信息的常见交互方式。当要素上的某个属性值非空时，我们可以使用弹出窗口来显示这个属性值。

要实现在Mapbox GL JS弹出窗口中显示非空属性，可以按以下步骤进行：

1. 获取地图上的要素：使用Mapbox GL JS提供的方法，比如queryRenderedFeatures，可以获取鼠标点击或悬停位置的所有要素。
2. 遍历要素并检查属性值：对于获取到的要素，可以使用getProperties等方法来获取要素的属性值。然后，可以检查属性是否非空，比如使用if (propertyValue !== null && propertyValue !== undefined)进行判断。
3. 创建弹出窗口并显示属性值：如果属性值非空，可以通过创建一个弹出窗口来显示属性值。可以使用HTML、CSS和JavaScript来自定义弹出窗口的样式和内容。比如，可以创建一个HTML元素作为弹出窗口，将属性值填充到相应的位置，然后通过CSS设置弹出窗口的样式，最后使用JavaScript将弹出窗口添加到地图中。

以下是一个示例代码，演示如何在Mapbox GL JS弹出窗口中显示非空属性：

// 获取鼠标点击或悬停位置的要素
map.on('click', function(e) {
  var features = map.queryRenderedFeatures(e.point);

  // 遍历要素并检查属性值
  features.forEach(function(feature) {
    var propertyValue = feature.properties.attributeName;
    if (propertyValue !== null && propertyValue !== undefined) {
      // 创建弹出窗口并显示属性值
      var popup = new mapboxgl.Popup()
        .setLngLat(e.lngLat)
        .setHTML('<p>' + propertyValue + '</p>')
        .addTo(map);
    }
  });
});

在上述示例中，我们使用queryRenderedFeatures获取鼠标点击位置的要素，并通过遍历要素来检查属性值。如果属性值非空，我们创建一个弹出窗口，并使用setHTML方法将属性值显示在弹出窗口中。

对于Mapbox GL JS弹出窗口中显示非空属性的应用场景，一个常见的例子是在地图上显示POI（Point of Interest）的相关信息。比如，当用户点击或悬停在一个餐厅的标记上时，可以通过弹出窗口显示餐厅的名称、地址、电话号码等信息。

推荐的腾讯云相关产品和产品介绍链接地址：

• Mapbox GL JS官方文档：https://docs.mapbox.com/mapbox-gl-js/
• 腾讯云地图服务（Tencent Map Service）：https://cloud.tencent.com/product/maps