aiot/3dModeling/tjby28/buildingCreate.js

// 创建app
var app = new THING.App({
    url: '/api/scene/0b75dc5f4460f22c329afd96',
    // url: '/api/scene/ab93bd9640a9db05a4937351',
    background: 'https://www.thingjs.com/static/images/background_img_03.png'
});

//设备列表
var buildingStore;
$.ajax({
    type: "GET",
    url:'/uploads/wechat/163607/file/杨浦16/buildingStore.json',
    dataType: "json",
    async: false,
    success: function (data) {
        console.log(data)
        buildingStore = data.buildingStore
    }
});

app.camera.xAngleLimitRange = [0, 90];
var campusUrl;//场景列表
var dataObj = { progress: 0 };  // 场景加载进度条数据对象
var loadingPanel;  // 进度条界面组件
var curCampus;//存放园区url路径
var company_code;

var buildingStore;
var miniMapCtrl = null;  // 小地图控件
var webSocket;//webSocket
var tileLayer1 = null;  // 加入地图背景后选用的图层
var box = null;  // 鼠标点击第一人称行走按钮时，红色盒子提示
var fpsCtrl = null;  // 第一人称行走控件
var cameraInitPos = null;  // 进入第一人称行走前摄像机位置
var fullScreenState = false;  // 全屏
var skyBox = null;  // 天空盒
var hiddenControlTimer = null;  // 隐藏控制按钮计时器
var showControlTimer = null;  // 显示控制按钮计时器
var cameraDistace = [];
var building = null, mainPanle;  // 建筑
var restartTime = 5000;  // 自动旋转停止后重启时间间隔
var rotateTimer = null;  // 自动旋转计时器
//var baseURL = "http://47.103.74.123/ThingjsIcon/";
var baseURL = "https://s3.ax1x.com/2021/01/28/";
var filePath = '/uploads/wechat/5oiR5pyJ5pyA6ZW/55qE572R5ZCN5LiN5L+h5L2g5pWw5pWw/file/ScenePreview/';
// 需要用到的外部文件
var fileArr = [
    "https://www.layuicdn.com/layui/layui.js",
    'https://www.layuicdn.com/layui/css/layui.css',
    filePath + 'assets/css/index.css',  // 功能按钮样式文件
    filePath + 'assets/font-awesome-4.7.0/css/font-awesome.min.css',  // 功能按钮字体样式
    filePath + 'assets/css/myAlert.css',  // 弹出框样式
    filePath + 'assets/css/sweetalert2.min.css',  // 弹出框样式
    filePath + 'assets/js/sweetalert2.all.min.js',  // 弹出框脚本
    filePath + 'assets/js/myAlert.js',  // 弹出框脚本
    filePath + 'assets/js/posTransform.js',  // 不同坐标系经纬度互相转换的脚本文件
    filePath + 'assets/js/expandFloor.js', // 楼层展开脚本
    '/guide/lib/echarts.min.js',
    '/uploads/wechat/163607/file/杨浦16/removeMark.js',//清除标注脚本
    '/uploads/wechat/163607/file/杨浦16/UIAnchor.js',//UI界面脚本
    '/uploads/wechat/163607/file/杨浦16/FloorClick.js',//创建切换楼层脚本
    '/uploads/wechat/163607/file/杨浦16/MainPanel.js',//公共工具功能脚本
    '/uploads/wechat/163607/file/杨浦16/CreateHtml.js',//创建页面元素脚本
    '/uploads/wechat/163607/file/杨浦16/public.js',//公共场景功能脚本  
    '/uploads/wechat/163607/file/杨浦16/ChangeScene.js',//场景切换脚本
];

/**
 * 说明：加载外部文件
 */
THING.Utils.dynamicLoad(fileArr, function () {
    app.on('load', function (ev) {
        skyBox = app.skyBox;  // 获取天空盒
        app.level.change(ev.campus);  // 切换至园区层级
        ev.campus.azimuth = '180';
        mainPanle = new MainPanel(app);// 界面的类
        //  setupNavpanel();
        // creatFloorChoose();  //======================================本地数据测试===============================================
        // 获取园区在CampusBuilder编辑时保存的地理位置
        let tjsLnglat = app.root.defaultCampus.extraData;
        if (tjsLnglat != undefined && tjsLnglat != null) {
            tjsLnglat = tjsLnglat.coordinates;
            if (tjsLnglat != undefined && tjsLnglat != null) {
                tjsLnglat = tjsLnglat.split(",");
            }
        } else {
            ev.campus.extraData = { coordinates: "116.4641,39.98606" }  // 园区绑定默认经纬度，地图才生效
        }
        createHtml();  // 创建html
        restarRotate();  // 自动旋转

        curCampus = ev.campus;
        // 进入层级切换
        app.level.change(ev.campus);
    });
});

