如何在 Typescript 中使用 use-supercluster

IT技术 javascript reactjs typescript google-maps markerclusterer
2021-05-18 10:53:37

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

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

那么，什么是论证P？我按照use-supercluster创建者的指南添加集群，但在安装supercluster类型后，我在这里收到错误：

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

错误 1：

点错误

我尝试手动创建GeoJSONProperty具有以下属性的界面：

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

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

错误 2：

边界错误

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

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

1个回答

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

回答我自己的问题，似乎points是在事实上声明为数组PointFeature<GeoJsonProperties>，其中JsonProperties来自GeoJSON的库。

进口：

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);
其它你可能感兴趣的问题
上一篇类型错误：注册不是在 React 中使用 React Hook Form 的函数 下一篇如何在react中用 axios 开玩笑测试异步操作？- 第2部分