当前位置：首页 > news >正文

Cesium绘制圆锥

news 2025/7/25 12:00:21

1、创建类

// 圆锥
export class Cone {constructor(viewer, Cesium) {this.viewer = viewerthis.Cesium = Cesium}add(params) {/*** model:模型实体 * length:圆锥长度* heading:方位* pitch:俯仰* roll:翻滚* position:{*    lon:经度*    lat:纬度*    height:高度* }*/let { length, heading, pitch, roll, color, bottomRadius, position } = params// 矩阵计算const hpr = new this.Cesium.HeadingPitchRoll(this.Cesium.Math.toRadians(heading - 90),this.Cesium.Math.toRadians(pitch),roll);// 计算带旋转的模型矩阵let modelMatrix = this.Cesium.Matrix4.multiplyByTranslation(this.Cesium.Transforms.headingPitchRollToFixedFrame(this.Cesium.Cartesian3.fromDegrees(position.lon,position.lat,position.height),hpr),new this.Cesium.Cartesian3(0.0, 0.0, -(length / 2)), // 设置顶点new this.Cesium.Matrix4());let geometry = new this.Cesium.CylinderGeometry({length,topRadius: 0.0,bottomRadius,vertexFormat:this.Cesium.MaterialAppearance.MaterialSupport.TEXTURED.vertexFormat,});// 创建GeometryInstancelet geometryInstances = new this.Cesium.GeometryInstance({geometry,modelMatrix,});// 创建圆锥Primitivelet cone = this.viewer.scene.primitives.add(new this.Cesium.Primitive({geometryInstances,appearance: new this.Cesium.MaterialAppearance({material: new this.Cesium.Material({fabric: {uniforms: {color: new this.Cesium.Color.fromCssColorString(color),repeat: 50,offset: 1.0,thickness: 0.3,},source: `uniform vec4 color;uniform float repeat;uniform float offset;uniform float thickness;czm_material czm_getMaterial(czm_materialInput materialInput){czm_material material = czm_getDefaultMaterial(materialInput);float sp = 1.0/repeat;vec2 st = materialInput.st;float dis = distance(st, vec2(0.5));float m = mod(dis + offset, sp);float a = step(sp*(1.0-thickness), m);material.diffuse = color.rgb;material.alpha = a;return material;}`,},translucent: false,}),faceForward: true,closed: true,renderState: {depthTest: { enabled: false },},}),}));// 动态修改雷达材质中的offset变量，实现动态效果。this.viewer.scene.preUpdate.addEventListener(function () {let offset = cone.appearance.material.uniforms.offset;// 控制雷达波运动速度offset -= 0.001;if (offset > 1.0) {offset = 0.0;}cone.appearance.material.uniforms.offset = offset;});return cone}update(params) {/*** model:模型实体 * length:圆锥长度* heading:方位* pitch:俯仰* roll:翻滚* position:{*    lon:经度*    lat:纬度*    height:高度* }*/let { model, length, heading, pitch, roll, position } = params// 矩阵计算const hpr = new this.Cesium.HeadingPitchRoll(this.Cesium.Math.toRadians(heading - 90),this.Cesium.Math.toRadians(pitch),roll);// 计算带旋转的模型矩阵let modelMatrix = this.Cesium.Matrix4.multiplyByTranslation(this.Cesium.Transforms.headingPitchRollToFixedFrame(this.Cesium.Cartesian3.fromDegrees(position.lon,position.lat,position.height),hpr),new this.Cesium.Cartesian3(0.0, 0.0, -(length / 2)), // 设置顶点new this.Cesium.Matrix4());// 修改圆锥姿态model.geometryInstances.modelMatrix = modelMatrix}
}

2.初始化类

// 初始化类
let cone = new Cone(viewer, Cesium);

3.创建圆锥

  // 绘制圆锥me.cone.add({length: 10000,heading: 0,pitch: 90,roll: 0,color: "rgba(0, 255, 0, 1)",bottomRadius: 1500,position: {lon: 110.82474250408677,lat: 22.095133670052277,height: 8000,},});// 绘制圆锥me.cone.add({length: 10000,heading: 45,pitch: 90,roll: 0,color: "rgba(255, 0, 0, 1)",bottomRadius: 1500,position: {lon: 110.82474250408677,lat: 22.095133670052277,height: 8000,},});// 绘制圆锥me.cone.add({length: 10000,heading: 90,pitch: 90,roll: 0,color: "rgba(0, 255, 0, 1)",bottomRadius: 1500,position: {lon: 110.82474250408677,lat: 22.095133670052277,height: 8000,},});// 绘制圆锥me.cone.add({length: 10000,heading: 135,pitch: 90,roll: 0,color: "rgba(255, 0, 0, 1)",bottomRadius: 1500,position: {lon: 110.82474250408677,lat: 22.095133670052277,height: 8000,},});// 绘制圆锥me.cone.add({length: 10000,heading: 180,pitch: 90,roll: 0,color: "rgba(0, 255, 0, 1)",bottomRadius: 1500,position: {lon: 110.82474250408677,lat: 22.095133670052277,height: 8000,},});// 绘制圆锥me.cone.add({length: 10000,heading: 225,pitch: 90,roll: 0,color: "rgba(255, 0, 0, 1)",bottomRadius: 1500,position: {lon: 110.82474250408677,lat: 22.095133670052277,height: 8000,},});// 绘制圆锥me.cone.add({length: 10000,heading: 270,pitch: 90,roll: 0,color: "rgba(0, 255, 0, 1)",bottomRadius: 1500,position: {lon: 110.82474250408677,lat: 22.095133670052277,height: 8000,},});// 绘制圆锥me.cone.add({length: 10000,heading: 315,pitch: 90,roll: 0,color: "rgba(255, 0, 0, 1)",bottomRadius: 1500,position: {lon: 110.82474250408677,lat: 22.095133670052277,height: 8000,},});

4.更新圆锥

// 绘制圆锥
let coneModel = me.cone.add({length: 10000,heading: 315,pitch: 90,roll: 0,color: "rgba(255, 0, 0, 1)",bottomRadius: 1500,position: {lon: 110.82474250408677,lat: 22.095133670052277,height: 8000,},
});// 更新圆锥
cone.update({model: coneModel,length: 10000,heading: 315,pitch: 90,roll: 0,position: {lon: 110.82474250408677,lat: 22.095133670052277,height: 8000,},
});