区块链技术博客
www.b2bchain.cn

Cesium 动态立体墙求职学习资料

本文介绍了Cesium 动态立体墙求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

Cesium 中很多交互、动画都是可以利用 CallbackProperty 来实现,本文介绍的动态立体墙就是通过 CallbackProperty 来改变点位的高度值,实现墙的动态效果。如果在效果上有更进一步的要求,可以自定义material。下面是具体实现代码。

1、动态立体墙类

import * as Cesium from 'cesium';  class AnimationWall {   constructor(viewer) {     this.viewer = viewer;   }    add(positions) {     const maximumHeights = Array(positions.length / 2).fill(600);     const minimumHeights = Array(positions.length / 2).fill(60);     positions = Cesium.Cartesian3.fromDegreesArray(positions);     const dayMaximumHeights = Array(minimumHeights.length).fill(600);     this.viewer.entities.add({       wall: {         positions,         maximumHeights: new Cesium.CallbackProperty(() => {           for (let i = 0; i < minimumHeights.length; i++) {             dayMaximumHeights[i] += maximumHeights[i] * 0.004;             if (dayMaximumHeights[i] > maximumHeights[i]) {               dayMaximumHeights[i] = minimumHeights[i];             }           }           return dayMaximumHeights;         }, false),         minimumHeights,         material: new Cesium.Color(1, 0, 0, 0.8),       },     });   } } export default AnimationWall;

2、试一试

Cesium 中很多交互、动画都是可以利用 CallbackProperty 来实现,本文介绍的动态立体墙就是通过 CallbackProperty 来改变点位的高度值,实现墙的动态效果。如果在效果上有更进一步的要求,可以自定义material。下面是具体实现代码。

1、动态立体墙类

import * as Cesium from 'cesium';  class AnimationWall {   constructor(viewer) {     this.viewer = viewer;   }    add(positions) {     const maximumHeights = Array(positions.length / 2).fill(600);     const minimumHeights = Array(positions.length / 2).fill(60);     positions = Cesium.Cartesian3.fromDegreesArray(positions);     const dayMaximumHeights = Array(minimumHeights.length).fill(600);     this.viewer.entities.add({       wall: {         positions,         maximumHeights: new Cesium.CallbackProperty(() => {           for (let i = 0; i < minimumHeights.length; i++) {             dayMaximumHeights[i] += maximumHeights[i] * 0.004;             if (dayMaximumHeights[i] > maximumHeights[i]) {               dayMaximumHeights[i] = minimumHeights[i];             }           }           return dayMaximumHeights;         }, false),         minimumHeights,         material: new Cesium.Color(1, 0, 0, 0.8),       },     });   } } export default AnimationWall;

2、试一试

Cesium 中很多交互、动画都是可以利用 CallbackProperty 来实现,本文介绍的动态立体墙就是通过 CallbackProperty 来改变点位的高度值,实现墙的动态效果。如果在效果上有更进一步的要求,可以自定义material。下面是具体实现代码。

1、动态立体墙类

import * as Cesium from 'cesium';  class AnimationWall {   constructor(viewer) {     this.viewer = viewer;   }    add(positions) {     const maximumHeights = Array(positions.length / 2).fill(600);     const minimumHeights = Array(positions.length / 2).fill(60);     positions = Cesium.Cartesian3.fromDegreesArray(positions);     const dayMaximumHeights = Array(minimumHeights.length).fill(600);     this.viewer.entities.add({       wall: {         positions,         maximumHeights: new Cesium.CallbackProperty(() => {           for (let i = 0; i < minimumHeights.length; i++) {             dayMaximumHeights[i] += maximumHeights[i] * 0.004;             if (dayMaximumHeights[i] > maximumHeights[i]) {               dayMaximumHeights[i] = minimumHeights[i];             }           }           return dayMaximumHeights;         }, false),         minimumHeights,         material: new Cesium.Color(1, 0, 0, 0.8),       },     });   } } export default AnimationWall;

2、试一试

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » Cesium 动态立体墙求职学习资料
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们