显示源代码
流动线特效
 开发文档
            <!DOCTYPE html>

<html>
<head>
    <meta charset='UTF-8'/>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <link href='http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/Widgets/widgets.css' rel='stylesheet'/>
    <script src='http://ua.bigemap.com:30081/bmsdk/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #container {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }

        .bmgl-widget-credits {
            display: none
        }
    </style>
    <title>part_test</title>
</head>
<body>
<div id='container'></div>
<script>
    bmgl.Config.HTTP_URL = 'http://ua.bigemap.com:30081/bmsdk/';
    var viewer = new bmgl.Viewer('container', {mapId: 'bigemap.dc-tian-w-satellite', requestRenderMode: false});

    //不启用地形遮挡
    viewer.scene.globe.depthTestAgainstTerrain = false;

    function PolylineTrailLinkMaterialProperty(color, duration, d) {
        this._definitionChanged = new bmgl.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;
        }
    }

    //创建材质类。
    bmgl.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {
        isConstant: {
            get: function () {
                return false;
            }
        },
        definitionChanged: {
            get: function () {
                return this._definitionChanged;
            }
        },
        color: bmgl.createPropertyDescriptor('color')
    });
    PolylineTrailLinkMaterialProperty.prototype.getType = function (time) {
        return 'PolylineTrailLink';
    }
    PolylineTrailLinkMaterialProperty.prototype.getValue = function (time, result) {
        if (!bmgl.defined(result)) {
            result = {};
        }
        result.color = bmgl.Property.getValueOrClonedDefault(this._color, time, bmgl.Color.WHITE, result.color);
        result.image = bmgl.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可以更改纹理流动方向。
   
    bmgl.PolylineTrailLinkMaterialProperty = PolylineTrailLinkMaterialProperty;
    bmgl.Material.PolylineTrailLinkType = 'PolylineTrailLink';
    bmgl.Material.PolylineTrailLinkImage = "/bmgl/images/线动图片.png";
    bmgl.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\
                                                        }";

    // 向bmgl.Material中添加刚刚新建好的纹理
    bmgl.Material._materialCache.addMaterial(bmgl.Material.PolylineTrailLinkType, {
        fabric: {
            type: bmgl.Material.PolylineTrailLinkType,
            uniforms: {
                color: new bmgl.Color(0.0, 0.0, 1.0, 0.5),
                image: bmgl.Material.PolylineTrailLinkImage,
                time: -20
            },
            source: bmgl.Material.PolylineTrailLinkSource
        },
        translucent: function (material) {
            return true;
        }
    });


    var glowingLine = viewer.entities.add({
        name: 'Glowing blue line on the surface',
        polyline: {
            positions: bmgl.Cartesian3.fromDegreesArray([-75, 37,
                -125, 37]),
            width: 10,
            material: new bmgl.PolylineTrailLinkMaterialProperty(bmgl.Color.WHITE, 3000, 1)
        }
    });

    viewer.flyTo(viewer.entities);
</script>
</body>
</html>