在弄清楚如何处理 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(...)
,在调试它之后,我得到了以下对象: