Cesium 若干绘制示例

20 篇文章 6 订阅

一、效果

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

}

复制代码

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 13
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

苹果园dog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值