使用 JSON 而不是 GeoJSON 的 Mapbox 标记聚类

Question

我正在尝试使用标记聚类，因为我目前有超过 2000 个标记被映射，但我不确定如何使用我加载标记的方式来实现它。我是否必须使用 GeoJSON 才能使用标记聚类？如果可能的话，我宁愿不使用 GeoJSON，我目前正在使用 JSON 文件并循环访问 Firebase 上存储的数据。如果可能的话，我想使用超集群库 (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 然后添加。

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

使用 JSON 而不是 GeoJSON 的 Mapbox 标记聚类

Mapbox marker clustering with JSON not GeoJSON

html

javascript

mapbox

mapbox-gl-js