Cesium入门指南：如何正确添加token指令以解决地图加载问题

1次阅读

共计 2358 个字符，预计需要花费 6 分钟才能阅读完成。

Cesium 作为一款强大的 3D 地理空间可视化库，在加载在线地图服务（如 Cesium ion）时，需要通过 token 进行身份验证。这类似于我们登录网站需要用户名和密码，token 就是 Cesium 访问地图数据的 ” 通行证 ”。

身份验证：确保只有授权用户可以使用相应服务
配额管理：控制 API 调用次数和数据使用量
服务追踪：帮助服务商统计使用情况和优化服务

当你的 Cesium 应用没有正确配置 token 时，通常会遇到以下问题：

地图完全无法加载，控制台报错 ”401 Unauthorized”
地图显示为灰色或空白，出现 ”Invalid access token” 提示
某些特定图层或服务不可用，但基础地图可以显示

这是最简单常用的方法，适合大多数应用场景。只需在初始化 Viewer 前设置一次，整个应用都会使用这个 token。

// 设置全局 Cesium ion token
Cesium.Ion.defaultAccessToken = '你的 token 字符串';

// 然后创建 Viewer
const viewer = new Cesium.Viewer('cesiumContainer');

如果你需要临时使用不同的 token 访问特定资源，可以采用这种方式：

const viewer = new Cesium.Viewer('cesiumContainer');

// 加载特定资源时附带 token
viewer.dataSources.add(
  Cesium.GeoJsonDataSource.load('data.geojson', {accessToken: '临时 token'})
);

在复杂应用中，你可能需要管理多个 token：

// 主 token 用于基础地图
Cesium.Ion.defaultAccessToken = '基础 token';

// 特定服务的 token
const specialToken = '专用 token';

const viewer = new Cesium.Viewer('cesiumContainer', {
  imageryProvider: new Cesium.IonImageryProvider({
    assetId: 12345,
    accessToken: specialToken
  })
});

下面是一个完整的 HTML 示例，展示如何正确集成 token：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Cesium Token 示例 </title>
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <style>
    #cesiumContainer {width: 100%; height: 100vh;}
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    // 关键步骤：设置你的 Cesium ion 访问 token
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...';

    // 初始化 Cesium Viewer
    const viewer = new Cesium.Viewer('cesiumContainer', {imageryProvider: new Cesium.IonImageryProvider({ assetId: 3845}), // 使用 Cesium 世界影像
      terrainProvider: Cesium.createWorldTerrain()});

    // 设置初始视角
    viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 10000000)
    });
  </script>
</body>
</html>

虽然 token 是应用运行的必要元素，但也要注意保护它：