MapBox 超级集群错误的集群位置

Question

我正在用 mapbox supercluster 制作聚类地图。我面临的问题是集群不在正确的位置。例如，我在 the netherlands 中只有狗，但当缩小时它们也在法国。

当我进一步放大时，星团会慢慢移动到荷兰。当我滚动时，集群也会在地图上移动。

问题可以在我的网站上看到https://v2.sayhi.dog/?dog-map=true。

我的代码如下所示（我使用 vue.js）：

<template>
    <div class="w-full h-full" id="map"></div>
</template>

<script>
    import mapboxgl from 'mapbox-gl'
    import Supercluster from 'supercluster';

    export default {
        props: ['locations'],

        data() {
            return {
                map: null,
                copyLocations: this.locations,
                clusters: [],
                markers: [],
                clustersGeojson: {},
                clusterIndex: null,
            }
        },

        mounted() {
            mapboxgl.accessToken = 'my-token';
            // init the map
            this.map = new mapboxgl.Map({
                container: 'map',
                style: 'mapbox://styles/sayhi/cjkp9e59x3m3y2rm1zbcc0c',
                zoom: 2,
            });

            this.addControls();
            this.map.on("load", () => { this.addMarkers() });
            this.map.addControl(new mapboxgl.NavigationControl());
        },

        methods: {
            addMarkers() {
                this.clusterIndex = new Supercluster({
                    radius: 40,
                    maxZoom: 10
                });

                this.clusterIndex.load(this.locations.features);
                this.map.on('moveend', () => { this.moveEnd(); });
                this.updateClusters();
            },

            updateClusters() {
                var bounds = this.map.getBounds(),
                    zoom = this.map.getZoom();

                this.clustersGeojson = this.clusterIndex.getClusters([
                    bounds.getWest(),
                    bounds.getSouth(),
                    bounds.getEast(),
                    bounds.getNorth()
                ], Math.floor(zoom));

                if (Object.keys(this.clusters).length) {
                    this.clusters.forEach(function(cluster) {
                        cluster.remove();
                    });
                }

                this.displayFeatures(this.clustersGeojson);
            },

            addControls() {
                this.map.addControl(new mapboxgl.NavigationControl(), "bottom-right");
                this.map.addControl(new mapboxgl.FullscreenControl(), "bottom-right");
            },

            moveEnd() {
                this.updateClusters();
            },

            displayFeatures(features) {
                if (this.markers.length) {
                    this.markers.forEach(function(marker) {
                        marker.remove();
                    });
                }

                features.forEach((feature) => {
                    var isCluster = (!!feature.properties.cluster) ? true : false,
                        $feature;

                    if (isCluster) {
                        var leaf = this.clusterIndex.getLeaves(feature.properties.cluster_id)[0];
                        $feature = document.createElement("div");
                        $feature.className = 'flex items-center justify-center w-12 h-12 rounded-full text-center text-white font-bold shadow bg-cover cursor-pointer bg-center';
                        $feature.style.backgroundImage = `url(${leaf.properties.image})`;

                        var $inner = document.createElement("div");
                        $inner.innerHTML = feature.properties.point_count_abbreviated;

                        $feature.appendChild($inner);
                        this.clusters[feature.properties.cluster_id] = new mapboxgl.Marker($feature).setLngLat(feature.geometry.coordinates).addTo(this.map);
                    } else {
                        $feature = document.createElement('div');
                        $feature.className = 'flex items-center justify-center w-12 h-12 rounded-full text-center text-white font-bold shadow bg-cover cursor-pointer bg-center';
                        $feature.style.backgroundImage = `url(${feature.properties.image})`;

                        this.markers.push(new mapboxgl.Marker($feature).setLngLat(feature.geometry.coordinates).addTo(this.map));
                    }
                });
            }
        }
    }
</script>

https://gist.github.com/larsjanssen6/ebb5d7e3887c885af4c65d294ca1fb77

这是一个非常令人沮丧的问题，我现在已经苦苦挣扎了好几天，如果能提供一些帮助，我们将不胜感激。

--更新--

我做了一个 JSFiddle：

https://jsfiddle.net/obhstrvz/10/

希望有人能提供帮助。

Answer 1

这个 link here 说你的标记需要一个偏移量，这样它们就可以一直居中，并且快速浏览你的代码，我认为你在这里需要它

this.clusters[feature.properties.cluster_id] = new mapboxgl.Marker($feature,{ offset: 25 } ).setLngLat(feature.geometry.coordinates).addTo(this.map);

这里

this.markers.push(new mapboxgl.Marker($feature, { offset: 25 }).setLngLat(feature.geometry.coordinates).addTo(this.map));

Answer 2

加载您的页面时，开发人员工具控制台中会显示以下警告：

This page appears to be missing CSS declarations for Mapbox GL JS, which may cause the map to display incorrectly. Please ensure your page includes mapbox-gl.css, as described in https://www.mapbox.com/mapbox-gl-js/api/.

尽管 Mapbox GL JS API 参考不包含任何与 mapbox-gl.css 相关的说明，您可以在示例中找到它的用法。通过开发人员工具将以下行添加到页面的 <head> 部分消除了位置的各种问题（除了标记之外，还表现为缺少地图控件）：

<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.0/mapbox-gl.css' rel='stylesheet' />

请注意，您可能需要使用其他版本来匹配 mapbox-gl.js 文件的版本。

MapBox 超级集群错误的集群位置

MapBox supercluster wrong cluster locations

vue.js

mapbox

hierarchical-clustering

mapbox-gl

mapbox-marker