使用 JSON 而非 GeoJSON 的 Mapbox 标记聚类答案

【问题标题】：Mapbox marker clustering with JSON not GeoJSON使用 JSON 而非 GeoJSON 的 Mapbox 标记聚类
【发布时间】：2019-12-07 04:19:12
【问题描述】：

我正在尝试使用标记聚类，因为我目前有超过 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);
        }
    }

【问题讨论】：

你的代码看起来不错。检查类标记的 z-index 并检查数据数组

标签： javascript html mapbox mapbox-gl-js

【解决方案1】：

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

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

【讨论】：