加载事件时在angular-cli项目中未定义Mapbox-gl.js地图 [英] Mapbox-gl.js map is undefined in angular-cli project on load event

问题描述

启动了一个angular-cli项目，并通过npm安装了mapbox-gl.在angular-cli.json文件中包括了mapbox-gl脚本和样式.我可以显示地图，但是不能在load事件上添加图层.地图突然变得不确定?这是模板html(app.component.html):

Started an angular-cli project and installed mapbox-gl via npm. Included the mapbox-gl script and styles in the angular-cli.json file. I can get the map to show, but I cannot add a layer on the load event. The map is undefined suddenly? Here is the template html (app.component.html):

<div id="map" style="margin:0; padding:0; position:absolute; top:25px; bottom:0; width:100%;">
</div>

这是我的组件代码(app.component.ts):

And here is my component code (app.component.ts):

import { Component, ViewChild, AfterViewInit, OnInit } from '@angular/core';
import * as mapboxgl from 'mapbox-gl';
import { Map } from 'mapbox-gl';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  @ViewChild("map") map: Map;
  title = 'app';

  ngOnInit() {

    mapboxgl.accessToken = 'blah';   

    this.map = new Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/light-v9',
      zoom: 5,
      center: [-78.880453, 42.897852]
    });

    this.map.on('load', this.onLoad);
  }

  onLoad(){
    console.log("map is loaded, can I still talk to it?");

    this.map.addLayer({
      "id": "points",
      "type": "symbol",
      "source": {
          "type": "geojson",
          "data": {
              "type": "FeatureCollection",
              "features": [{
                  "type": "Feature",
                  "geometry": {
                      "type": "Point",
                      "coordinates": [-77.03238901390978, 38.913188059745586]
                  },
                  "properties": {
                      "title": "Mapbox DC",
                      "icon": "monument"
                  }
              }, {
                  "type": "Feature",
                  "geometry": {
                      "type": "Point",
                      "coordinates": [-122.414, 37.776]
                  },
                  "properties": {
                      "title": "Mapbox SF",
                      "icon": "harbor"
                  }
              }]
          }
      },
      "layout": {
          "icon-image": "{icon}-15",
          "text-field": "{title}",
          "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
          "text-offset": [0, 0.6],
          "text-anchor": "top"
      }
  });

  }

}

位于 https://github.com/derobiom/mapboxAngularCli

推荐答案

尝试使用 bind 方法

this.map.on('load', this.onLoad.bind(this));

或本地箭头功能

this.map.on('load', () => this.onLoad());

或实例箭头功能

load = () => {
  ...

这种方式 this 将被引用到组件实例

This way this will be referenced to component instance

这篇关于加载事件时在angular-cli项目中未定义Mapbox-gl.js地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！