Question

我正在尝试将编辑器添加到地图中，但是当我导入“ 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;

Answer 1

我发现了问题！我的项目使用的是打字稿3.7，并且从3.8版开始添加了“ react-map-gl-draw”中使用的语法。因此，解决方案只是将打字稿从3.7更新到最新版本3.9，然后一切正常。

React Map GL Draw打字稿错误“声明或声明预期”

1 个答案: