Как установить mapboxgl.accessToken в Angular-проекте?

Question

Я пытаюсь сделать пример на StackBlitz с mapbox-gl.Как я могу установить accessToken?

Редактор заявляет: " Невозможно назначить accessToken, потому что это константа или свойство только для чтения ".

Я уже попробовал возможные решения из другого вопроса: В наборе Mapbox-gl не разрешено присвоение accessToken

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  @ViewChild('map') mapElement: ElementRef;
  map: mapboxgl.Map;

  ngOnInit() {
    mapboxgl.accessToken = '<token>';
    this.map = new mapboxgl.Map({
      container: this.mapElement.nativeElement,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [-77.04, 38.907],
      zoom: 11.15
    });
  }
}

Пример полного кода: https://stackblitz.com/edit/angular-9djiw2

Answer 1

Наконец-то решил эту проблему, заменив

import * as mapboxgl from 'mapbox-gl';

на

const mapboxgl = require('mapbox-gl');

Я не знаю, почему это работает (несмотря на некоторые красные подчеркивания).Это может быть специфично для StackBlitz.Я оставлю пример там, но отключу ключ от Mapbox.

Answer 2

Я использовал машинопись и хотел продолжать использовать импорт. Итак, наконец, это работает с:

import { Map } from "mapbox-gl/dist/mapbox-gl"
import * as mapboxgl from "mapbox-gl/dist/mapbox-gl"

, а затем, чтобы создать экземпляр карты:

mapboxgl.accessToken = "YOUR_API_KEY_BLA_BLA_BLA"
this.map = new Map({
    container: "mapId",
    style: "mapbox://styles/mapbox/light-v9",
    zoom: 5,
    center: [-78.880453, 42.897852]
})

и показать полный пример. В html:

<div id="mapId"></div>

Если я что-то делаю не так, скажите, пожалуйста.