Mapbox-gl和angular2

Question

我正在尝试将mapbox-gl集成到angular2应用程序中。但在创建服务应用程序后，它就不能工作了。

服务

    import {Injectable} from '@angular/core';
import * as mapboxgl from 'mapbox-gl';
import { Map } from 'mapbox-gl';

@Injectable()
export class MapService {
    map: Map;
    baseMaps: any;

    constructor() {

        (mapboxgl as any).accessToken = 'my_acces_token(in original code included';)

    }

}

模块

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
import {MapService} from './services/mapService/mapBox.service'

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  providers: [MapService]
})
export class AppModule { }

启动应用程序后，我收到以下错误信息

Failed to load resource: the server responded with a status of 404 (Not Found)

和

ZoneAwareError

mabpox-gl是使用以下命令安装的

npm install mapbox-gl --save

and 

npm install @types/mapbox-gl --save

Answer 1

检查您的systemjs.config.js文件。您可能没有设置path node_modules包。

(function (global) {
  System.config({
    map: {
      'mapbox-gl': '[Your node_module folder]/mapbox-gl/dist',
       [....]
       },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      'mapbox-gl': {
        main: './mapbox-gl.js',
        defaultExtension: 'js'
      },
      [....]
    }
  });
})(this);

Answer 2

首先，检查mapboxgl的@type库是否支持您安装的mapbox-gl库版本。

然后，在服务中，像这样声明映射: mapboxgl.Map；

并在您的组件中声明地图，如下所示

this.map = new mapboxgl.Map({
            container: 'map',
            center: GlobalVariables.defaultCoord,
            maxZoom: GlobalVariables.defMaxZoom,
            minZoom: GlobalVariables.defMinZoom,
            zoom: GlobalVariables.defZoom,
            style: GlobalVariables.mapboxDark
        });

最后，转到"compilerOptions“字段中的tsconfig.json，检查是否使用mapboxgl类型设置了types属性。例如：

"compilerOptions": {
"moduleResolution": "node",
"target": "es5",
"sourceMap": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"skipDefaultLibCheck": true,
"lib": [ "es5", "es6", "dom" ],
"types": [ "node", "geojson", "mapbox-gl" ]

}

我希望这能有所帮助。致以问候。