时间戳

首页 > 解决方案 > EditableGeoJsonLayer 获取 TypeError：传播不可迭代实例的无效尝试

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

问题描述

根据文档，我正在尝试使用 nebula.gl 中的可编辑 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;

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

标签： javascripttypescriptmapboxdeck.gl

解决方案

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

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 from (updatedData:any)to({updatedData}):any并且完成了工作。

推荐阅读