我正在像这样在我的 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 的最佳方式是什么?
最佳答案
这是在我的机器上运行的最小示例应用程序:它基于 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。
关于angular - 如何将 mapbox-gl-draw 导入 Angular 2/4?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45748965/