How to use use-supercluster with Typescript

被刻印的时光 ゝ 提交于 2021-02-10 21:12:20

问题


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:

errors on points

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: attempt

Error 2:

errors on bounds

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?


回答1:


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


来源:https://stackoverflow.com/questions/65983920/how-to-use-use-supercluster-with-typescript

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!