Реакция-листовка Geo JSON с машинописью - PullRequest
Новая
       60

Реакция-листовка Geo JSON с машинописью

0 голосов
/ 14 февраля 2020

Я новичок в использовании машинописи с reactjs. В настоящее время в проекте, над которым я работаю, используется реактивная листовка / листовка, в частности их компонент Geo JSON. Я сталкиваюсь с ошибкой машинописи, когда передаю свои данные реквизиту.

Я провел некоторые исследования по этому вопросу, даже установил пакет geo json и следовал их примерам, https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/geojson/geojson-tests.ts, перепробовал все, что знаю, но не повезло.

Если я пытаюсь передать данные как 

const GeoJsonData: geojson.Feature<geojson.Polygon, geojson.GeoJsonProperties> = {
  geometry: {
    coordinates: [[
      [20.7325804014456, -156.424372312952],
      [20.7320799340775, -156.424348923897],
      [20.732046895414, -156.425191022255],
      [20.7321183621394, -156.425194200455],
      [20.7321078658074, -156.425458542909],
      [20.7325370751528, -156.425476608985],
      [20.7325804014456, -156.424372312952]
    ]],
    type: 'Polygon',
  },
  properties: {
    name: 'some name'
  },
  type: 'Feature',
};

или 

const GeoJsonData: = {
  geometry: {
    coordinates: [[
      [20.7325804014456, -156.424372312952],
      [20.7320799340775, -156.424348923897],
      [20.732046895414, -156.425191022255],
      [20.7321183621394, -156.425194200455],
      [20.7321078658074, -156.425458542909],
      [20.7325370751528, -156.425476608985],
      [20.7325804014456, -156.424372312952]
    ]],
    type: 'Polygon',
  },
  properties: {
    name: 'some name'
  },
  type: 'Feature',
} as as geojson.GeoJsonObject;

, я получаю эту ошибку

Conversion of type '{ properties: { name: string; } | { name: string; }; type: "Feature"; geometry: Polygon | null; id?: string | number | undefined; bbox?: BBox2d | BBox3d | undefined; }[]' to type 'GeoJsonObject' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.ts(2352) Conversion of type '{ properties: { name: string; } | { name: string; }; type: "Feature"; geometry: Polygon | null; id?: string | number | undefined; bbox?: BBox2d | BBox3d | undefined; }[]' to type 'GeoJsonObject' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. Property 'type' is missing in type '{ properties: { name: string; } | { name: string; }; type: "Feature"; geometry: Polygon | null; id?: string | number | undefined; bbox?: BBox2d | BBox3d | undefined; }[]' but required in type 'GeoJsonObject'.

Но если я удаляю типы из данных. Затем я получаю эту ошибку. 

const GeoJsonData: = {
    geometry: {
      coordinates: [[
        [20.7325804014456, -156.424372312952],
        [20.7320799340775, -156.424348923897],
        [20.732046895414, -156.425191022255],
        [20.7321183621394, -156.425194200455],
        [20.7321078658074, -156.425458542909],
        [20.7325370751528, -156.425476608985],
        [20.7325804014456, -156.424372312952]
      ]],
      type: 'Polygon',
    },
    properties: {
      name: 'some name'
    },
    type: 'Feature',
  }

No overload matches this call. Overload 1 of 2, '(props: Readonly<GeoJSONProps>): GeoJSON<GeoJSONProps, GeoJSON<any>>', gave the following error. Property 'type' is missing in type '{ properties: { name: string; } | { name: string; }; type: "Feature"; geometry: Polygon | null; id?: string | number | undefined; bbox?: BBox2d | BBox3d | undefined; }[]' but required in type 'GeoJsonObject'. Overload 2 of 2, '(props: GeoJSONProps, context?: any): GeoJSON<GeoJSONProps, GeoJSON<any>>', gave the following error. Type '{ properties: { name: string; } | { name: string; }; type: "Feature"; geometry: Polygon | null; id?: string | number | undefined; bbox?: BBox2d | BBox3d | undefined; }[]' is not assignable to type 'GeoJsonObject'.

 <Map
        center={[props.centerMapCoordinates.lat, props.centerMapCoordinates.lng]}
        zoom={props.centerMapCoordinates.zoom}
        style={{ height: mapHeight }}
        onMoveEnd={(event: any) => props.getZoomMap(event)}
      >
        <TileLayer url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}/"
        />

        <GeoJSON
          key={GeoJsonData}
          data={GeoJsonData}
          // data={GeoJsonData}
          onEachFeature={(feature, layer) => {
            layer.on('click', (e) => {
              console.log(e.target.feature);
              // new Field().doesIntersect(e.target.feature);
            });
            if (props.centerMapCoordinates.zoom > 16) {
              layer.bindTooltip(feature.properties.name, {
                direction: 'center',
                permanent: true,
              }).openTooltip();
            } else {
              layer.closeTooltip();
            }
            layer.bindPopup(feature.properties.name);
          }}
        />
      </Map>

Примечание: если я добавлю как any в GeoJsonData, он избавится от ошибок, но затем не сделает есть ли смысл использовать машинопись.

Кто-нибудь знаком с этой проблемой или знает, как определить типы geo json?

Пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы. Я могу предоставить более подробную информацию, если это необходимо. Заранее спасибо.

...