如何将 mapbox-gl-draw 导入 Angular 2/4？

Posted 2023-02-16

【中文标题】如何将 mapbox-gl-draw 导入 Angular 2/4？

【英文标题】：How to import mapbox-gl-draw into Angular 2/4?

【发布时间】：2018-01-26 16:28:49

【问题描述】：

我在我的 Angular 2/4 应用程序中导入模块，如下所示：

import  MapboxDraw  from '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw';

并在这样的组件之一中使用它：

var draw = new MapboxDraw(
   displayControlsDefault: false,
   controls: 
     polygon: true,
     trash: true
   
);

map.addControl(draw);

但是当我打开页面时出现错误：

ERROR TypeError: __WEBPACK_IMPORTED_MODULE_4__mapbox_mapbox_gl_draw_dist_mapbox_gl_draw__.MapboxDraw is not a constructor

导入 mapbox-gl-draw 的最佳方式是什么？

【问题讨论】：

检查此link 可能会有所帮助

嗨 Rahul，我设法让 mapbox-gl 工作，但我不能对 mapbox-draw-gl 说同样的话。

【参考方案1】：

这是一个可以在我的机器上运行的最小示例应用程序：它基于 github 上的这个小项目：https://github.com/haoliangyu/ngx-mapboxgl-starter

import  Component  from '@angular/core';
import * as mapboxgl from 'mapbox-gl';
import * as MapboxDraw from 'mapbox-gl-draw';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)

export class AppComponent 
  ngOnInit() 
    mapboxgl.accessToken = 'your Token';
    let map = new mapboxgl.Map(
      container: 'map',
      style: 'mapbox://styles/mapbox/light-v9',
      zoom: 5,
      center: [-78.880453, 42.897852]
    );

    let Draw = new MapboxDraw();

    map.addControl(Draw)

    map.on('load', function() 
      // ALL YOUR APPLICATION CODE
    );
  

#map 
  width: 500px;
  height: 500px;

<div id='map'></div>

请注意，我使用的是'mapbox-gl-draw' 而不是'@mapbox/mapbox-gl-draw'。所以你可能想尝试通过npm install mapbox-gl-draw 安装这个包。我尝试了后者，但这对我来说是一个错误。另外不要忘记添加所需的 mapbox-gl-draw CSS。

【讨论】：

嗨，我尝试使用 require 函数，但不幸的是它不起作用，因为我认为这与这是一个 Angular 2 应用程序这一事实有关。

@AfeezAziz 我的回答说你应该使用import MapboxDraw from '@mapbox/mapbox-gl-draw'; 而不是必需的。重要的部分是路径与您最初的路径不同。

您好，如果是这样，那么不幸的是它仍然无法正常工作。将'@mapbox/mapbox-gl-draw'; 更改为'@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw'; 是因为我按照mapbox-gl 的说明进行操作。

@AfeezAziz 我用一个例子更新了我的答案。你可以试试这个解决方案吗？

【参考方案2】：

我已经安装了npm install @mapbox/mapbox-gl-draw

将 css 添加到 angular-cli.json 中

"../node_modules/@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css",

组件

import  Component  from '@angular/core';
import * as mapboxgl from 'mapbox-gl';
import * as MapboxDraw from '@mapbox/mapbox-gl-draw';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)

export class AppComponent 
  static t;
  ngOnInit() 
    mapboxgl.accessToken = 'Token';
    AppComponent.t.map= new mapboxgl.Map(
      container: 'map',
      style: 'mapbox://styles/mapbox/light-v9',
      zoom: 5,
      center: [-78.880453, 42.897852]
    );

     const draw = new MapboxDraw(
        displayControlsDefault: false,
        controls: 
            polygon: true,
            trash: true
        
    );
    AppComponent.t.map.addControl(draw);
  

【参考方案3】：

使用以下方式安装依赖项：

npm i --save-dev @types/mapbox__mapbox-gl-draw

将以下导入添加到您的组件中：

import * as MapboxDraw from '@mapbox/mapbox-gl-draw';