已被阅读 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);
可以看到明显缺点:会有闪烁;表现为 无有无有....,如果轮询间隔短,甚至出现消失的效果
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);
QQ:3410192267 | 技术支持 微信:popstarqqsmall
Copyright ©2017 xiaobaigis.com . 版权所有 鲁ICP备17027716号