一、探究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);