cesium实现道路闪烁线效果_cesium 闪光路线

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

1.实现效果

2.实现方法

2.1实现思路

通过修改线的materialProperty材质实现，根据时间变化动态设置透明度。

2.2具体代码

2.2.1材质

将材质封装为lineFlickerMaterialProperty.js，代码如下：

/*
 * @Description: 闪烁线材质
 * @Version: 1.0
 * @Author: Julian
 * @Date: 2022-03-30 16:40:09
 * @LastEditors: Julian
 * @LastEditTime: 2022-03-30 17:22:04
 */
class LineFlickerMaterialProperty {
    constructor(options) {
        this._definitionChanged = new Cesium.Event();
        this._color = undefined;
        this._speed = undefined;
        this.color = options.color;
        this.speed = options.speed;
    };

    get isConstant() {
        return false;
    }

    get definitionChanged() {
        return this._definitionChanged;
    }

    getType(time) {
        return Cesium.Material.LineFlickerMaterialType;
    }

    getValue(time, result) {
        if (!Cesium.defined(result)) {
            result = {};
        }

        result.color = Cesium.Property.getValueOrDefault(this._color, time, Cesium.Color.RED, result.color);
        result.speed = Cesium.Property.getValueOrDefault(this._speed, time, 5.0, result.speed);
        return result
    }

    equals(other) {
        return (this === other ||
            (other instanceof LineFlickerMaterialProperty &&
                Cesium.Property.equals(this._color, other._color) &&
                Cesium.Property.equals(this._speed, other._speed))
        )
    }
}

Object.defineProperties(LineFlickerMaterialProperty.prototype, {
    color: Cesium.createPropertyDescriptor('color'),
    speed: Cesium.createPropertyDescriptor('speed'),
})

Cesium.LineFlickerMaterialProperty = LineFlickerMaterialProperty;
Cesium.Material.LineFlickerMaterialProperty = 'LineFlickerMaterialProperty';
Cesium.Material.LineFlickerMaterialType = 'LineFlickerMaterialType';
Cesium.Material.LineFlickerMaterialSource =
    `
uniform vec4 color;
uniform float speed;
czm_material czm_getMaterial(czm_materialInput materialInput){
  czm_material material = czm_getDefaultMaterial(materialInput);
  float time = fract( czm_frameNumber  *  speed / 1000.0);
  vec2 st = materialInput.st;
  float scalar = smoothstep(0.0,1.0,time);
  material.diffuse = color.rgb * scalar;
  material.alpha = color.a * scalar ;
  return material;
}
`

Cesium.Material._materialCache.addMaterial(Cesium.Material.LineFlickerMaterialType, {
    fabric: {
        type: Cesium.Material.LineFlickerMaterialType,
        uniforms: {
            color: new Cesium.Color(1.0, 0.0, 0.0, 1.0),
            speed: 5.0,
        },
        source: Cesium.Material.LineFlickerMaterialSource
    },
    translucent: function(material) {
        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

2.2.2调用

引入材质js文件后，加载道路线状文件，并设置其材质即可。调用代码如下：

// 道路闪烁线
Cesium.GeoJsonDataSource.load("../data/road_railway.geojson").then(function(dataSource) {
    viewer.dataSources.add(dataSource);
    const entities = dataSource.entities.values;
    // 聚焦
    viewer.zoomTo(entities);
    for (let i = 0; i < entities.length; i++) {
        let entity = entities[i];
        entity.polyline.width = 3.0;
        // 设置材质
        entity.polyline.material = new Cesium.LineFlickerMaterialProperty({
            color: Cesium.Color.YELLOW,
            // 设置随机变化速度
            speed: 20 * Math.random(),
        })
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17