javascript - 使用 JSON 而不是 GeoJSON 进行 Mapbox 标记聚类

Question

我正在尝试使用标记聚类，因为我当前映射了 2000 多个标记，但我不确定如何使用加载标记的方式来实现它。我是否必须使用 GeoJSON 才能使用标记聚类？如果可能的话，我宁愿不使用 GeoJSON，我目前正在使用 JSON 文件并循环访问 Firebase 上存储的数据。如果可能的话，我想使用 super 集群库( https://github.com/mapbox/supercluster )，但我不确定要加载到index.load(points)中的内容。我目前的代码方式是否可以进行集群？

    var markers = [];

    allMarkers();

    function allMarkers() {
        for (var i = 0; i < data.length; i++) {
            var marker = document.createElement("div");
                marker.className = "marker";
                marker.style.backgroundImage = "url(./icons/all.png)";
                marker.style.backgroundSize = "100%";
                marker.style.backgroundRepeat = "no-repeat";
                marker.style.width = "25px";
                marker.style.height = "25px";
                marker.style.filter = "drop-shadow(0px 5px 6px #000000)";

            new mapboxgl.Marker(marker)
                .setLngLat([data[i].Long, data[i].Lat])
                .setPopup(
                    new mapboxgl.Popup()
                        .setHTML(
                            ""
                        ).on("close", function() {

                        }).on("open", function() {
                            zoom = map.getZoom();
                            if (zoom < 17) {
                                map.flyTo({
                                    center: [this._lngLat.lng, this._lngLat.lat],
                                    zoom: 17
                                });
                            } else {
                                map.flyTo({
                                    center: [this._lngLat.lng, this._lngLat.lat]
                                });
                            }
                        }).setMaxWidth("400px")
                )
                .addTo(map); 
            markers.push(marker);
        }
    }

Answer 1

在 Mapbox-GL-JS 中进行聚类的最简单方法是使用带有 cluster: true 的 GeoJSON 源，如 this example 所示。 。您的数据以其他格式发送到浏览器并不重要，您可以轻松地将其转换为 GeoJSON，然后添加它。

目前，您使用标记来表示点，而不是使用 map 中的图层(例如circle 或symbol)来表示。与聚类结合起来会更加复杂，因为当用户放大和缩小时，您需要根据需要创建和销毁标记。使用 map 图层进行管理会更简单，尽管它会限制您设置标记符号样式的能力。