Cesium 若干绘制示例

最新推荐文章于 2024-08-08 07:00:00 发布

苹果园dog

最新推荐文章于 2024-08-08 07:00:00 发布

阅读量1.6k

点赞数 1

分类专栏： Cesium WebGL 文章标签： javascript webgl

本文链接：https://blog.csdn.net/u014556081/article/details/115660496

版权

Cesium 同时被 2 个专栏收录

48 篇文章 44 订阅

订阅专栏

WebGL

20 篇文章 7 订阅

订阅专栏

该博客展示了如何在Cesium中创建水流、曲线插值、流动箭头线和飞鸟动画效果。通过导入不同图片并利用CallbackProperty动态改变图片，实现了飞鸟循环飞翔的视觉效果。代码中详细定义了构造函数、创建方法、获取实体和清除实体等关键步骤。

摘要由CSDN通过智能技术生成

一、效果

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);
    }

}

复制代码