Cesium实现流动线/动态纹理_cesium流动纹理

作者：从前慢现在也慢 | 2024-02-18 17:56:52

踩

cesium流动纹理

2024-1-11更新

由于ceisum的更新和自己的懒惰，导致下载的示例一直有问题，没想到这个功能这么多人看，现在把修改好的代码放上来，注意把浏览器设置为跨域！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>流动线</title>
    <link href="http://support.supermap.com.cn:8090/iserver/iClient/for3D/webgl/zh/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <script src="http://support.supermap.com.cn:8090/iserver/iClient/for3D/webgl/zh/Build/Cesium/Cesium.js"></script>
</head>
<body class="loading">
<div id="cesiumContainer"></div>

<script>
    
        var viewer = new Cesium.Viewer('cesiumContainer');
        function PolylineTrailLinkMaterialProperty(color, duration,d) {
            this._definitionChanged = new Cesium.Event();
            this._color = undefined;
            this._colorSubscription = undefined;
            this.color = color;
            this.duration = duration || 3000;
            this._time = (new Date()).getTime();
            this._d=d;
            this.isTranslucent = function () {
                return true;
            }
        }
        Object.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {
             isConstant: {
                get: function () {
                     return false;
                }
            },
            definitionChanged: {
                get: function () {
                    return this._definitionChanged;
                }
            },
            color: Cesium.createPropertyDescriptor('color')
        });
        PolylineTrailLinkMaterialProperty.prototype.getType = function (time) {
            return 'PolylineTrailLink';
        }
        PolylineTrailLinkMaterialProperty.prototype.getValue = function (time, result) {
            if (!Cesium.defined(result)) {
                result = {};
            }
            result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
            result.image = Cesium.Material.PolylineTrailLinkImage;
            result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration*this._d;
            return result;
        }
        PolylineTrailLinkMaterialProperty.prototype.equals = function (other) {
            return this === other ||
                (other instanceof PolylineTrailLinkMaterialProperty &&
                    Property.equals(this._color, other._color))
        }
        Cesium.PolylineTrailLinkMaterialProperty = PolylineTrailLinkMaterialProperty;
        Cesium.Material.PolylineTrailLinkType = 'PolylineTrailLink';
        Cesium.Material.PolylineTrailLinkImage = "https://upload-images.jianshu.io/upload_images/6957972-c5f879cd86b79dfd.png?imageMogr2/auto-orient/strip|imageView2/2/w/512";
        Cesium.Material.PolylineTrailLinkSource = " czm_material czm_getMaterial(czm_materialInput materialInput)\n\
                                                        {\n\
                                                            czm_material material = czm_getDefaultMaterial(materialInput);\n\
                                                            vec2 st = materialInput.st;\n\
                                                            vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));\n\
                                                            material.alpha = colorImage.a * color.a;\n\
                                                            material.diffuse = (colorImage.rgb+color.rgb)/2.0;\n\
                                                            return material;\n\
                                                        }";
        Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineTrailLinkType, {
            fabric: {
                type: Cesium.Material.PolylineTrailLinkType,
                uniforms: {
                    color: new Cesium.Color(0.0, 0.0, 1.0, 0.5),
                    image: Cesium.Material.PolylineTrailLinkImage,
                    time: -20
                },
                source: Cesium.Material.PolylineTrailLinkSource
            },
            translucent: function (material) {
                return true;
            }
        });
       
        let item = viewer.entities.add({
            name: 'PolylineTrail',
            polygon: {
                hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
                    50, 30, 250000,
                    60 , 30, 250000,
                    60 , 32, 250000,
                    50, 32, 250000,
                ]),
                width: 15,
                material: new Cesium.PolylineTrailLinkMaterialProperty(Cesium.Color.WHITE, 3000,1)
            }
        });
        let item2 = viewer.entities.add({
            name: 'PolylineTrail2',
            polygon: {
                hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
                    80, 30, 250000,
                    60 , 30, 250000,
                    60 , 32, 250000,
                    80, 32, 250000,
                ]),
                width: 15,
                material: new Cesium.PolylineTrailLinkMaterialProperty(Cesium.Color.WHITE, 3000,-1)
            }
        });
   
</script>
</body>
</html>
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

之前主要以超图Webgl使用为主，后面由于一些原因，主要分享cesium的使用心得

