如何在Mapboxgl中显示特定纬度和经度中的点数? [英] How can I show the count of points in the particular latitude and longitude in Mapboxgl?

问题描述

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

I want to show the marker as well as the number of points available in a particular latitude and longitude.

我期望与上述类似.

但是我又增加了2层以在上面显示不同的颜色和数字.如果我这样做，在显示弹出窗口时会出现未定义"错误.由于数据取自另一层.如果它取自图层位置"，则它将按预期工作.但是，当我们发生多次事件时，弹出内容将显示未定义".下面是我的实现输出和代码

But i have added another 2 layers to show different color and number on it. If I do this way, I am getting "undefined" error while showing popup. Since the data takes from the other layer. If it takes from layer "locations" it works as expected. But when we have multiple occurences popup content shows "undefined". Below is my implementation output and code

 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);

  });
 }

我的工作小提琴

我想实现这一点，因为第一幅图片或弹出窗口可以按照我的方法工作吗?

I want to achieve this as first picture or popup should work in my approach?

推荐答案

据我所知，当前无法通过mapbox的群集功能将所有功能合并到群集中.

As far as I know getting all features that get combined in the cluster is currently not possible via mapbox's cluster feature.

请参阅此处: https://github.com/mapbox/mapbox- gl-js/issues/3318

这篇关于如何在Mapboxgl中显示特定纬度和经度中的点数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！