cesium实现动态圆效果之——旋转圆

右弦GISer

已于 2022-03-15 00:29:28 修改

阅读量5.7k

点赞数 6

分类专栏： cesium 文章标签： gis cesium

于 2022-03-12 09:00:00 首次发布

本文链接：https://blog.csdn.net/weixin_45782925/article/details/123277979

版权

cesium 专栏收录该内容

122 篇文章 827 订阅

订阅专栏

该博客介绍了如何在Cesium中通过设置实体材质的stRotation属性来实现圆的动态旋转效果。作者详细讲解了官方文档中的相关属性，并提供了一个核心函数`rotateMaterial`，该函数接收实体、初始旋转角度和角度变化量作为参数，实现材质的动态更新。通过代码调用，创建并旋转了一个使用SVG图像作为材质的圆。

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

文章目录

Cesium实战系列文章总目录：传送门

1.实现效果

在这里插入图片描述

2.实现方法

旋转圆效果不能直接旋转圆实体，而是旋转其材质，才能实现效果。

2.1官方文档

首先看一下官方文档，发现有设置实体纹理材质逆时针旋转调度的属性stRotation：传送门
在这里插入图片描述

2.2具体实现

使用回调函数设置其材质动态旋转，再调用即可。

2.2.1核心函数

/**
* @description: 旋转材质
* @param {*} instance ：实体
* @param {*} _stRotation : 初始材质旋转角度
* @param {*} _amount ：旋转角度变化量
* @return {*}
*/        
function rotateMaterial(instance, _stRotation, _amount) {
   instance.stRotation = new Cesium.CallbackProperty(function() {
       _stRotation += _amount;
       if (_stRotation >= 360 || _stRotation <= -360) {
           _stRotation = 0;
       }
       return Cesium.Math.toRadians(_stRotation);
   }, false)
}

2.2.2代码调用

// 旋转圆
let circleRotate = this.viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(113.9236839, 22.528061),
    id: 'circleRotateTest',
    ellipse: {
        semiMinorAxis: 1000.0,
        semiMajorAxis: 1000.0,
        material: new Cesium.ImageMaterialProperty({
            image: './icons/circle_rotate.svg'
        })
    }
})
rotateMaterial(circleRotate.ellipse, 0, 1);