use-supercluster 获取空数组
use-supercluster gets empty array
在 how to deal with TypeScript and use-supercluster 库之后我已经“让它工作”直到我遇到一个新问题:每当我使用 useSuperCluster()
函数时我得到一个空数组。
我关注creator's guide所以我可以处理我自己的项目。
我就是这样做的:
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
是空的。我用 onChange
属性像视频中那样更新 bounds
,例如:
onChange={({ zoom, bounds }) => {
setZoom(zoom);
setBounds([
bounds.nw.lng,
bounds.se.lat,
bounds.se.lng,
bounds.nw.lat
]);
}}
那么,我做错了什么?
编辑:
我已将 supercluster
对象添加到 useSuperCluster()
解构中,如 const { clusters, supercluster } = useSuperCluster(...)
并在调试后得到以下对象:
尝试更改此行顺序:
geometry: { type: "Point", coordinates: [ pd.lat, pd.lng ] }
至:
geometry: { type: "Point", coordinates: [ pd.lng, pd.lat ] }
显然,顺序是这样的,在我的例子中,我尝试了这个改变,但它对我不起作用,但对你来说,它可能会起作用。
在 useSuperCluster()
函数时我得到一个空数组。
我关注creator's guide所以我可以处理我自己的项目。
我就是这样做的:
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
是空的。我用 onChange
属性像视频中那样更新 bounds
,例如:
onChange={({ zoom, bounds }) => {
setZoom(zoom);
setBounds([
bounds.nw.lng,
bounds.se.lat,
bounds.se.lng,
bounds.nw.lat
]);
}}
那么,我做错了什么?
编辑:
我已将 supercluster
对象添加到 useSuperCluster()
解构中,如 const { clusters, supercluster } = useSuperCluster(...)
并在调试后得到以下对象:
尝试更改此行顺序:
geometry: { type: "Point", coordinates: [ pd.lat, pd.lng ] }
至:
geometry: { type: "Point", coordinates: [ pd.lng, pd.lat ] }
显然,顺序是这样的,在我的例子中,我尝试了这个改变,但它对我不起作用,但对你来说,它可能会起作用。