EditableGeoJsonLayer 获取 TypeError：传播不可迭代实例的尝试无效

如何解决EditableGeoJsonLayer 获取 TypeError：传播不可迭代实例的尝试无效

我正在尝试使用 nebula.gl 中的 Editable geojsonlayer，根据文档，我收到了许多针对此库的打字稿错误。第一种错误可以在他们的存储库问题中找到并解决：https://github.com/uber/nebula.gl/issues/568

经过数小时的寻找并找到上述解决方案后，我可以使用 DrawpolygoneMode 绘制多边形，但是当我关闭多边形时，出现以下错误：

TypeError: Invalid attempt to spread non-iterable instance.
In order to be iterable,non-array objects must have a [Symbol.iterator]() method.

我无法在这里发布整个错误，但它与类型未正确定义的库文件有关，因此打字稿有很多不兼容错误，例如：

ImmutableFeatureCollection.addFeatures
src/lib/immutable-feature-collection.ts:184

181 | addFeatures(features: Feature[]): ImmutableFeatureCollection {
182 |   const updatedFeatureCollection = {
183 |     ...this.featureCollection,184 |     features: [...this.featureCollection.features,...features],| ^  185 |   };
186 | 
187 |   return new ImmutableFeatureCollection(updatedFeatureCollection);

下面是我尝试使用 EditableGeoJsonLayer 的代码。您会注意到我已将其定义为 const editLayer = new (EditableGeoJsonLayer as any)({，否则它不会将其识别为具有 1 个以上参数的函数。

import React,{ useState } from "react";
import DeckGL from '@deck.gl/react';
import { EditableGeoJsonLayer } from '@nebula.gl/layers';
import {DrawpolygonMode } from 'nebula.gl';
import {StaticMap} from 'react-map-gl';


function MapBox(props) {
// Viewport settings
const [INITIAL_VIEW_STATE,setViewport] = useState({
    longitude: 88.49175358524279,latitude: 22.571194159512256,zoom: 13,pitch: 0,minZoom: 0,maxZoom: 22,bearing: 0
});
const [mapMode,setMapMode] = useState("mapBox://styles/mapBox/light-v8")
const myFeatureCollection:any = {
    type: 'FeatureCollection',features: [
        
    ],};

const selectedFeatureIndexes = [];
const [featureState,setFeatureState] = useState({
    data: myFeatureCollection,})

const editableLayer = new (EditableGeoJsonLayer as any)({
    id: 'geojson',data: featureState.data,mode: DrawpolygonMode,selectedFeatureIndexes,onEdit: (updatedData:any) => {
        setFeatureState({ data: updatedData });
    },});

return(
    <>
        <DeckGL
            initialViewState={INITIAL_VIEW_STATE}
            controller={true}
            layers={[editableLayer]} 
            style={{height: "100vh",width: "100%"}}
        >
            <StaticMap mapBoxApiAccesstoken={MAPBox_ACCESS_TOKEN} mapStyle={mapMode}/>
        </DeckGL>
    </>
       
     
   );
  }

  export default MapBox;

任何帮助将不胜感激，因为我是这个库的新手，并且文档有时似乎不清楚用于特定功能的库。

解决方法

我找到了解决方案。这对我有用：

new (EditableGeoJsonLayer as any)({
         id: 'geojson',data: featureState.data,mode: DrawPolygonMode,selectedFeatureIndexes,onEdit: ({updatedData}):any => {
             setFeatureState({ 
                 data: updatedData 
             });
             console.log("GeoJson Updated!!");
             console.log(featureState.data);
         },pickable: true,pickingRadius: 15,})

我将 if 从 (updatedData:any) 更改为 ({updatedData}):any 就可以了。