您的位置:

利用Cesium Primitive实现三维地球展示动态效果

一、探究Cesium Primitive的概念

Cesium是一个基于WebGL的开源JavaScript库,用于构建三维地图程序。Cesium Primitive是Cesium中的一个核心组件,用于绘制基本图形元素。它的优势在于可以在GPU上进行计算和渲染,具有高效、灵活、可扩展等特点,因此广泛用于制作动态效果。

二、了解Cesium Primitive的基本属性

在使用Cesium Primitive时,需要掌握其基本属性:

1、Geometry:用于定义图形的几何形状,例如平面、线、多边形等。可以使用现成的几何模型,也可以自定义。

// 创建一个椭球体Geometry
var geometry = new Cesium.EllipsoidGeometry({
    radii: new Cesium.Cartesian3(500000.0, 500000.0, 500000.0)
});

2、Appearance:用于定义图形的外观效果,例如颜色、纹理、材质等。

// 创建一个用于渲染椭球体Geometry的Appearance
var appearance = new Cesium.EllipsoidSurfaceAppearance({
    material : Cesium.Material.fromType('Color', {
        color : Cesium.Color.RED
    })
});

3、Instance:用于实例化Geometry和Appearance,生成可以渲染的图形对象。

// 创建一个GeometryInstance对象,指定Geometry和Appearance
var instance = new Cesium.GeometryInstance({
    geometry : geometry,
    appearance : appearance,
    modelMatrix : Cesium.Matrix4.multiplyByTranslation(Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883)), new Cesium.Cartesian3(0.0, 0.0, 100000.0), new Cesium.Matrix4())
});

三、实现三维地球展示动态效果

借助于Cesium Primitive,可以实现多种多样的动态效果。下面将介绍三个实现三维地球展示动态效果的示例。

1、绘制飞行路径

通过定义PolylineGeometry和PolylineMaterialAppearance,可以绘制动态的飞行路径。

// 定义飞行路径的坐标点数组
var positions = Cesium.Cartesian3.fromDegreesArray([
    -122.318720, 37.690520,
    -122.277450, 37.784710,
    -122.227820, 37.831610
]);

// 创建一个PolylineGeometry
var geometry = new Cesium.PolylineGeometry({
    positions : positions,
    width: 5.0
});

// 创建一个PolylineMaterialAppearance
var appearance = new Cesium.PolylineMaterialAppearance({
    material : new Cesium.Material({
        fabric : {
            type : 'Color',
            uniforms : {
                color : Cesium.Color.RED
            }
        }
    })
});

// 创建一个GeometryInstance对象,指定PolylineGeometry和PolylineMaterialAppearance
var instance = new Cesium.GeometryInstance({
    geometry : geometry,
    appearance : appearance
});

// 创建一个Primitive对象
var primitive = new Cesium.Primitive({
    geometryInstances : [instance],
    appearance : appearance
});

// 将Primitive对象添加到场景中
viewer.scene.primitives.add(primitive);

2、实现点闪烁效果

通过定义PointGeometry和PointMaterialAppearance,可以实现点闪烁效果。

// 定义一个坐标点
var position = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883);

// 创建一个PointGeometry
var geometry = new Cesium.PointGeometry({
    positions: [position],
    pixelSize: 10.0
});

// 创建一个PointMaterialAppearance,指定点的颜色和闪烁效果
var appearance = new Cesium.PointMaterialAppearance({
    material : Cesium.Material.fromType('Color', {
        color : Cesium.Color.YELLOW
    }),
    translucent : true,
    gltfSize : 20.0
});

// 创建一个GeometryInstance对象,指定PointGeometry和PointMaterialAppearance
var instance = new Cesium.GeometryInstance({
    geometry : geometry,
    appearance : appearance
});

// 创建一个Primitive对象
var primitive = new Cesium.Primitive({
    geometryInstances : [instance],
    appearance : appearance
});

// 将Primitive对象添加到场景中
viewer.scene.primitives.add(primitive);

// 定时改变appearance的属性,实现点的闪烁效果
setInterval(function(){
    appearance.material.uniforms.color = Cesium.Color.fromRandom();
    appearance.material.uniforms.alpha = Cesium.Math.randomInRange(0.2, 1.0);
}, 1000);

3、实现渐变效果

通过定义BoxGeometry和BoxMaterialAppearance,可以实现渐变效果。

