[cesium] 卫星雷达传感器,雷达探测效果

柔情只为你懂 2023-02-13 04:59 21阅读 0赞

### 前言 ###

整理了一下关于卫星视锥和雷达测控的三维效果。

包含视锥体,传感器,扫描探测等效果

修改部分插件，支持最新版cesium

### 效果 ###

相控雷达传感器

![20200527153211762.gif][]

球形相控雷达传感器

![20200527153214401.gif][]

卫星传感波

![20200527163017621.gif][]

卫星视锥

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70][]

雷达跟踪

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 1][]

雷达探测网

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 2][]

雷达探测

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 3][]

雷达测控

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 4][]

空间网

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 5][]

卫星雷达波效果示例

/**
                 * 卫星雷达波
                 */
                _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插件
    <script src="http://zhangticcc.gitee.io/d3kit/d3kit.js"></script>
    <script>
        
     // 初始化 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)
    </script>

[20200527153211762.gif]: https://img-blog.csdnimg.cn/20200527153211762.gif
[20200527153214401.gif]: https://img-blog.csdnimg.cn/20200527153214401.gif
[20200527163017621.gif]: https://img-blog.csdnimg.cn/20200527163017621.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200527152136745.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200527152225521.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200827161920106.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200520165307264.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200520165404704.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200520165437793.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw==,size_16,color_FFFFFF,t_70