时间戳

首页 > 解决方案 > use-supercluster 获取空数组

javascript - use-supercluster 获取空数组

问题描述

在弄清楚如何处理 TypeScript 和use-supercluster库之后，我已经“让它工作”了，直到我遇到一个新问题：每当我使用useSuperCluster()函数时，我都会得到一个空数组。

我正在遵循创作者的指南，所以我可以处理我自己的项目。

这就是我所做的：

const [bounds, setBounds] = useState(undefined as BBox | undefined);
const { data, error } = useSwr(API_URL, fetcher);
const coords: Array<ParkingData> = data && !error ? data.data : [];
const points: Array<PointFeature<GeoJsonProperties>> = coords.map(pd => ({
    type: "Feature",
    properties: {
        cluster: false,
        pdId: pd._id,
        category: 'test'
    },
    geometry: { type: "Point", coordinates: [ pd.lat, pd.lng ] }
}));

const { clusters } = useSuperCluster({
    points,
    bounds,
    zoom,
    options: { radius: 75, maxZoom: 25 }
});

当我调试时，points我得到类似的东西：

但随后，clusters是空的。我bounds像在视频中一样使用onChange属性进行更新，例如：

onChange={({ zoom, bounds }) => {
    setZoom(zoom);
    setBounds([
        bounds.nw.lng,
        bounds.se.lat,
        bounds.se.lng,
        bounds.nw.lat
    ]);
}}

那么，我做错了什么？

编辑：

我已经将supercluster对象添加到useSuperCluster()解构中const { clusters, supercluster } = useSuperCluster(...)，在调试它之后，我得到了以下对象：

标签： javascriptreactjstypescriptgoogle-mapsgoogle-map-react

解决方案

尝试更改此行顺序：

geometry: { type: "Point", coordinates: [ pd.lat, pd.lng ] }

至：

geometry: { type: "Point", coordinates: [ pd.lng, pd.lat ] }

显然，顺序是这样的，就我而言，我尝试了这种更改，但它对我不起作用，但对你来说，它有可能会起作用。

https://github.com/mapbox/supercluster/issues/45

推荐阅读