Cesium卫星云图时序动态可视化

🌐 在线体验：http://1.116.108.179:8003/SatelliteCloudImage

本文聚焦卫星云图时序可视化的关键技术实现，重点讲解如何在 Cesium 中加载多张本地云图、精准地理配准，并通过 ECharts
时间轴控制其动态切换。

一、禁用 Cesium 默认底图，为自定义图层腾出空间

Cesium 默认会加载 Bing 或 Ion 底图，干扰我们后续叠加的天地图和云图。因此初始化时必须彻底关闭：

const viewer = new Cesium.Viewer('cesiumContainer', {
    animation: false,
    timeline: false,
    baseLayerPicker: false,
    geocoder: false,
    homeButton: false,
    sceneModePicker: false,
    navigationHelpButton: false,
    fullscreenButton: false,
    infoBox: false,
    selectionIndicator: false,
    imageryProvider: false, // ⚠️ 关键：不加载任何默认影像
    terrainProvider: Cesium.createWorldTerrain(),
})

// 立即清除可能残留的图层
viewer.imageryLayers.removeAll()

二、加载天地图双图层（影像 + 中文标注）

使用天地图官方 API，分两层加载：

// 1. 卫星影像（img_w）
const tiandituImageryProvider = new Cesium.UrlTemplateImageryProvider({
    url: `https://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${token}`,
    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
    tilingScheme: new Cesium.WebMercatorTilingScheme(),
    maximumLevel: 18
})

// 2. 中文标注（cia_w）
const tiandituLabelProvider = new Cesium.UrlTemplateImageryProvider({
    url: `https://t{s}.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=${token}`,
    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
    tilingScheme: new Cesium.WebMercatorTilingScheme(),
    maximumLevel: 18
})

// 添加顺序：先影像，后标注
viewer.imageryLayers.addImageryProvider(tiandituImageryProvider)
viewer.imageryLayers.addImageryProvider(tiandituLabelProvider)

三、加载本地云图并精准地理配准

云图是静态 PNG，需指定其覆盖的地理范围（中国区域）：

import a1 from '../assets/timeMap/a1.png'
// ... a2 ~ a10

const urlArr = [a1, a2, ..., a10]

// 加载所有云图图层
const loadTileLayers = (viewer) => {
    for (let i = 0; i < urlArr.length; i++) {
        const imageryProvider = new Cesium.SingleTileImageryProvider({
            url: urlArr[i],
            // 中国大致经纬度范围（WGS84）
            rectangle: Cesium.Rectangle.fromDegrees(
                63.8148899733,  // 西
                12.7700338517,  // 南
                143.536486117,  // 东
                56.3833398551   // 北
            )
        })

        // 初始只显示第一张（80%透明度），其余隐藏
        const options = {alpha: i === 0 ? 0.8 : 0}
        const layer = new Cesium.ImageryLayer(imageryProvider, options)
        viewer.imageryLayers.add(layer)
        arrTileLayer.value.push(layer)
    }
}

✅ SingleTileImageryProvider 适用于单张大图，配合 rectangle 可实现像素级地理对齐。

四、ECharts 时间轴联动控制

使用 ECharts 的 timeline 组件驱动云图切换：

// 初始化时间轴
const initTimelineChart = () => {
  const chart = echarts.init(timelineChartRef.value)

  // 生成时间标签（示例：每张图间隔1小时）
  const timelineData = Array.from({length: urlArr.length}, (_, i) =>
    new Date(Date.UTC(2024, 0, 1, i)).toISOString().substring(0, 10)
  )

  chart.setOption({
    baseOption: {
      timeline: {
        axisType: 'category',
        autoPlay: true,
        playInterval: 2000,
        data: timelineData,
        label: { color: '#fff' },
        checkpointStyle: { color: '#4694C5' }
      }
    }
  })

  // 监听切换事件
  chart.on('timelinechanged', (event) => {
    // 隐藏所有云图
    arrTileLayer.value.forEach(layer => layer.alpha = 0)
    // 显示当前帧
    if (arrTileLayer.value[event.currentIndex]) {
      arrTileLayer.value[event.currentIndex].alpha = 0.8
    }
  })
}