Cesium 若幹繪制示例

一、效果

1、水流效果

2、曲線插值

3、流動箭頭線

4、飛鳥

二、代碼 鳥

/*
 * @Author: 蘋果園dog 
 * @Date: 2021-04-07 10:14:19
 * @LastEditTime: 2021-04-12 18:39:52
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \web\cesiumS\cesium\cesium\mytest\Innosky2021\web\src\pages\飛鳥\Flybird.js
 */
import png1 from './1.png';
import png2 from './2.png';
import png3 from './3.png';
export default class Flybird {
    constructor(options) {
        this._image = options.image ;
        this._positions = options.positions || [];
        this._color = options.color || Cesium.Color.YELLOW;
        this._width = options.width || 10;
        this._duration = options.duration || 3000;
        this._entities = [];
        this._create();
    }

    /**
     * 建立
     */
    _create() {
        let preData={
            preTime:Cesium.JulianDate.now(),
            preIndex:0,
            preImage:png1
        }
        var rotation = Cesium.Math.toRadians(0);
        let curPolygonPositions2 = Cesium.Rectangle.fromCartesianArray(this._positions);
        var birdEntity = viewer.entities.add({
            rectangle: {
                coordinates:curPolygonPositions2,
                material:new Cesium.ImageMaterialProperty({
                    image:new Cesium.CallbackProperty((time,result) => {
                        let timestep = Cesium.JulianDate.secondsDifference(time, preData.preTime);
                        if (timestep < 0.2) {
                            return preData.preImage;
                        }
                        if(preData.preIndex===0){
                            preData={
                                preImage:png2,
                                preTime:time,
                                preIndex:1
                            }
                        }else if(preData.preIndex===1){
                            preData={
                                preImage:png3,
                                preTime:time,
                                preIndex:2
                            }
                        }else if(preData.preIndex===2){
                            preData={
                                preImage:png1,
                                preTime:time,
                                preIndex:0
                            }
                        }
                        return preData.preImage;
                    }, false)
                }),
                rotation: new Cesium.CallbackProperty(() => rotation, false),
                stRotation: new Cesium.CallbackProperty(() => rotation, false),
                classificationType: Cesium.ClassificationType.TERRAIN,
            },
        });
        this._entities.push(birdEntity);
    }



    /**
     * 擷取所有加到球上的entity  
     * @returns 
     */
    getEntities() {
        return this._entities;
    }

    /**
     * 移除所有實體
     */
    clear() {
        for (let index = 0; index < this._entities.length; index++) {
            const element = this._entities[index];
            viewer.entities.remove(element);
        }
    }

    /**
     * 定位
     */
    flyTo() {
        viewer.flyTo(this._entities);
    }

}