[cesium] 卫星雷达传感器,雷达探测效果 |
您所在的位置：网站首页 › 扇形效果 › [cesium] 卫星雷达传感器,雷达探测效果 |
[cesium] 卫星雷达传感器,雷达探测效果
|
前言
整理了一下关于卫星视锥和雷达测控的三维效果。 包含视锥体,传感器,扫描探测等效果 修改部分插件，支持最新版cesium 效果相控雷达传感器
球形相控雷达传感器
卫星传感波
卫星视锥
雷达跟踪
雷达探测网
雷达探测
雷达测控
空间网
卫星雷达波效果示例 /** * 卫星雷达波 */ _installProbingPrimitive: function () { var DEF_OPT = { color: new Cesium.Color(1.0, 0.0, 1.0, 0.8), repeat: 30.0, offset: 0.0, thickness: 0.3, center: Cesium.Cartesian3.fromDegrees(116.39, 39.9), length: 400000.0, bottom: 1000, top: 0.0 } var viewer = this._viewer; /** * * @param {*} option */ function ProbingPrimitive(option) { this._viewer = viewer this._length = option.length || DEF_OPT.length this._center = option.center || DEF_OPT.center this._color = option.color || DEF_OPT.color this._repeat = option.repeat || DEF_OPT.repeat this._offset = option.offset || DEF_OPT.offset this._thickness = option.thickness || DEF_OPT.thickness this._bottom = option.bottom || DEF_OPT.bottom this._top = option.top || DEF_OPT.top this._radar = undefined this.build() } ProbingPrimitive.prototype.build = function () { var cylinderGeometry = new Cesium.CylinderGeometry({ length: this._length, topRadius: this._top, bottomRadius: this._bottom, vertexFormat: Cesium.MaterialAppearance.MaterialSupport.TEXTURED.vertexFormat }), redCone = new Cesium.GeometryInstance({ geometry: cylinderGeometry, modelMatrix: this.getModelMatrix(), }), appearance = new Cesium.MaterialAppearance({ material: this.getMaterial(), faceForward: false, closed: true }), $this = this; this._radar = this._viewer.scene.primitives.add( new Cesium.Primitive({ geometryInstances: [redCone], appearance: appearance })); //监听渲染事件 动态修改雷达材质中的offset变量 从而实现动态效果 this._viewer.scene.preUpdate.addEventListener(function () { var offset = $this._radar.appearance.material.uniforms.offset; offset -= 0.001; if (offset > 1.0) { offset = 0.0; } $this._radar.appearance.material.uniforms.offset = offset; }) } ProbingPrimitive.prototype.getModelMatrix = function () { return Cesium.Matrix4.multiplyByTranslation( //转换矩阵 Cesium.Transforms.eastNorthUpToFixedFrame(this._center), //矩阵 new Cesium.Cartesian3(0.0, 0.0, this._length * 0.5), //要转换的笛卡尔坐标 new Cesium.Matrix4() //返回新的矩阵 ); } ProbingPrimitive.prototype.updateModelMatrix = function (position) { } ProbingPrimitive.prototype.getMaterial = function () { var materialSource = `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 * color.a; return material; }` return new Cesium.Material({ fabric: { type: 'radarPrimitive', uniforms: { //动态传递参数 color: this._color, repeat: this._repeat, offset: this._offset, thickness: this._thickness, }, source: materialSource }, translucent: false }) } ProbingPrimitive.prototype.remove = function () { if (this._radar) { this._viewer.scene.primitives.remove(this._radar) } } Cesium.ProbingPrimitive = ProbingPrimitive; } 直接调用 // 在引入的cesiumJS下面引入d3kit插件 // 初始化 Cesium.Viewer let viewer = new Cesium.Viewer("d3map"); // 初始化 d3kit let d3kit = new Cesium.D3Kit(viewer) let opt = { color: new Cesium.Color(1.0, 0.0, 1.0, 0.8), epeat: 30.0, offset: 0.0, thickness: 0.3, center: Cesium.Cartesian3.fromDegrees(116.39, 39.9), length: 400000.0, bottom: 1000, top: 0.0 } let probing = new Cesium.ProbingPrimitive(opt)
|
【本文地址】