如何在TypeScript中使用use-supercluster [英] How to use use-supercluster with Typescript

问题描述

在使用TypeScript实现进行添加群集，但是在安装 supercluster 类型后，我在这里遇到错误:

  const {clusters} = useSuperCluster({点，界限，飞涨，选项:{半径:75，最大缩放:25}}); 

错误1:

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

  interface GeoJSONProperty {cluster:布尔值;pdId:字符串;类别:字串；} 

然后我尝试使用 PointFeature< GeoJSONProperty> 声明 points ，但是我遇到了另一个错误:

错误2:

我能够解决"这个问题，它与 const [bounds，setBounds] = useState(undefined); .但是不确定这是否是一个好习惯.

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

解决方案

嗯...我发现了 geojson库.

进口:

 从'supercluster'导入{PointFeature};从'geojson'导入{BBox，GeoJsonProperties}; 

然后:

  const点:Array< PointFeature< GeoJsonProperties>>= coords.map(pd =>({类型:功能"，特性: {丛集:假，pdId:pd._id，类别:测试"}，几何形状:{类型:点"，坐标:[pd.lat，pd.lng]}})); 

此外， bounds 似乎被声明为 BBox ，也来自geoj​​son库.因此，要完成这项工作，我必须在相同状态下而不是在以下情况下定义边界:

  const [bounds，setBounds] = useState([-52.13013780765266，-33.853076010021674，-57.12647659234733，-32.851013577053855]作为BBox); 

I am having troubles while implementing use-supercluster with TypeScript. I am trying to use clusters to differentiate two types of data in a Google Map with something like red clusters vs. green clusters.

I can't find any documentation related to use this library with TypeScript and I am not getting enough information from its types:

So, what is argument P? I was following the use-supercluster creator's guide to add clusters but after installing supercluster types I am getting errors here:

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

Error 1:

I have tried to create manually a GeoJSONProperty interface with the following attributes:

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

Then I have tried to assert points with PointFeature<GeoJSONProperty> but I got a different error:

Error 2:

This one I was able to "solve" it with const [bounds, setBounds] = useState(undefined);. But not sure whether that is a good practice.

So, do you know any documentation related to useSuperCluster + TypeScript or just do you know what am I doing wrong here?

解决方案

Well... I found this file on the library's repo on Github and it explains pretty straightforward how to use useSuperCluster() on TypeScript.

Answering to my own question, it seems that points is in fact declared as an array of PointFeature<GeoJsonProperties> where JsonProperties comes from geojson library.

Imports:

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

Then:

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

Also, bounds seems to be declared as BBox, also comes from geojson library. So, to make this work I had to define the bounds in the same state, not after:

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

这篇关于如何在TypeScript中使用use-supercluster的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！