cesium态势标绘 波

### 使用Cesium实现动态态势标绘波效果

在Cesium中创建动态态势标绘波效果可以通过使用`Cesium.PolygonGraphics`和其他图形对象来模拟波动的效果。下面是一个详细的说明以及代码示例。

#### 创建基本环境
为了展示动态变化的多边形，首先需要初始化一个Cesium Viewer实例：

// 初始化Viewer
var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider : Cesium.createWorldTerrain()
});

#### 定义一个多边形并设置动画属性
通过调整多边形的高度或颜色随时间改变可以制造出波浪式的视觉感受。这里定义了一个简单的函数用于更新多边形的位置数据：

function createDynamicPolygon(positions) {
    var dynamicPolygons = [];
    
    positions.forEach(function (pos, index) {
        let polygonInstance = viewer.entities.add({
            name: 'Dynamic Polygon',
            polygon: {
                hierarchy: Cesium.Cartesian3.fromDegreesArray(pos),
                material: Cesium.Color.BLUE.withAlpha(0.6), // 初始材质
                classificationType: Cesium.ClassificationType.TERRAIN,
                outline: true,
                outlineColor: Cesium.Color.BLACK
            }
        });

        // 添加到数组以便后续操作
        dynamicPolygons.push(polygonInstance);
        
        animateWaveEffect(index, pos.length / 2); // 假设中间点作为起始位置
    });
}

createDynamicPolygon([
    [-105.0, 40.0], 
    [-105.0, 40.1],
    [-104.9, 40.1],
    [-104.9, 40.0]
]);

上述代码片段中的`animateWaveEffect()`方法负责处理实际的动画逻辑[^1]。

#### 实现波纹传播算法
接下来编写具体的波纹扩散机制。这通常涉及到周期性的修改顶点高度或其他特性参数以形成连续的变化模式。此处提供了一种基于正弦曲线的时间依赖型变形方案：

function animateWaveEffect(entityIndex, centerPointIndex) {
    function updateHeight(time) {
        const amplitude = 500; // 波动幅度
        const frequency = Math.PI * 2 / 10000; // 频率
        
        entities[entityIndex].polygon.hierarchy.getValue().positions.map((point, idx) => {
            if(idx !== centerPointIndex){
                point.z += Math.sin(frequency * time + distanceFromCenter(point)) * amplitude;
            } else{
                point.z -= Math.cos(frequency * time)*amplitude*0.5;
            }

            return point;
        });
    }

    function distanceFromCenter(cartesianPosition){
        let originPos = entities[entityIndex].polygon.hierarchy.getValue().positions[centerPointIndex];
        return Cesium.Cartesian3.distance(originPos,cartesianPosition);
    }

    // 启动定时器不断刷新实体状态
    setInterval(() => {updateHeight(Date.now())}, 16); // 每约16ms调用一次
}

此部分实现了从指定中心向外扩展的波状运动，并且利用了JavaScript内置的`setInterval`函数定期触发更新事件[^2]。

请注意，在真实项目开发过程中可能还需要考虑性能优化等问题，比如减少不必要的重新计算次数等措施。