cesium实现线圈发光效果_cesium 箭头线 materialproperty

Cesium实战系列文章总目录： 传送门

1.实现效果

2.实现方法

2.1调用

引入js文件后，直接调用即可，设置其名称、中心点坐标、颜色、半径和速度等参数即可。

// 线圈发光扩散
let scanLine1 = new Scanline(viewer, "scanLine1");
scanLine1.add([113.923, 22.536, 0], "#CE1374", 1200, 15);
1
2
3

2.2 库文件

参考gitee上开源代码

Effect类文件可参考上一篇博文：传送门

/**
 * 线圈发光效果
 * 包括发光材质scanlineMaterialProperty和类scanline.js
 */

// 线圈发光扩散效果
class Scanline extends Effect {
    constructor(viewer, id) {
        super(viewer, id)
    }
    change_duration(d) {
        super.change_duration(d)
        const curEntity = this.viewer.entities.getById(this.id)
        curEntity._ellipse._material.speed = d
    }
    add(position, color, maxRadius, speed, isedit = false) {
        super.add(position, color, maxRadius, speed, isedit)
        const _this = this
        this.viewer.entities.add({
            id: _this.id,
            position: Cesium.Cartesian3.fromDegrees(
                position[0],
                position[1],
                position[2]
            ),
            ellipse: {
                semiMinorAxis: new Cesium.CallbackProperty(function(n) {
                    return _this.maxRadius
                }, false),
                semiMajorAxis: new Cesium.CallbackProperty(function(n) {
                    return _this.maxRadius
                }, false),
                material: new Cesium.ScanlineMaterialProperty(
                    new Cesium.Color.fromCssColorString(color),
                    speed
                ),
                classificationType: Cesium.ClassificationType.BOTH,
            },
        })
    }
}


function ScanlineMaterialProperty(color, speed) {
    this._definitionChanged = new Cesium.Event()
    this.color = color || Cesium.Color.YELLOW
    this.speed = speed || 10
}

Object.defineProperties(ScanlineMaterialProperty.prototype, {
    isConstant: {
        get: function() {
            return false
        },
    },
    definitionChanged: {
        get: function() {
            return this._definitionChanged
        },
    },
    color: Cesium.createPropertyDescriptor('color'),
    speed: Cesium.createPropertyDescriptor('speed'),
})

ScanlineMaterialProperty.prototype.getType = function(_time) {
    return Cesium.Material.ScanlineType
}
ScanlineMaterialProperty.prototype.getValue = function(
    time,
    result
) {
    if (!Cesium.defined(result)) {
        result = {}
    }
    result.color = Cesium.Property.getValueOrClonedDefault(
        this._color,
        time,
        Cesium.Color.WHITE,
        result.color
    )
    result.speed = this.speed
    return result
}

ScanlineMaterialProperty.prototype.equals = function(other) {
    const reData =
        this === other ||
        (other instanceof ScanlineMaterialProperty &&
            Cesium.Property.equals(this.color, other.color) &&
            Cesium.Property.equals(this.speed, other.speed))
    return reData
}
Cesium.ScanlineMaterialProperty = ScanlineMaterialProperty
Cesium.Material.ScanlineType = 'Scanline'
Cesium.Material.ScanlineSource = `
  uniform vec4 color;
  uniform float speed;
  float circle(vec2 uv, float r, float blur) {
    float d = length(uv) * 1.0; /* 2.0 */
    float c = smoothstep(r+blur, r, d);
    return c;
  }
  czm_material czm_getMaterial(czm_materialInput materialInput)
  {
    czm_material material = czm_getDefaultMaterial(materialInput);
    vec2 st = materialInput.st - 0.5;
    material.diffuse = 2.8 * color.rgb;
    material.emission = vec3(0);
    float t = fract(czm_frameNumber * (11000.0 - speed) / 500000.0);
    float s = 0.3;
    float radius1 = smoothstep(.0, s, t) * 0.5;
    float alpha1 = circle(st, radius1, 0.01) * circle(st, radius1, -0.01);
    float alpha2 = circle(st, radius1, 0.01 - radius1) * circle(st, radius1, 0.01);
    float radius2 = 0.5 + smoothstep(s, 1.0, t) * 0.5;
    float alpha3 = circle(st, radius1, radius2 + 0.01 - radius1) * circle(st, radius1, -0.01);
    material.alpha = smoothstep(1.0, s, t) * (alpha1 + alpha2*0.1 + alpha3*0.1);
    material.alpha *= color.a ;
    return material;
  }
  `
Cesium.Material._materialCache.addMaterial(Cesium.Material.ScanlineType, {
    fabric: {
        type: Cesium.Material.ScanlineType,
        uniforms: {
            color: new Cesium.Color(1, 0, 0, 0.5),
            time: 0,
            speed: 10,
        },
        source: Cesium.Material.ScanlineSource,
    },
    translucent: function(t) {
        return true
    },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134