智慧城市交通的要素：路口监管可视化系统的解决方案

而关于管道动画的实现上，基于 ht.Default.startAnim() 封装了一个 move 的动画函数是节点沿着路径平滑移动的封装函数，主要参数为：

• node：动画节点；
• path：运行路径；
• duration：动画执行调度时间;
• animParams：动画参数；

通过绘制一条运行路线的管道，ht.Default.getLineCacheInfo() 得到这条管道的点位和分割信息 cache，然后管道信息通过 ht.Default.getLineLength() 得到管道的长度，并且通过 ht.Default.getLineOffset() 来获取连线或者管道指定比例的偏移信息，从而达到移动的效果，是为了通过 node.lookAtX() 来获取节点下一个面对的朝向的位置信息，并设置节点此时的位置，从而达到节点沿着路径平滑移动的效果。

move(node, path, duration = 20000, animParams) {
    // path._cache_ 里面存着管道的节点信息
    let cache = path._cache_; 
    // 如果没有缓存信息，则获取 path._cache_ 里面存着管道的节点信息
    if (!cache) {
        cache = path._cache_ = ht.Default.getLineCacheInfo(path.getPoints(), path.getSegments());
    }
    // 获取管道缓存信息的长度
    const len = ht.Default.getLineLength(cache);
    // 设置动画对象初始化
    animParams = animParams || {};
    // 设置 action 为 animParams 的动画执行函数
    const action = animParams.action;
    // 动画执行部分
    animParams.action = (v, t) => {
        // 获取管道运动的偏移信息
        const offset = ht.Default.getLineOffset(cache, len * v);
        // 获取偏移位置上的点
        const point = offset.point;
        // 设置节点看向的下一个位置
        node.lookAtX([point.x, point.y, point.z], "forward ");
        // 设置节点的位置
        node.p3(point.x, point.y, point.z);
        // 判断动画是否执行完
        if (action) action();
    };
    // 循环调用动画执行函数
    return loop(animParams.action, duration);
}

// 循环动画函数
loop(action, duration) {
    return ht.Default.startAnim({
        duration: duration,
        action: action
    });
}

// 全局事件派发器
var G = {}
window.G = G;
G.event = new ht.Notifier();

handleInteractive(e) {
    const {kind, data} = e;
    if(kind === 'clickData') {
        // 判断点击节点是否带有标签，没有标签则 return
        let tag = data.getTag();
        if(!tag) return;
        // 判断标签名为摄像头
        if(tag.indexOf('camera') >= 0) {
            // 设置指定上一个点击的摄像头和当前点击的摄像头
            this.lastClickCamera = this.nowClickCamera;
            this.nowClickCamera = data;
            // 如果之前有点击摄像头，则初始化摄像头锥体的大小
            if (this.lastClickCamera !== null) {
                let clickRangeNode = this.lastClickCamera.getChildren()._as[0];
                clickRangeNode.s3(300, 150, 500);
            }
            // 如果有点击摄像头，则设定所点击摄像头锥体的大小
            if (this.nowClickCamera !== null) {
                let clickRangeNode = this.nowClickCamera.getChildren()._as[0];
                clickRangeNode.s3(5, 5, 500);
            }
            // 获取点击摄像头的位置信息
            var cameraP3 = nowClickCamera.p3();
            // 获取点击摄像头的旋转信息
            var cameraR3 = nowClickCamera.r3();
            // 获取点击摄像头的大小信息
            var cameraS3 = nowClickCamera.s3();
            // 当前锥体起始位置
            var realP3 = [cameraP3[0], cameraP3[1] + cameraS3[1] / 2, cameraP3[2] + cameraS3[2] / 2]; 
            // 将当前眼睛位置绕着摄像头起始位置旋转得到正确眼睛位置
            var realEye = getCenter(cameraP3, realP3, cameraR3); 
            // 全局事件派发至摄像头场景改变视角的眼睛 eye 和中心点 center
            G.event.fire({
                type: 'videoCreated',
                eye: realEye,
                center: getCenter(realEye, [realEye[0], realEye[1] ,realEye[2] + 5], cameraR3)
            });

            // 视频弹窗显示派发
            event.fire(SHOW_VIDEO, {g3dDm: this.g3dDm, cameraName:tag});
        }
    }
    // 双击背景隐藏摄像头场景窗口，并初始化摄像头锥体的大小
    if(kind === 'doubleClickBackground') {
        // 视频弹窗隐藏派发
        event.fire(HIDE_VIDEO);
        // 如果之前有点击摄像头，则初始化摄像头锥体的大小
        if (this.nowClickCamera !== null) {
            let clickRangeNode = this.nowClickCamera.getChildren()._as[0];
            clickRangeNode.s3(300, 150, 500)
        }
        // 设置当前点击摄像头为空
        this.nowClickCamera = null;
    }
}

// pointA 为 pointB 围绕的旋转点
// pointB 为需要旋转的点
// r3 为旋转的角度数组 [xAngle, yAngle, zAngle] 为绕着 x, y, z 轴分别旋转的角度 
const getCenter = function(pointA, pointB, r3) {
    const mtrx = new ht.Math.Matrix4();
    const euler = new ht.Math.Euler();
    const v1 = new ht.Math.Vector3();
    const v2 = new ht.Math.Vector3();

    mtrx.makeRotationFromEuler(euler.set(r3[0], r3[1], r3[2]));

    v1.fromArray(pointB).sub(v2.fromArray(pointA));
    v2.copy(v1).applyMatrix4(mtrx);
    v2.sub(v1);

    return [pointB[0] + v2.x, pointB[1] + v2.y, pointB[2] + v2.z];
};

// 引入 video.js 插件
<script src="./js/video.js"></script>

// 通过全局事件派发到渲染元素 renderHTML 去渲染视频到场景图纸中
G.event.add(function(e){
    if(e.type==='videoCreated'){
        var div=e.div;
        div.innerHTML='<video id="video" class="video-js vjs-default-skin"><source src="rtmp://10.10.70.57/live/test" type="rtmp/flv"></video>';
        window.player = videojs('video');
    }
});

addTableRow() {
    // 获取表格节点
    let table = this.table;
    // 通过 axios 的 promise 请求接口数据
    axios.get('getEvent').then(res => {
        // 获取表格节点滚动信息的数据绑定
        let tableData = table.a('dataSource');
        // 通过向 unshift() 方法可向滚动信息数组的开头添加一个或更多元素
        tableData.unshift(res);
        // 初始化表格的纵向偏移
        table.a('ty', -54);
        // 开启表格滚动动画
        ht.Default.startAnim({
            duration: 600,
            // 动画执行函数 action
            action: (v, t) => {
                table.a({
                    // 通过添加数据后，横向滚动 100
                    'firstRowTx': 100 * (1 - v),
                    // 第一行行高出现的透明度渐变效果
                    'firstRowOpacity': v,
                    // 纵向偏移 54 的高度
                    'ty': (v - 1) * 54
                });
            }
        });
    });
}