Angular项目中如何替换angular-cesium的默认访问令牌

Hey there! Glad to hear angular-cesium is up and running for you—let’s get that default access token swapped out for your custom one. Here are the most reliable ways to do it:

The cleanest way to set your token across the entire app is through the AngularCesiumModule setup in your root module (usually app.module.ts). Use the forRoot() method to pass your custom token:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularCesiumModule } from 'angular-cesium';
import { environment } from '../environments/environment'; // Optional, if using env vars

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AngularCesiumModule.forRoot({
      accessToken: 'YOUR_PERSONAL_CESIUM_TOKEN' // Replace with your actual token
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

This ensures every Cesium instance in your app uses your token by default.

If you need to use a different token for a specific component (or want to set it dynamically), inject the CesiumService into your component and update the token directly:

import { Component, OnInit } from '@angular/core';
import { CesiumService } from 'angular-cesium';

@Component({
  selector: 'app-custom-map',
  templateUrl: './custom-map.component.html',
  styleUrls: ['./custom-map.component.css']
})
export class CustomMapComponent implements OnInit {
  constructor(private cesiumService: CesiumService) { }

  ngOnInit(): void {
    // Access the underlying Cesium instance and set your token
    this.cesiumService.getCesium().Ion.defaultAccessToken = 'YOUR_CUSTOM_TOKEN';
  }
}

This will override any global token for just this component.

To keep tokens separate between development, staging, and production, store them in Angular's environment files:

1. Open src/environments/environment.ts (dev env) and environment.prod.ts (prod env):

   // environment.ts
   export const environment = {
     production: false,
     cesiumAccessToken: 'YOUR_DEV_TOKEN'
   };
   
   // environment.prod.ts
   export const environment = {
     production: true,
     cesiumAccessToken: 'YOUR_PROD_TOKEN'
   };
   

2. Reference the env var in your module or component:

   // In app.module.ts
   AngularCesiumModule.forRoot({
     accessToken: environment.cesiumAccessToken
   })
   
   // Or in a component
   this.cesiumService.getCesium().Ion.defaultAccessToken = environment.cesiumAccessToken;
   

This way, you don’t have to hardcode tokens and can switch environments seamlessly.

Just make sure your token is set before Cesium initializes—usually, the global module setup handles this automatically.

内容的提问来源于stack exchange，提问作者Arman Fatahi