Блог

У меня возникли проблемы при реализации use-supercluster с TypeScript. Я пытаюсь использовать кластеры для различения двух типов данных на карте 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, или просто знаете, что я здесь делаю не так?

Что ж… Я нашел этот файл в репозитории библиотеки на Github, и он довольно просто объясняет, как использовать useSuperCluster() TypeScript.

Отвечая на мой собственный вопрос, кажется, что points на самом деле это объявлено как массив PointFeature<GeoJsonProperties> where 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);