文章目录

• 缘起
• 官网NPM安装指引
• 问题与解决办法
• • 问题一：引入mapboxgl
  • 问题二：引入L7的对象

缘起

Angular8引入Mapbox GL 和 Ant L7，之前都是将js API放在本地加载的。最近想尝试下通过npm加载，官网也提供了相应的指引。本以为很简单，没想到还是碰到了一些问题，为了便于自己和大家今后少走弯路，特此记录。

官网NPM安装指引

Mapbox GL：https://www.mapbox.com/install/js/
Ant L7：https://antv-l7.gitee.io/zh/docs/tutorial/quickstart

问题与解决办法

问题一：引入mapboxgl

如何通过require引入mapboxgl

解决办法：

1. 通过npm安装"@types/node"包

npm install --save @types/node

2. 在tsconfig.app.json文件的types属性中添加node

{
  ...
  "compilerOptions": {
    ...
    "types": ["node"]
  },
  ...
}

问题二：引入L7的对象

引入L7的对象时，出现了以下error

报错：

 ERROR in node_modules/@antv/l7-core/es/services/asset/IIconService.d.ts(1,8): error TS1259: Module '"/node_modules/eventemitter3/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag
    node_modules/@antv/l7-map/es/geo/transform.d.ts(9,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/@antv/l7-map/es/geo/transform.d.ts(10,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/@antv/l7-map/es/geo/transform.d.ts(11,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/@antv/l7-map/es/geo/transform.d.ts(12,9): error TS1086: An accessor cannot be declared in an ambient context.
    ...

解决办法：

在tsconfig.json文件的compilerOptions对象中将allowSyntheticDefaultImports设为true

报错：

ERROR in node_modules/@antv/l7-core/es/services/asset/IIconService.d.ts:1:8 - error TS1259: Module '"/node_modules/eventemitter3/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

1 import EventEmitter from 'eventemitter3';
         ~~~~~~~~~~~~

  node_modules/eventemitter3/index.d.ts:134:1
    134 export = EventEmitter;
        ~~~~~~~~~~~~~~~~~~~~~~
    This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
node_modules/@antv/l7-map/es/geo/transform.d.ts:9:9 - error TS1086: An accessor cannot be declared in an ambient context.

9     get minZoom(): number;
          ~~~~~~~
node_modules/@antv/l7-map/es/geo/transform.d.ts:10:9 - error TS1086: An accessor cannot be declared in an ambient context.

解决办法：

在tsconfig.json文件的compilerOptions对象中将skipLibCheck设为true

修改的内容：

{
  "compilerOptions": {
	...
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true
  }
}

好了，到了这里，问题就解决了。

喜欢的话，可以点赞、关注和分享！本博客将持续更新与WebGIS相关的内容，欢迎你与我一同成长！