2

我正在尝试将编辑器添加到我的地图中，但是在我导入“react-map-gl-draw”的那一刻，我收到以下错误并且我在上面找不到任何东西。当我删除编辑器时，错误消失了，我可以看到地图。

有人可以给我一些调试这个问题的方向吗？

import { DrawPolygonMode, Editor } from 'react-map-gl-draw';

node_modules/@nebula.gl/edit-modes/dist-types/index.d.ts
TypeScript error in node_modules/@nebula.gl/edit-modes/dist-types/index.d.ts(1,1):
Declaration or statement expected.  TS1128

  > 1 | export type { EditMode } from './lib/edit-mode';
      | ^
    2 | export type { GeoJsonEditModeType } from './lib/geojson-edit-mode';
    3 | export { GeoJsonEditMode } from './lib/geojson-edit-mode';
    4 | export { ModifyMode } from './lib/modify-mode';

完整的 React 组件

import React, { useState } from 'react';
import MapGL from 'react-map-gl';
import { DrawPolygonMode, Editor } from 'react-map-gl-draw';

import Dialog from '@material-ui/core/Dialog';

import { Wrapper } from './CreateMission.style';

interface Props {
  open: boolean;
  onClose?: () => void;
}

const CreateMission: React.FC<Props> = ({ open, onClose = () => {} }) => {
  const [viewport, setViewport] = useState({
    latitude: 51.228978,
    longitude: 4.404713,
    zoom: 15,
  });

  return (
    <Dialog
      fullWidth
      maxWidth="md"
      open={open}
      onClose={onClose}
      aria-labelledby="max-width-dialog-title"
    >
      <Wrapper>
        <MapGL
          {...viewport}
          height="100%"
          width="100%"
          onViewportChange={(vp) => {
            setViewport({
              latitude: vp.latitude,
              longitude: vp.longitude,
              zoom: vp.zoom,
            });
          }}
          mapStyle="mapbox://styles/mapbox/satellite-v9"
        >
          {/* <Editor mode={new DrawPolygonMode()} /> */}
        </MapGL>
      </Wrapper>
    </Dialog>
  );
};

export default CreateMission;
4

1 回答 1

0

我发现了问题！我的项目在 typescript 3.7 上，“react-map-gl-draw”中使用的语法是从 3.8 版添加的。所以解决方案只是将 typescript 从 3.7 更新到最新版本 3.9，之后一切正常。

于 2020-05-25T20:00:55.680 回答