Cesium 箭头前进的动画效果

### 创建箭头前进的动画效果

为了在 Cesium 中创建箭头前进的动画效果，可以结合 `Polyline` 和自定义材质来实现动态变化的效果。具体来说，通过更新线条的位置属性并配合时间函数控制箭头移动的速度和路径。

以下是具体的实现方式：

#### 定义初始场景与实体
首先初始化 Cesium Viewer 并加载基础地图数据[^1]。

const viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain()
});

#### 设置带箭头的线材质
接着配置具有箭头特性的材质样式。

function createArrowMaterial() {
    return Cesium.Material.fromType('Color')({
        color: Cesium.Color.RED.withAlpha(0.7),
    });
}

#### 动态更新位置以模拟运动
利用定时器或帧循环机制不断改变 polyline 的坐标集合，从而形成连续位移的感觉。这里假设有一个预设好的飞行轨迹数组 `positions` 来表示整个行程中的各个节点[^2]。

let currentIndex = 0;
const positions = []; // 假定这是由一系列经纬度组成的数组

// 添加一条静态多段线作为起点
viewer.entities.add({
    name : 'Static Polyline',
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray([
            ...positions[currentIndex],
            ...positions[currentIndex + 1]
        ]),
        width : 5,
        material : createArrowMaterial(),
        clampToGround : true
    }
});

// 开始播放动画逻辑
function animateFlightPath() {
    if (currentIndex >= positions.length - 2) return;

    const nextPositions = [
        ...positions[++currentIndex],
        ...positions[currentIndex + 1]
    ];

    viewer.entities.getById('Animated Arrow').polyline.positions =
        Cesium.Cartesian3.fromDegreesArray(nextPositions);

    requestAnimationFrame(animateFlightPath);
}

requestAnimationFrame(animateFlightPath);

上述代码片段实现了基本的功能框架，实际应用时可能还需要考虑更多的细节优化，比如平滑过渡、速度调节等特性。