在使用cesium的时候，常常需要一些动态效果，例如人口迁徙图，管线流动图等，但是cesium示例中没有类似的示例，想要实现的话，最好通过纹理来实现。

创建纹理

cesium中的有很多内置好的纹理，具体可以参考最下面参考文章中的第一个链接，具体关于纹理相关的基础知识，也可以在其中了解到。

创建材质类。

function PolylineTrailLinkMaterialProperty(color, duration,d) {
    this._definitionChanged = new Cesium.Event();
    this._color = undefined;
    this._colorSubscription = undefined;
    this.color = color;
    this.duration = duration || 3000;
    this._time = (new Date()).getTime();
    this._d=d;
    this.isTranslucent = function () {
        return true;
    }
}
Cesium.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {
     isConstant: {
        get: function () {
             return false;
        }
    },
    definitionChanged: {
        get: function () {
            return this._definitionChanged;
        }
    },
    color: Cesium.createPropertyDescriptor('color')
});
PolylineTrailLinkMaterialProperty.prototype.getType = function (time) {
    return 'PolylineTrailLink';
}
PolylineTrailLinkMaterialProperty.prototype.getValue = function (time, result) {
    if (!Cesium.defined(result)) {
        result = {};
    }
    result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
    result.image = Cesium.Material.PolylineTrailLinkImage;
    result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration*this._d;
    return result;
}
PolylineTrailLinkMaterialProperty.prototype.equals = function (other) {
    return this === other ||
        (other instanceof PolylineTrailLinkMaterialProperty &&
            Property.equals(this._color, other._color))
}
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

设置纹理图片（PolylineTrailLinkImage ），纹理类型（PolylineTrailLinkType ），纹理资源（PolylineTrailLinkSource ）,其中texture2D(image, vec2(fract(st.s - time), st.t));修改对应的st.s或者st.t可以更改纹理流动方向。

Cesium.PolylineTrailLinkMaterialProperty = PolylineTrailLinkMaterialProperty;
Cesium.Material.PolylineTrailLinkType = 'PolylineTrailLink';
Cesium.Material.PolylineTrailLinkImage = "https://upload-images.jianshu.io/upload_images/6957972-c5f879cd86b79dfd.png?imageMogr2/auto-orient/strip|imageView2/2/w/512";
Cesium.Material.PolylineTrailLinkSource = " czm_material czm_getMaterial(czm_materialInput materialInput)\n\
                                                        {\n\
                                                            czm_material material = czm_getDefaultMaterial(materialInput);\n\
                                                            vec2 st = materialInput.st;\n\
                                                            vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));\n\
                                                            material.alpha = colorImage.a * color.a;\n\
                                                            material.diffuse = (colorImage.rgb+color.rgb)/2.0;\n\
                                                            return material;\n\
                                                        }";
1
2
3
4
5
6
7
8
9
10
11
12

向Cesium.Material中添加刚刚新建好的纹理。

Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineTrailLinkType, {
   fabric: {
        type: Cesium.Material.PolylineTrailLinkType,
        uniforms: {
            color: new Cesium.Color(0.0, 0.0, 1.0, 0.5),
            image: Cesium.Material.PolylineTrailLinkImage,
            time: -20
        },
        source: Cesium.Material.PolylineTrailLinkSource
    },
    translucent: function (material) {
        return true;
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

使用纹理绘制线/面

上文中已经将material创建到cesium中，接下来在viewer.entities.add();添加数据时直接使用即可，下面是在面（polygon）数据中使用纹理

 let item = viewer.entities.add({
     name: 'PolylineTrail',
      polygon: {
          hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
              50, 30, 250000,
              60 , 30, 250000,
              60 , 32, 250000,
              50, 32, 250000,
          ]),
          width: 15,
          material: new Cesium.PolylineTrailLinkMaterialProperty(Cesium.Color.WHITE, 3000,1)
      }
 });
1
2
3
4
5
6
7
8
9
10
11
12
13

效果图/示例

在这里插入图片描述示例下载链接：https://download.csdn.net/download/weixin_42066016/12318987
依赖和资源都是网上的，下载后应该是可以直接打开显示的。

主要参考文章：
https://www.jianshu.com/p/f8fee864379a
https://www.jianshu.com/p/193b8ea734cd
http://blog.sina.com.cn/s/blog_15e866bbe0102yjdy.html
http://cesium.xin/wordpress/archives/cesium-dynamic-entity.html

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】