// 监听建筑层级的 LeaveLevel 事件
app.on(THING.EventType.LeaveLevel, ".Building", function (ev) {
    // 要进入的层级对象
    var current = ev.current;
    // 上一层级对象（退出的层级）
    var preObject = ev.previous;
    if (current.parent === preObject) {
        removeMark();
    }
    else {
        removeMark();
    }
})

/**
 * 说明：注册事件
 */
function registerEvent() {
    var _this = this
    // 楼层横向展开按钮的点击事件，楼层展开只在建筑有2层或2层以上的楼层才会生效
    $('#horizontalExpansion').on('click', function () {
        stopRotate();
        checkBtnActives(['#mapBg', '#sceneSetting']);
        let expandState = building.getAttribute('expandState');
        if ($(this).hasClass('active')) {
            // 楼层横向展开关闭
            if (expandState == 'horizontal') {
                $(this).removeClass('active');
                horizontalExpand(building, 'close');
            }
        } else {
            // 楼层横向展开前应判断楼层是否处于垂直展开状态，是，则应先关闭垂直展开，然后横向展开
            if (expandState != 'moving') {
                $(this).addClass('active');
                $('#verticalExpansion').removeClass('active');
                if (expandState == 'vertical') {
                    verticalToHorizontal(building);
                } else {
                    horizontalExpand(building, 'horizontal');
                }
            }
        }
        restarRotate();
    });
    // 楼层垂直展开按钮的点击事件，楼层展开只在建筑有2层或2层以上的楼层才会生效
    $('#verticalExpansion').on('click', function () {
        stopRotate();
        checkBtnActives(['#mapBg', '#sceneSetting']);
        let expandState = building.getAttribute('expandState');
        if ($(this).hasClass('active')) {
            // 楼层垂直展开关闭
            if (expandState == 'vertical') {
                $(this).removeClass('active');
                verticalExpand(building, 'close');
            }
        } else {
            // 楼层垂直展开前应判断楼层是否处于横向展开状态，是，则应先关闭横向展开，然后垂直展开
            if (expandState != 'moving') {
                $(this).addClass('active');
                $('#horizontalExpansion').removeClass('active');
                if (expandState == 'horizontal') {
                    horizontalToVertical(building);
                } else {
                    verticalExpand(building, 'vertical');
                }
            }
        }
        restarRotate();
    });
    // 设置按钮点击事件，按钮的tip与功能面板的互相切换
    $('#sceneSetting').on('click', function () {
        checkBtnActives(['#mapBg']);
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
            $(this).children('.control-menu').removeClass('actives');
            $(this).find('.tooltiptext').css({ "visibility": "visible" });
        } else {
            $(this).addClass('active');
            $(this).children('.control-menu').addClass('actives');
            $(this).find('.tooltiptext').css({ "visibility": "hidden" });
        }
    }).hover(function () {
        if (!$(this).hasClass('active')) {
            $(this).find('.tooltiptext').css({ "visibility": "visible" });
        }
    }, function () {
        $(this).find('.tooltiptext').css({ "visibility": "hidden" });
    });
    // 设置li标签添加点击事件
    $('#sceneSetting .control-menu-pane li').on('click', function (ev) {
        //ev.stopPropagation();
        if ($(this).hasClass('selected')) {
            stopRotate();
            $(this).removeClass('selected');
        } else {
            $(this).addClass('selected');
            restarRotate();
        }
    });
    // 小地图的开启/关闭按钮的鼠标点击事件
    $('#miniMap').on('click', function () {
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
            destoryMiniMap();
        } else {
            $(this).addClass('active');
            createMiniMap();
        }
        checkBtnActives(['#mapBg', '#sceneSetting']);
    });
    // 地图背景的开启/关闭按钮的鼠标点击事件，按钮的tip与功能面板的互相切换
    $('#mapBg').on('click', function () {
        checkBtnActives(['#sceneSetting']);
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
            $(this).children('.control-menu').removeClass('actives');
            $(this).find('.tooltiptext').css({ "visibility": "visible" });
        } else {
            $(this).addClass('active');
            $(this).children('.control-menu').addClass('actives');
            $(this).find('.tooltiptext').css({ "visibility": "hidden" });
        }
    }).hover(function () {
        if (!$(this).hasClass('active')) {
            $(this).find('.tooltiptext').css({ "visibility": "visible" });
        }
    }, function () {
        $(this).find('.tooltiptext').css({ "visibility": "hidden" });
    });
    // 进入层级事件
    app.on(THING.EventType.EnterLevel, function (ev) {
        stopRotate();
        // 进入建筑层级
        if (ev.object.type == 'Building') {
            //清除设备列表和面板
            _this.delMydiv();
            _this.destroy_ui();
            let floors = ev.object.floors;
            if (floors.length > 1) {
                building = ev.object;
                addFloorPos(building);
                let expandState = building.getAttribute('expandState');
                if (expandState == null) {
                    building.setAttribute('expandState', 'close');
                }
                $('#horizontalExpansion').css({ 'display': 'block' });
                $('#verticalExpansion').css({ 'display': 'block' });
            }
        } else {
            $('#horizontalExpansion').css({ 'display': 'none' });
            $('#verticalExpansion').css({ 'display': 'none' });
            // 进入园区层级
            if (ev.object.type == 'Campus') {
                if (building != null) {
                    exitBuildingCloseFloor(building);
                    $('#horizontalExpansion').removeClass('active');
                    $('#verticalExpansion').removeClass('active');
                    building = null;
                }
            }
        }
        if (skyBox != null) {
            app.skyBox = skyBox;
        }
        // 重新创建小地图
        if ($('#miniMap').hasClass('active')) {
            destoryMiniMap();
            createMiniMap();
        }
    });
    // 行走按钮的鼠标点击事件
    $('#moveByFps').on('click', function () {
        stopRotate();
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
            if (box != null) {
                // 恢复默认双击进入层级事件
                app.resumeEvent(THING.EventType.DBLClick, '*', THING.EventTag.LevelEnterOperation);
                // 恢复默认右键退出层级事件
                app.resumeEvent(THING.EventType.Click, '*', THING.EventTag.LevelBackOperation);
                box.destroy();
                box = null;
            }
            if (fpsCtrl != null) {
                exitFps();
            }
        } else {
            $(this).addClass('active');
            // 禁用默认双击进入层级事件
            app.pauseEvent(THING.EventType.DBLClick, '*', THING.EventTag.LevelEnterOperation);
            // 禁用默认右键退出层级事件
            app.pauseEvent(THING.EventType.Click, '*', THING.EventTag.LevelBackOperation);
            // 记录摄像机当前位置
            cameraInitPos = [app.camera.position, app.camera.target];
            createBox();
        }
        checkBtnActives(['#mapBg', '#sceneSetting']);
    });
    // 全屏按钮的鼠标抬起事件
    $('#fullScreen').mouseup(function () {
        if (!fullScreenState) {
            $('.btn-full-screen').css('display', 'none');
            $('.btn-narrow').css('display', 'block');
            $('#fullScreen span').text('退出全屏');
            fullScreen();
            fullScreenState = true;
        } else {
            $('.btn-full-screen').css('display', 'block');
            $('.btn-narrow').css('display', 'none');
            $('#fullScreen span').text('全屏');
            exitFullScreen();
            fullScreenState = false;
            if ($('#mapBg').hasClass('active')) {
                destoryMiniMap();
                createMiniMap();
            }
        }
        checkBtnActives(['#mapBg', '#sceneSetting']);
    });
    // 鼠标键按下事件，功能按钮隐藏
    app.on(THING.EventType.MouseDown, function () {
        app.pauseEvent(THING.EventType.CameraZoom, null, '摄像机前后滚动，功能图片隐藏');
        if (showControlTimer != null) {
            clearTimeout(showControlTimer);
            showControlTimer = null;
        }
        stopRotate();
        if (hiddenControlTimer == null) {
            clearTimeout(showControlTimer);
            hiddenControlTimer = setTimeout(function () {
                $('#all-controls').css('display', 'none');
                clearTimeout(hiddenControlTimer);
                hiddenControlTimer = null;
            }, 300);
        }
    });
    // 鼠标键抬起事件，功能按钮显示
    app.on(THING.EventType.MouseUp, function () {
        app.resumeEvent(THING.EventType.CameraZoom, null, '摄像机前后滚动，功能图片隐藏');
        if (hiddenControlTimer != null) {
            clearTimeout(hiddenControlTimer);
            hiddenControlTimer = null;
        }
        if (showControlTimer == null) {
            showControlTimer = setTimeout(function () {
                $('#all-controls').css('display', 'block');
                clearTimeout(showControlTimer);
                showControlTimer = null;
                restarRotate();
            }, 300);
        }
    });
    let count = 0;
    // 鼠标滑轮滚动
    app.on(THING.EventType.CameraZoom, function () {
        if (showControlTimer != null) {
            count = 0;
            return;
        }
        stopRotate();
        if (showControlTimer == null) {
            $('#all-controls').css('display', 'none');
            showControlTimer = setInterval(function () {
                count++;
                if (count >= 2) {
                    $('#all-controls').css('display', 'block');
                    restarRotate();
                    clearInterval(showControlTimer);
                    showControlTimer = null;
                }
            }, 300);
        }
    }, '摄像机前后滚动，功能图片隐藏');

    // 鼠标移动事件，已创建的红色胶囊跟随鼠标移动
    app.on(THING.EventType.MouseMove, function (ev) {
        if (box != null) {
            if (ev.picked) {
                box.position = ev.pickedPosition;
            }
        }
    });
    // 摄像机位置改变结束事件，记录当前摄像机位置与目标点x，y，z的差
    app.on(THING.EventType.CameraChangeEnd, function () {
        if (cameraDistace.length > 0) {
            let caPos = app.camera.position;
            let scePos = app.root.defaultCampus.position;
            cameraDistace = [caPos[0] - scePos[0], caPos[1] - scePos[1], caPos[2] - scePos[2]];
        }
        restarRotate();
    });
    // 点击事件，放置红色胶囊，进入第一人称行走
    app.on(THING.EventType.Click, function (ev) {
        stopRotate();
        if (ev.button == 0 && box != null) {
            let pos = box.position;
            box.destroy();
            box = null;
            app.camera.flyTo(pos);
            enterFps([pos[0], pos[1] + 2, pos[2]]);
        }
        checkBtnActives(['#mapBg', '#sceneSetting']);
    });
    // 进入层级事件，退出第一人称行走
    app.on(THING.EventType.EnterLevel, function () {
        if (fpsCtrl != null) {
            exitFps();
        }
    });
    // 离开层级事件，停止旋转
    app.on(THING.EventType.LeaveLevel, function () {
        stopRotate();
    })
    // 鼠标滑轮事件，停止旋转
    app.on(THING.EventType.MouseWheel, function () {
        stopRotate();
    })
    // 场景添加键盘按下事件，当进入第一人称行走时，按下esc键退出第一人称行走
    app.on(THING.EventType.KeyDown, function (ev) {
        if (ev.code == 'Escape') {
            if (box != null) {
                app.resumeEvent(THING.EventType.DBLClick, '*', THING.EventTag.LevelEnterOperation);
                app.resumeEvent(THING.EventType.Click, '*', THING.EventTag.LevelBackOperation);
                box.destroy();
                box = null;
                $('#moveByFps').removeClass('active');
                restarRotate();
            }
            if (fpsCtrl != null) {
                exitFps();
                restarRotate();
            }
            checkBtnActives(['#mapBg', '#sceneSetting']);
        }
    });
    window.onresize = function () {
        if (!checkFull()) {
            //要执行的动作
            if (fullScreenState == true) {
                $('.btn-full-screen').css('display', 'block');
                $('.btn-narrow').css('display', 'none');
                $('#fullScreen span').text('全屏');
                fullScreenState = false;
            }
        }
    }
}


//====设备闪烁提示====
function flash(objArray) {
    objArray.forEach(function (obj) {
        obj.on('update', function () {
            obj.style.color = '#FFF000'
            obj.style.opacity = 0.5 + 0.5 * Math.sin(2 * app.elapsedTime / 500);
        }, '每帧改变透明度');