react-leafletGeoJSONwithtypescript不渲染geojsonPoints-有解無憂

我正在嘗試使用 geojson 點將點渲染到地圖。我有一個反應應用程式，我正在使用反應傳單。由于未知原因，它不會在地圖上呈現任何點。

我曾嘗試匯入一個 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 檔案來匯出一個變數，就像“資料”的預期物件型別一樣

 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",
          },
        },
      ],
    };

我所有的努力仍然給我留下了一個不起作用的解決方案。

誰能建議我可能做錯了什么？

uj5u.com熱心網友回復：

確保您已經安裝@types/leaflet并@types/react-leaflet能夠獲得這兩個庫中定義的型別。

您不必為 json 宣告型別

還要確保覆寫默認值或使用 L.icon 以便能夠在地圖上看到標記 png 影像

這是您的示例的作業演示

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/348979.html

標籤：反应打字稿网络包 webpack-dev-server 反应传单

上一篇：如何阻止flexbox專案移動？

下一篇：webpack為js/css設定輸出路徑