新基建下，智慧交通发展新规划：智慧隧道监控可视化系统

// xhrLoad 函数是一个异步加载文件的函数
ht.Default.xhrLoad(‘./scenes/隧道1.json‘, function(text) {
    // 将 json 文件中的文本转为我们需要的 json 格式的内容
    var json = ht.Default.parse(text);
    // 反序列化数据容器，解析用于生成对应的Data对象并添加到数据容器 这里相当于把 json 文件中生成的 ht.Node 节点反序列化到数据容器中，这样数据容器中就有这个节点了
    dm.deserialize(json);
});

dm.each(function(data) {
    // 对“电话”进行批量
    if (data.s(‘front.image‘) === ‘assets/sos电话.png‘){
        data.s(‘batch‘, ‘sosBatch‘);
    }
    // 逃生通道批量（透明度也会影响性能）
    else if (data.s(‘all.color‘) === ‘rgba(222,222,222,0.18)‘) {
        data.s(‘batch‘, ‘emergencyBatch‘);
    }
    else if (data.s(‘shape3d‘) === ‘models/隧道/摄像头.json‘ || data.s(‘shape3d‘) === ‘models/隧道/横洞.json‘ || data.s(‘shape3d‘) === ‘models/隧道/卷帘门.json‘) {
        // 个别摄像头染色了 不做批量
        if(!data.s(‘shape3d.blend‘))
            // 基础批量什么也不做
            data.s(‘batch‘, ‘basicBatch‘);
    }
    else if (data.s(‘shape3d‘) === ‘models/大型变压器/变压器.json‘) {    
        data.s(‘batch‘, ‘tileBatch‘);
        data.setToolTip(‘单击漫游，双击车祸地点出现图标‘);
    }
    else if (data.getDisplayName() === ‘地面‘) {
        // 设置隧道“地面”不可选中
        data.s(‘3d.selectable‘, false);
    }
    else if (data.s(‘shape3d‘) === ‘models/隧道/排风.json‘) {
        // 排风扇的模型比较复杂，所以做批量
        data.s(‘batch‘, ‘fanBatch‘);
    }
    else if (data.getDisplayName() === ‘arrow‘) {
        // 隧道两旁的箭头路标
        if (data.getTag() === ‘arrowLeft‘) data.s(‘shape3d.image‘, ‘displays/abc.png‘);
        else data.s(‘shape3d.image‘, ‘displays/abc2.png‘);
        data.s({
            ‘shape3d‘: ‘billboard‘,
            // 缓存，设置了 cache 的代价是需要设置 invalidateShape3dCachedImage
            ‘shape3d.image.cache‘: true,
            // 设置这个值，图片上的锯齿就不会太明显了（若图片类型为 json，则设置 shape3d.dynamic.transparent)
            ‘shape3d.transparent‘: true 
        });
        g3d.invalidateShape3dCachedImage(data);
    }
    // 隧道入口处的情报板
    else if (data.getTag() === ‘board‘ || data.getTag() === ‘board1‘) {
        // 业务属性，用来控制文本的位置[x,y,width,height]
        data.a(‘textRect‘, [0, 2, 244, 46]); 
        // 业务属性，设置文本内容
        data.a(‘limitText‘, ‘限速80，请开车灯‘);
        var min = -245;
        var name = ‘board‘ + data.getId();
        window[name] = setInterval(function() {
            // 设置情报板中的文字向左滚动，并且当文字全部显示时重复闪烁三次
            circleFunc(data, window[name], min);
        }, 100);
    }

    //给逃生通道上方的指示板 动态设置颜色
    var infos = [‘人行横洞1‘, ‘人行横洞2‘, ‘人行横洞3‘, ‘人行横洞4‘, ‘车行横洞1‘, ‘车行横洞2‘, ‘车行横洞3‘];
    infos.forEach(function(info) {
        if(data.getDisplayName() === info) {
            data.a(‘emergencyColor‘, ‘rgb(138, 138, 138)‘);
        }
    });

    infos = [‘车道指示器‘, ‘车道指示器1‘, ‘车道指示器2‘, ‘车道指示器3‘];
    infos.forEach(function(info) {
        if (data.getDisplayName() === info) {
            // 考虑到性能问题 将六面体变换为 billboard 类型元素
            createBillboard(data, ‘assets/车道信号-过.png‘, ‘assets/车道信号-过.png‘, info);
        }
    });
});

// 设置情报板中的文字向左滚动，并且当文字全部显示时重复闪烁三次
function circleFunc(data, timer, min) {
    // 获取当前业务属性 limitText 的内容
    var text = data.a(‘limitText‘);
    // 设置业务属性 textRect 文本框的坐标和大小
    data.a(‘textRect‘, [data.a(‘textRect‘)[0]-5, 2, 244, 46]); 
    if (parseInt(data.a(‘textRect‘)) <= parseInt(min)) {
        data.a(‘textRect‘, [255, 2, 244, 46]);
    }
    else if (data.a(‘textRect‘)[0] === 0) {
        clearInterval(timer);
        var index = 0;
        // 设置多个 timer 是因为能够进入这个函数中的不止一个 data，如果在同一时间多个 data 设置同一个 timer，那肯定只会对最后一个节点进行动画。后面还有很多这种陷阱，要注意
        var testName = ‘testTimer‘ + data.getId();
        window[testName] = setInterval(function() {
            index++;
            // 如果情报板中文本内容为空
            if(data.a(‘limitText‘) === ‘‘) {
                setTimeout(function() {
                    // 设置为传入的 text 值
                    data.a(‘limitText‘, text);
                }, 100);
            }
            else {
                setTimeout(function() {
                    // 若情报板中的文本内容不为空，则设置为空
                    data.a(‘limitText‘, ‘‘); 
                }, 100);
            }
            // 重复三次 
            if(index === 11) { 
                clearInterval(window[testName]);
                data.a(‘limitText‘, text);
            }
        }, 100);

        setTimeout(function() {
            timer = setInterval(function() {
                // 回调函数
                circleFunc(data, timer, min);
            }, 100);
        }, 1500);
    }
}