01-Cesium添加泛光线

javascript 复制代码

/**
 * 泛光线
 */
const addPolylineGlow = function(options){
    let {
        wkt,
        properties = {},
        layerId = 'polylineLayer',
        dialogId,
        strokeColor = 'rgba(255,0,0,1)',
        strokeWidth = 1,
        id='泛光线',
        flicker=false,
        duration = 3,
        changeColor = 'rgba(255,0,0,0.5)',
        zIndex=0,
    } = options || {};
    // 没有图层则创建
    let layerArr = this.viewer.dataSources.getByName(layerId)
    let layer;
    if (layerArr.length == 0) {
        // 未初始化过图层
        const dataSource = new Cesium.CustomDataSource(layerId);
        this.viewer.dataSources.add(dataSource);
        layer = dataSource;
    }else{
        layer = layerArr[0]
    }

    // 线
    let coords = this.typeDataChange({
        type: 'wkt',
        wkt: wkt,
    });
    // 去掉所有的[]括号,并在最外面添加一个[]
    // 使用正则表达式替换所有出现的特定字符 "g" 标志表示全局搜索   
    var newStr = "[" + String(coords).replace(new RegExp("[" + "|" + "]", "g"), "") + "]"
    let newCoords = JSON.parse(newStr)
    let color = strokeColor;
    let entity = {
        id:id,
        polyline: {
            positions: Cesium.Cartesian3.fromDegreesArray(newCoords),
            width:strokeWidth,
            material:new Cesium.PolylineGlowMaterialProperty({
                color: new Cesium.CallbackProperty(function () {
                    return Cesium.Color.fromCssColorString(color);
                }, false),
                glowPower: 0.3
            }),
            clampToGround: true,
            zIndex:zIndex
        },
    }

    properties.layerId = layerId
    properties.dialogId = dialogId
    entity.properties = properties;

    layer.entities.add(entity)

    // 闪烁动画
    if(flicker){
        let time = new Date();
        let dur = duration*1000;
        let count = 0;
        let animate = function(){
            if((new Date() - time)>dur){
                time = new Date();
                ++count;
                if(count%2 == 0){
                    count=0;
                    color = changeColor;
                }else{
                    color = strokeColor;
                }
            }
        }
        this.addAnimationFrame(animate);
        entity.animateFun=animate;
    }
    return entity;
}

export default addPolylineGlow;

这段代码定义了一个名为 addPolylineGlow 的函数，用于在 Cesium 中添加带有泛光效果的折线（Polyline）。以下是对代码的解析：

参数解析：
- options：函数的输入参数，包含多个配置项。
- 默认值设置：
  - wkt：表示线的 WKT（Well-Known Text）格式。
  - properties：自定义属性，默认为空对象。
  - layerId：图层 ID，默认为 'polylineLayer'。
  - dialogId：对话框 ID，默认为 undefined。
  - strokeColor：折线颜色，默认为红色。
  - strokeWidth：折线宽度，默认为 1。
  - id：实体 ID，默认为 '泛光线'。
  - flicker：是否闪烁，默认为 false。
  - duration：闪烁持续时间，默认为 3 秒。
  - changeColor：闪烁时的颜色，默认为半透明红色。
  - zIndex：图层的 z-index，默认为 0。
图层管理：
- 通过 this.viewer.dataSources.getByName(layerId) 获取指定 ID 的图层。
- 如果不存在该图层，则创建一个新的 Cesium.CustomDataSource 实例，并将其添加到 viewer 中。
处理坐标：
- 使用 this.typeDataChange 将 WKT 转换为坐标数组。
- 利用正则表达式去掉多余的括号，并将结果转为数组格式。
实体创建：
- 创建一个包含折线的实体对象 entity，配置折线的坐标、宽度、材质（使用 PolylineGlowMaterialProperty 实现泛光效果）等属性。
添加到图层：
- 将创建的实体添加到图层中。
闪烁动画：
- 如果 flicker 为 true，则添加一个闪烁动画函数。
- 使用 requestAnimationFrame 机制来实现颜色的交替变化。
返回值：
- 返回创建的实体对象 entity。

这段代码有效地将折线的泛光效果与可选的闪烁动画结合起来，适用于在 Cesium 场景中增强视觉效果。