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

// 全局事件派发器
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
                });
            }
        });
    });
}