Cesium实现流动线/动态纹理

之前主要以超图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))
}

设置纹理图片（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\
                                                        }";

向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;
    }
});

使用纹理绘制线/面

上文中已经将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)
      }
 });

效果图/示例

示例下载链接：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