如何在 Typescript 中使用 use-supercluster

Question

我在使用 TypeScript 实现 use-supercluster 时遇到了问题。我正在尝试使用集群来区分 Google 地图中的两种数据类型，例如红色集群与绿色集群。

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

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

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

错误 1：

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

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

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

错误 2：

我用const [bounds, setBounds] = useState(undefined);“解决”了这个问题。但不确定这是否是一个好的做法。

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

Answer 1

好吧...我在 Github 上的图书馆回购协议中找到了 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);

如何在 Typescript 中使用 use-supercluster

How to use use-supercluster with Typescript

javascript

google-maps

markerclusterer

typescript

reactjs

错误 1：

错误 2：