【GIS效果:平滑飞行】cesium 如何使实体平滑更新位置

已被阅读 4308 次 | 文章分类:cesium | 2021-06-24 20:53

如果需要不断更新实体位置,实现平滑过渡的效果可以借鉴该方式,两种方式实现,一是直接赋值新坐标位置,但有时会出现闪烁情况;这里推荐第二种,通过回调函数的方式更新位置

1 直接赋值方式

直接赋值方式 ,cesium绘制原理是首先移除实体,然后在新位置渲染一个,轮询进行 效果和代码如下

                                        
import {
    Viewer,
    Cartesian3,
    Color,
    PolygonHierarchy,
    CallbackProperty
} from 'cesium'
import "cesium/Build/Cesium/Widgets/widgets.css"
import viewOption from './viewerOption';
var V = new Viewer('gisContainer', viewOption);
document.getElementsByClassName('cesium-viewer-bottom')[0].style.display = "none"
// 定义一个实体
var PolygonEntity = V.entities.add({
    name: 'Green extruded polygon',
    polygon: {
      hierarchy: Cartesian3.fromDegreesArray([
        -118.0,
        46.0,
        -100.0,
        46.0,
        -94.0,
        40.0
      ]),
      extrudedHeight: 0.0,
      material: Color.YELLOW,
      closeTop: false,
      closeBottom: false
    }
  });
let originPosition=PolygonEntity.polygon.hierarchy.getValue().positions;
function updatePosition(){
  for(let i=0;i<originPosition.length;i++){
    originPosition[i].x+=10000;
    originPosition[i].y+=10000;
    originPosition[i].z+=10000;
  }
  PolygonEntity.polygon.hierarchy =new PolygonHierarchy(originPosition) ;

}
setInterval(() => {
  updatePosition();
}, 100);


                                        
                                    

小白GIS

可以看到明显缺点:会有闪烁;表现为 无有无有....,如果轮询间隔短,甚至出现消失的效果

2 回调函数更新方式

 cesium球是不断实时渲染的;所以如果实体能跟cesium球一起重绘渲染,则表现方式上为平滑过渡效果,不会出现闪烁

效果

小白GIS

全部代码

                                        
import {
    Viewer,
    Cartesian3,
    Color,
    PolygonHierarchy,
    CallbackProperty
} from 'cesium'
import "cesium/Build/Cesium/Widgets/widgets.css"
import viewOption from './viewerOption';
var V = new Viewer('gisContainer', viewOption);
document.getElementsByClassName('cesium-viewer-bottom')[0].style.display = "none"
// 定义一个实体
var PolygonEntity = V.entities.add({
    name: 'Green extruded polygon',
    polygon: {
      hierarchy: Cartesian3.fromDegreesArray([
        -118.0,
        46.0,
        -100.0,
        46.0,
        -94.0,
        40.0
      ]),
      extrudedHeight: 0.0,
      material: Color.YELLOW,
      closeTop: false,
      closeBottom: false
    }
  });
let originPosition=PolygonEntity.polygon.hierarchy.getValue().positions;
function updatePosition(){
  for(let i=0;i<originPosition.length;i++){
    originPosition[i].x+=10000;
    originPosition[i].y+=10000;
    originPosition[i].z+=10000;
  }
  
  // PolygonEntity.polygon.hierarchy =new PolygonHierarchy(originPosition) ;
  PolygonEntity.polygon.hierarchy=new CallbackProperty(function () {
      return new PolygonHierarchy(originPosition)
  }, false);

}
setInterval(() => {
  updatePosition();
}, 100);


                                        
                                    

QQ:3410192267 | 技术支持 微信:popstarqqsmall

Copyright ©2017 xiaobaigis.com . 版权所有 鲁ICP备17027716号