Vue3 深入使用 CesiumJS 指南

CesiumJS 是一个基于 WebGL 的开源 JavaScript 库，专注于在浏览器中构建高性能的 3D 地球和地图应用，支持地形、影像、3D 模型及动态数据的可视化。本文将从基础功能到高级优化，详细讲解如何在 Vue3 项目中集成 CesiumJS，并结合实际代码示例和优化策略。

---

一、加载外部影像地图

1. 影像地图加载

通过 WebMapTileServiceImageryProvider 加载天地图影像服务（需替换有效 Token）：

const tianDiTuToken = 'YOUR_TOKEN'; // 替换为实际 Token
const subdomains = ['t0', 't1', 't2', 't3']; // 天地图子域名

viewer.value.imageryLayers.addImageryProvider(
  new Cesium.WebMapTileServiceImageryProvider({
    url: `http://{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=${tianDiTuToken}`,
    subdomains: subdomains,
    layer: "tdtBasicLayer",
    format: "image/jpeg",
    tileMatrixSetID: "GoogleMapsCompatible",
    maximumLevel: 18,
  })
);

2. 影像注记（地图标注）

叠加天地图注记层：

viewer.value.imageryLayers.addImageryProvider(
  new Cesium.WebMapTileServiceImageryProvider({
    url: `http://{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILER