如何在Mapboxgl中显示特定纬度和经度的点数？

我想显示标记以及特定纬度和经度中可用的点数

我期待类似的事情如上所述

但我已经添加了另外两层来显示不同的颜色和数字。如果我这样做，我会在显示弹出窗口时出现“未定义”错误。因为数据来自另一层。如果它从图层“位置”中获取，它将按预期工作。但当我们多次出现时，弹出内容显示“未定义”。下面是我的实现输出和代码

map.on（'load'，函数（）{
map.addSource（“地点”{
键入：“geojson”，
数据：liveData，
集群：对，
clusterMaxZoom:14，
集群半径：50
});
map.addLayer({
“id”：“位置”，
“类型”：“圆圈”，
“来源”：“地点”，
“油漆”：{
“圆半径”：7，
“圆圈颜色”：“FFF000”，
“圆圈笔划宽度”：4，
“圆圈笔划颜色”：“#FFFFFF”
}
});
map.addLayer({
id:“集群”，
类型：“圆圈”，
资料来源：“地点”，
过滤器：[“has”，“point_count”]，
油漆：{
“圆形颜色”：{
属性：“点数”，
键入：“间隔”，
停止：[
[0，#FFF000”]，
[2，#DC143C”]，
]
},
“圆半径”：{
属性：“点数”，
键入：“间隔”，
停止：[
[0, 7],
[2, 7],
]
}
}
});
map.addLayer({
id:“群集计数”，
类型：“符号”，
资料来源：“地点”，
过滤器：[“has”，“point_count”]，
布局：{
“文本字段”：“{point_count_缩写}”，
“文本字体”：[“DIN Offc Pro Medium”，“Arial Unicode MS Bold”]，
“文本大小”：12，
“文本偏移量”：[0,5]
}
});
地图上（‘点击’、‘位置’）功能（e）{
让htmlString=“”；
for（设i=0；i”；
}
}
新建mapboxgl.Popup（）
.setLngLat（e.features[0].geometry.coordinates）
.setHTML（htmlString）
.addTo（地图）；
});
}

---

我想实现这一点，因为在我的方法中，第一张图片或弹出窗口应该起作用？

据我所知，通过mapbox的群集功能，目前无法获得群集中组合的所有功能

请看这里：

 map.on('load', function () {

  map.addSource("place", {
    type: "geojson",
    data: liveData,
    cluster: true,
    clusterMaxZoom: 14,
    clusterRadius: 50 
  });

 map.addLayer({
    "id": "locations",
    "type": "circle",
    "source": "location",
    "paint": {
      "circle-radius": 7,
      "circle-color": "#FFF000",
      "circle-stroke-width": 4,
      "circle-stroke-color": "#FFFFFF"
    }

  });

     map.addLayer({
      id: "clusters",
      type: "circle",
      source: "location",
      filter: ["has", "point_count"],
      paint: {
          "circle-color": {
              property: "point_count",
              type: "interval",
              stops: [
                  [0, "#FFF000"],
                  [2, "#DC143C"],
              ]
          },
          "circle-radius": {
              property: "point_count",
              type: "interval",
              stops: [
                  [0, 7],
                  [2, 7],
              ]
          }
      }
  });

  map.addLayer({
      id: "cluster-count",
      type: "symbol",
      source: "location",
      filter: ["has", "point_count"],
      layout: {
          "text-field": "{point_count_abbreviated}",
          "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
          "text-size": 12,
          "text-offset": [0, 5]
      }
  });

 map.on('click', 'locations', function (e) {
    let htmlString = "";
    for (let i = 0; i < e.features.length; i++) {
      htmlString = htmlString + e.features[i].properties.description;
      if (i != e.features.length - 1) {
        htmlString = htmlString + "</br>";
      }
    }
    new mapboxgl.Popup()
      .setLngLat(e.features[0].geometry.coordinates)
      .setHTML(htmlString)
      .addTo(map);

  });
 }