3dModeling buildingCreate.js 袁明明 commit at 2020-11-04

3dModeling/zhhry9/buildingCreate.js

@@ -37,3 +37,195 @@ 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') {