Cesium动态线、水流线效果

最新推荐文章于 2024-09-09 09:44:56 发布

xt3d

最新推荐文章于 2024-09-09 09:44:56 发布

阅读量1.1w

点赞数 6

文章标签： javascript gis

本文链接：https://blog.csdn.net/xietao20/article/details/107746939

版权

Cesium 专栏收录该内容

86 篇文章 90 订阅

订阅专栏

Cesium动态线、水流线效果

可用于消防救援预案系统消防水管水流等效果

效果图

在这里插入图片描述

关键代码

// 动态线材质

function PolylineTrailLinkMaterialProperty(color, duration) {
    this._definitionChanged = new Cesium.Event();
    this._color = undefined;
    this._colorSubscription = undefined;
    this.color = color;
    this.duration = duration;
    this._time = (new Date()).getTime();
}

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;
    return result;
}

PolylineTrailLinkMaterialProperty.prototype.equals = function(other) {
    return this === other ||
        (other instanceof PolylineTrailLinkMaterialProperty &&
            Cesium.Property.equals(this._color, other._color))

}

Cesium.PolylineTrailLinkMaterialProperty = PolylineTrailLinkMaterialProperty;
Cesium.Material.PolylineTrailLinkType = 'PolylineTrailLink';
Cesium.Material.PolylineTrailLinkImage = "../../static/images/effects/water.png";
Cesium.Material.PolylineTrailLinkSource =...
Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineTrailLinkType, {
    fabric: {
        type: Cesium.Material.PolylineTrailLinkType,
        uniforms: {
            color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
            image: Cesium.Material.PolylineTrailLinkImage,
            time: 20
        },
        source: Cesium.Material.PolylineTrailLinkSource
    },
    translucent: function(material) {
        return true;
    }
});

let line = this.viewer.entities.add({
            name: 'PolylineTrail',
            polyline: {
                positions: positions,
                width: 8,
                material: new Cesium.PolylineTrailLinkMaterialProperty(Cesium.Color.fromCssColorString("#0BFF0D"), 10000),
                clampToGround: true
            }
        });