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/js/removeMark.js',//清除标注脚本 '/uploads/wechat/163607/file/杨浦16/js/UIAnchor.js',//UI界面脚本 '/uploads/wechat/163607/file/杨浦16/js/FloorClick.js',//创建切换楼层脚本 '/uploads/wechat/163607/file/杨浦16/js/MainPanel.js',//公共工具功能脚本 '/uploads/wechat/163607/file/杨浦16/js/CreateHtml.js',//创建页面元素脚本 '/uploads/wechat/163607/file/杨浦16/js/public.js',//公共场景功能脚本 '/uploads/wechat/163607/file/杨浦16/js/ChangeScene.js',//场景切换脚本 ]; /** * 说明:加载外部文件 */ THING.Utils.dynamicLoad(fileArr, function () {}); // 创建app var app = new THING.App({ url: '/api/scene/0b75dc5f4460f22c329afd96', // url: '/api/scene/a8fba28ea8b1c077d74d801e',//城科大楼 // url: '/api/scene/8fe9eaf0118f74c71010bc19',//宝钢又一村31号 // url: '/api/scene/ab93bd9640a9db05a4937351', // url: '/api/scene/e1137071cd763730846f50ba',//常福医院 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) { // buildingStore = data.buildingStore // } // }); app.camera.xAngleLimitRange = [0, 90]; var truck; 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 baseURL = "/uploads/wechat/163607/file/杨浦16/icons/"; app.on('load', function (ev) { curCampus = ev.campus; skyBox = app.skyBox; // 获取天空盒 app.level.change(ev.campus); // 切换至园区层级 ev.campus.azimuth = '180'; // 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" } // 园区绑定默认经纬度,地图才生效 } }); // 监听建筑层级的 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) { app.background = 'https://www.thingjs.com/static/images/background_img_03.png' stopRotate(); // 进入建筑层级 if (ev.object.type == 'Building') { var id = document.getElementById("rightSideSwitch") if(id == null){ creatFloorChoose();//创建楼层选择器 } //清除设备列表和面板 _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); }, '每帧改变透明度'); }) } function queryDeviceStatus(evt) { objArray = evt.data; // objArray.forEach(function (deviceobj) { // obj = app.query("#" + deviceobj.ownerCode)[0]; // obj.on('update', function () { // obj.style.color = '#FF0000' // obj.style.opacity = 0.5 + 0.5 * Math.sin(2 * app.elapsedTime / 500); // }, '每帧改变透明度'); // }) obj = app.query("#" + objArray)[0]; obj.on('update', function () { obj.style.color = '#FF0000' obj.style.opacity = 0.5 + 0.5 * Math.sin(2 * app.elapsedTime / 500); }, '每帧改变透明度'); } function reset(objArray) { objArray.forEach(function (obj) { obj.style.opacity = 1.0; obj.style.color = null; obj.off('update', null, '每帧改变透明度'); }) } var timer = null; function getTabledata(d) { var ygArray = []; d.forEach(function (d) { var deviceInfo = { "设备编号": d.ownerCode, "设备名称": d.ownerName, "安装位置": d.unitinfo, }; ygArray.push(deviceInfo) }) // 表格数据//创建对象 book var tableData = { // 列标题 props: ['设备编号', '设备名称', '安装位置'], // 列数据 items: ygArray }; return tableData; } function createPerson(name, age, family) { var o = new Object(); o.name = name; o.age = age; o.family = family; o.say = function () { alert(this.name); } return o; } function destroyPanel() { var mydiv = document.getElementById('mydiv') mydiv.remove(); } //==================== function updateData(obj) { /** ******************* 以下为websoket数据对接 ********************/ // 对接自有websoket服务器 if (!webSocket) { // 如果网站是 https 则对应 wss // 如果网站是 http 则对应 ws 即可 webSocket = new WebSocket('ws://101.133.214.75:8080/Device_Manager/socket'); // 建立 websocket 连接成功触发事件 webSocket.onopen = function () { }; // 接收服务端数据时触发事件 webSocket.onmessage = function (evt) { queryDeviceStatus(evt); }; webSocket.onclose = function (evt) { webSocket = null; } } } //接收父级页面数据 function userListener(data) { buildingStore = data.data; } // 监听用户页面传回的数据 并调用 ThingJS 页面方法 window.addEventListener('message', function (e) { var _this=this; var array; var data = e.data; // console.log(JSON.stringify(data)) var funcName = data.funcName; var param = data.param; var company_code = e.data.param.company_code // 调用 ThingJS 页面方法 window[funcName](param); //请求场景url的json文件 $.ajax({ type: "GET", url:'/uploads/wechat/163607/file/杨浦16/park.json', dataType: "json", success: function (data) { for(let i = 0; i < data.array.length; i++){ if(company_code === data.array[i].id){ campusUrl = data.array[i] _this.changeScene(campusUrl); _this.createWidgets(); } } } }); }); //父级页面数据处理 function cleanObj(arr, key) { var map = {}, dest = []; for (var i = 0; i < arr.length; i++) { var ai = arr[i]; if (!map[ai.min_level]) { dest.push({ min_level: ai.min_level, item: [ai] }); map[ai.min_level] = ai; } else { for (var j = 0; j < dest.length; j++) { var dj = dest[j]; if (dj.min_level == ai.min_level) { dj.item.push(ai); break; } } } } return dest; } function uniq(array) { var temp = []; //一个新的临时数组 for (var i = 0; i < array.length; i++) { if (temp.indexOf(array[i]) == -1) { temp.push(array[i]); } } return temp; } //设备点位标识 // function createDeviceElement(deviceType, floorNum) { // removeMark(); // let data = cleanObj(buildingStore); // for (var i = 0; i < data.length; i++) { // if (data[i].min_level == floorNum) { // let arry = data[i].item; // for (var q = 0; q < arry.length; q++) { // if (arry[q].dwtype == deviceType) { // let devicename = arry[q].device_name; // let dwtype = arry[q].dwtype; // var ownercode = arry[q].owner_code // var textAndPictureMarkerHtml = // `
//
// `+ devicename + ` //
//
// //
//
`; // $('#div3d').append($(textAndPictureMarkerHtml)); // createUIAnchor(floorNum); // } // } // } // } // }