如何在 Typescript 中使用 use-supercluster答案

【问题标题】：How to use use-supercluster with Typescript如何在 Typescript 中使用 use-supercluster
【发布时间】：2021-01-31 20:28:39
【问题描述】：

我在使用 TypeScript 实现 use-supercluster 时遇到了麻烦。我正在尝试使用集群来区分谷歌地图中的两种类型的数据，比如红色集群和绿色集群。

我找不到任何与将此库与 TypeScript 一起使用的相关文档，并且我没有从它的类型中获得足够的信息：

那么，参数P 是什么？我正在关注use-supercluster creator's guide 添加集群，但在安装supercluster 类型后，我在这里遇到错误：

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

错误一：

我已尝试手动创建具有以下属性的GeoJSONProperty 接口：

interface GeoJSONProperty {
    cluster: boolean;
    pdId: string;
    category: string;
}

然后我尝试用PointFeature<GeoJSONProperty> 断言points，但我得到了一个不同的错误：

错误2：

我可以用const [bounds, setBounds] = useState(undefined);“解决”这个问题。但不确定这是否是一个好习惯。

那么，您是否知道任何与 useSuperCluster + TypeScript 相关的文档，或者您是否知道我在这里做错了什么？

【问题讨论】：

标签： javascript reactjs typescript google-maps markerclusterer

【解决方案1】：

嗯...我在 Github 上的库 repo 中找到了 this file，它非常简单地解释了如何在 TypeScript 上使用 useSuperCluster()。

回答我自己的问题，似乎points 实际上被声明为PointFeature<GeoJsonProperties> 的数组，其中JsonProperties 来自geojson library。

进口：

import { PointFeature } from 'supercluster';
import { BBox, GeoJsonProperties } from 'geojson';

然后：

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 ] }
}));

另外，bounds 似乎被声明为BBox，也来自 geojson 库。所以，为了完成这项工作，我必须在相同的状态下定义边界，而不是之后：

const [bounds, setBounds] = useState([
    -52.13013780765266,
    -33.853076010021674,
    -57.12647659234733,
    -32.851013577053855
] as BBox);

【讨论】：