typescript - Hvordan sette mapboxgl.accessToken i Angular-prosjekt?

Jeg prøver å lage et eksempel på StackBlitz med mapbox-gl. Hvordan kan jeg sette accessToken?

Redaktøren sier «Kan ikke tilordne til 'accessToken' fordi det er en konstant eller en skrivebeskyttet egenskap».

Jeg har allerede prøvd de mulige løsningene fra et annet spørsmål: Mapbox-gl-skriving tillater ikke tildeling av 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
    });
  }
}

Full kodeeksempel: https://stackblitz.com/edit/angular-9djiw2

Svar #1

En annen metode er å få tilgang til token-egenskapen på følgende måte: (mapboxgl as any).accessToken="ditt token"

Svar #2

Endelig løste jeg dette problemet ved å erstatte

import * as mapboxgl from 'mapbox-gl';

med

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

Jeg vet ikke hvorfor dette fungerer (til tross for noen røde understrek). Det kan være spesifikt for StackBlitz. Jeg lar eksemplet være der, men vil deaktivere nøkkelen fra Mapbox.

Relaterte artikler