cesium 如何使实体平滑更新位置

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

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

2 回调函数更新方式

 cesium球是不断实时渲染的;所以如果实体能跟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) ;
  PolygonEntity.polygon.hierarchy=new CallbackProperty(function () {
      return new PolygonHierarchy(originPosition)
  }, false);

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

2 更新点位置类同;效果和代码如下

直接更新位置和函数方式更新都不会出现频闪

 



    var point_options = {
        show: true, //是否展示
        pixelSize: 10, //点的大小
        color: Cesium.Color.RED, //颜色
        outlineColor: Cesium.Color.YELLOW, //边框颜色
        outlineWidth: 5, //边框宽度
    }
    var point=new Cesium.Entity({
        position: Cesium.Cartesian3.fromDegrees(113.27, 23.13),
        point: point_options
    })

    viewer.entities.add(point);
    let originPosition=point._position.getValue();
    function updatePosition(){
        originPosition.x+=100;
        originPosition.y+=100;
        originPosition.z+=100;
    }

    point._position=new Cesium.CallbackProperty(function () {
        return originPosition
    }, false);
  
    setInterval(() => {
        updatePosition();
    }, 100);


版权声明:本文为popstarqq原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。