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

发布时间：2023-05-17

一、探究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)
});
  1. Appearance：用于定义图形的外观效果，例如颜色、纹理、材质等。
// 创建一个用于渲染椭球体Geometry的Appearance
var appearance = new Cesium.EllipsoidSurfaceAppearance({
    material : Cesium.Material.fromType('Color', {
        color : Cesium.Color.RED
    })
});
  1. 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);
推荐文章