// 创建一个BoxGeometry
var geometry = new Cesium.BoxGeometry({
    vertexFormat: Cesium.VertexFormat.POSITION_ONLY,
    maximumCorner: new Cesium.Cartesian3(100000.0, 100000.0, 100000.0),
    minimumCorner: new Cesium.Cartesian3(-100000.0, -100000.0, -100000.0)
});

// 创建一个BoxMaterialAppearance,指定盒子的颜色和渐变效果
var appearance = new Cesium.BoxMaterialAppearance({
    material : new Cesium.Material({
        fabric : {
            type: 'Image',
            uniforms : {
                image : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...'
            }
        }
    })
});

// 创建一个GeometryInstance对象,指定BoxGeometry和BoxMaterialAppearance
var instance = new Cesium.GeometryInstance({
    geometry : geometry,
    appearance : appearance
});

// 创建一个Primitive对象
var primitive = new Cesium.Primitive({
    geometryInstances : [instance],
    appearance : appearance
});

// 将Primitive对象添加到场景中
viewer.scene.primitives.add(primitive);

// 定时改变appearance的属性,实现渐变效果
var count = 0;
setInterval(function(){
    appearance.material.uniforms.speed = count++;
}, 50);
利用Cesium Primitive实现三维地球展示动态效果

2023-05-17
Cesium三维可视化

2023-05-20
cesiumjs中文网地址,cesium中文文档

本文目录一览: 1、cesium 怎样设置web服务器 2、Cesium初始化选项 3、Cesium实战项目 4、Cesium的扩展工具包-EarthSDK使用指南1 5、Cesium(四)加载影像图

2023-12-08
cesiumjs搭建,cesium geojson

本文目录一览: 1、Cesium的扩展工具包-EarthSDK使用指南1 2、构建一个 Vite + Vue3 项目 开发Cesium 3、Cesium实战项目 4、cesium如何搭建dat.gui

2023-12-08
cesiumjs详细教程(cesium开发教程)

本文目录一览: 1、Cesium在js中调用entity的infobox单机事件 2、Cesium初始化选项 3、Cesium随笔:视锥绘制(上) 4、cesium如何搭建dat.gui 5、Cesi

2023-12-08
cesiumjs地下管道,cesium管线

2022-11-25
cesiumjs模型,cesium 模型格式

本文目录一览: 1、Cesiumjs可以加载倾斜摄影的OSGB数据吗 2、Cesium 3Dtiles模型多边形裁剪简单整理 3、Cesium的扩展工具包-EarthSDK使用指南1 4、影像加载篇:

2023-12-08
cesiumjs编译(cesium nodejs)

本文目录一览: 1、Cesium初始化选项 2、cesium 和 Three.js有什么区别,以及二者与WebGL 的关系 3、Cesium(四)加载影像图层 4、Cesium在js中调用entity

2023-12-08
Cesium中文API详解

2023-05-20
cesium.js开发,Cesiumjs

本文目录一览: 1、Cesium实战项目 2、cesium 和 Three.js有什么区别,以及二者与WebGL 的关系 3、Cesium的扩展工具包-EarthSDK使用指南1 4、Cesium初始

2023-12-08
Cesium淹没分析

2023-05-16
替代cesium,替代测试表

2022-11-29
包含cesiumjs官网经常打不开的词条

本文目录一览: 1、cesium截图不显示绘制元素 2、cesium 怎样设置web服务器 3、Cesium初始化选项 4、Cesium实战项目 5、skyline与cesium差异 6、cesium

2023-12-08
关于earthsdk+cesium可以放大缩小的流光线的信息

2023-01-04
Cesium——开发全球3D可视化应用的利器

2023-05-18
cesium滑块控制模型透明度-cesium滑块控制模型透明

2023-01-07
Cesium可视域分析

2023-05-23
cesiumjs分屏,CesiumJS

本文目录一览: 1、Cesium指南-自定义vue组件 2、Cesium初始化选项 3、Cesium实战项目 4、cesium 和 Three.js有什么区别,以及二者与WebGL 的关系 Cesiu

2023-12-08
cesiumjs介绍,CesiumJS

本文目录一览: 1、cesium截图不显示绘制元素 2、cesium 和 Three.js有什么区别,以及二者与WebGL 的关系 3、Cesiumjs可以加载倾斜摄影的OSGB数据吗 4、cesiu

2023-12-08
深入探究Cesium CZML

2023-05-20