reactjs - react-leaflet GeoJSON ტიპების გამოყენებით TypeScript-ში GeoJSON წერტილების ჩვენება არ ხდება

მე ვცდილობ რუკაზე წერტილების გამოსახვას geojson წერტილების გამოყენებით. მე მაქვს React აპლიკაცია და ვიყენებ react-leaflet. უცნობი მიზეზების გამო ეს რუკაზე არცერთი წერტილის გამოსახვას არ ახერხებს.

მე გავცადე json ფაილის იმპორტი, მაგრამ შემდეგ ვიღებ შეცდომას, სადაც წერია

      TS2322: Type '{ type: string; features: { type: string; properties: { name: string; amenity: string; popupContent: string; }; geometry: { type: string; coordinates: number[]; }; }[]; }' is not assignable to type 'GeoJsonObject'.
  Types of property 'type' are incompatible.
    Type 'string' is not assignable to type '"FeatureCollection" | "Feature" | "Point" | "MultiPoint" | "LineString" | "MultiLineString" | "Polygon" | "MultiPolygon" | "GeometryCollection"'.

ჩემი JSON ფაილი ასე გამოიყურება:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
          "name": "Coors Field",
          "amenity": "Baseball Stadium",
          "popupContent": "This is where the Rockies play!"
      },
      "geometry": {
          "type": "Point",
          "coordinates":  [59.433421, 24.75224]
      }
    }
  ]
}

ჩემს რუკის კოდი:

import sensors from "./../Sensors/sensors.json";
import {TileLayer, MapContainer,GeoJSON} from "react-leaflet";
...

   <MapContainer
            style={{ height: "80vh", width: "100vw" }}
            center={center}
            zoom={12}
            scrollWheelZoom={true}
          >
            <TileLayer
              attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            <Marker position={[59.43046, 24.728563]} title="Test">
              /{" "}
              <Popup>
                A pretty CSS3 popup. <br /> Easily customizable.
              </Popup>
            </Marker>
            <GeoJSON data={sensors} key="mydata" />
          </MapContainer>

მეორე გამოსავალი, რომელიც ვცადე, იყო .tsx ფაილის შექმნა, რათა ექსპორტირდეს ცვლადი, როგორც "data"-სთვის მოსალოდნელი ობიექტის ტიპი

 export const featureCollection: GeoJSON.FeatureCollection<any> = {
      type: "FeatureCollection",
      features: [
        {
          type: "Feature" as "Feature",
          geometry: {
            type: "Point" as "Point",
            coordinates: [59.433421, 24.75224],
          },
          properties: {
            name: "SomeSensor",
          },
        },
      ],
    };

ჩემი ყველა ძალისხმევა მაინც დამიტოვა ჩემთან არამუშაობი გადაწყვეტილებით.

ვინმე ხომ შემიძლია მირჩიოს, რა შეიძლება ვცადო არასწორად?

უპასუხე #1

თავისუფლად დარწმუნდით, რომ დაამონტაჟეთ @types/leaflet და @types/react-leaflet, რათა შეძლოთ ამ ორ ბიბლიოთეკაში განსაზღვრული ტიპების მიღება.

თქვენ არ გჭირდებათ გამოაცხადოთ ტიპი თქვენი json-ისთვის

ამასთან, დარწმუნდით, რომ გატეხავთ სტანდარტულ მნიშვნელობას ან იყენებთ L.icon- ს, რათა შეძლოთ მარკერის PNG გამოსახულებების ნახვა რუკაზე

აქ არის სავარჯიშო დემო თქვენი მაგალითით