diff --git a/public/index.html b/public/index.html index a858a61b..049ca0e9 100644 --- a/public/index.html +++ b/public/index.html @@ -13,9 +13,9 @@ <%= VUE_APP_TITLE %> - - - + + + diff --git a/src/views/bigScreen/cesiumtest.vue b/src/views/bigScreen/cesiumtest.vue index 28cb03a0..f8dfc6d1 100644 --- a/src/views/bigScreen/cesiumtest.vue +++ b/src/views/bigScreen/cesiumtest.vue @@ -11,25 +11,122 @@ export default { "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1Yzg3ZDEzOS0zN2Q1LTQ2N2YtOWJhMy1mNWU4MWY5N2ExYzkiLCJpZCI6MjAxMzIsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NzY4MTIzNzR9.SfNeHedDyXWLIPiNbc4qSsHBACm7uvaqRsQprL2J4Cw"; const viewer = new Cesium.Viewer("cesiumContainer", { - //shadows: true, - }); - const tileset = new Cesium.Cesium3DTileset({ - // url: "/3dtiles/tileset.json", - url: "http://49.232.14.174:2226/pf/3dtiles/tileset.json", + // shadows: false,//模型加阴影 + animation: false, //动画小部件,左下角的倍速调控器，暂时用不到 + // shouldAnimate: false, + homeButton: false, //是否显示Home按钮,一键回到地球，暂时用不到 + fullscreenButton: false, //是否显示全屏按钮，右下角的全屏按钮，跟F11功能类似,可以不要 + // baseLayerPicker: true, //地图图层组件,可以选择不同的地理皮肤，右上角的皮肤按钮 + // geocoder: true, //是否显示地名查找控件，右上角的搜索 + timeline: false, //是否显示时间线控件 + // sceneModePicker: true, //场景模式 + // selectionIndicator: false,//选取指示器组件 + // navigationHelpButton: false, //是否显示帮助信息控件 + // infoBox: true, //是否显示点击要素之后显示的信息 + // requestRenderMode: true, //启用请求渲染模式 + // scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存 + // sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式 Cesium.SceneMode + // fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处 }); + //隐藏logo信息 + viewer._cesiumWidget._creditContainer.style.display = 'none'; + // var camera = viewer.camera; + //*****cesium加载3dtiles*****// + // const tileset = new Cesium.Cesium3DTileset({ + // // url: "/3dtiles/tileset.json", + // url: "/glb/photon4.glb", + // // url: "http://49.232.14.174:2226/pf/3dtiles/tileset.json", + // }); - tileset.readyPromise.then(function (tileset) { - viewer.scene.primitives.add(tileset); - viewer.zoomTo( - tileset, - new Cesium.HeadingPitchRange( - 0.0, - -0.5, - tileset.boundingSphere.radius * 2.0 - ) - ); - }); + // // + // tileset.readyPromise.then(function (tileset) { + // viewer.scene.primitives.add(tileset); + // //将tileset的包围球中心点坐标从笛卡尔坐标系转换为地理坐标系 + // const cartographic = Cesium.Cartographic.fromCartesian( + // tileset.boundingSphere.center + // ); + // const { longitude, latitude, height } = cartographic; + // // 模型包围球的中心点坐标，输出以笛卡尔坐标系表示的三维坐标点 + // const current = Cesium.Cartesian3.fromRadians( + // longitude, + // latitude, + // height + // ) + // console.log('current', current); + // //根据中心点坐标计算出的地表坐标点 + // const surface = Cesium.Cartesian3.fromRadians( + // cartographic.longitude, //经度 + // cartographic.latitude, //纬度 + // 0.0 //高度 + // ) + // console.log('surface', surface); + // debugger; + // //根据中心点坐标和height值计算出的新的坐标点 + // const offset = Cesium.Cartesian3.fromRadians( + // longitude, latitude, 0 + // ); + // //更新tileset模型矩阵(modelMatrix)的,实现tileset位置的平移变换 + // const translation = Cesium.Cartesian3.subtract( + // offset, //根据中心点坐标和height值计算出的新的坐标点 + // surface, //根据中心点坐标计算出的地表坐标点 + // new Cesium.Cartesian3() + // ); + // tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation); + + // viewer.zoomTo( + // tileset, + // new Cesium.HeadingPitchRange( + // -4.0, + // -0.65, + // 500 + // ) + // ); + // var boundingSphere = tileset.boundingSphere; + // // viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0, 0, boundingSphere.radius * 4.0)); + // // var rootNode = tileset.root; + // // var modelMatrix2 = rootNode.computedTransform; + // // var translation2 = new Cesium.Cartesian3(); + // // Cesium.Matrix4.getTranslation(modelMatrix2, translation2); + // // var offset2 = new Cesium.Cartesian3(0, -1000, 0); // 沿着 Z 轴负方向移动 100 单位 + // // var newModelMatrix2 = Cesium.Matrix4.fromTranslation(translation2, offset2); + // // rootNode.computedTransform = newModelMatrix2; + // }); + //*****cesium加载3dtiles*****// + //*****cesium加载.glb格式的文件*****// + // 隐藏地球 + viewer.scene.globe.show = false + var url = "/glb/photon4.glb"; + var height = 0; + viewer.entities.removeAll() //加载之前先清楚所有entity + const position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height) + const heading = Cesium.Math.toRadians(135) //135度转弧度 + const pitch = Cesium.Math.toRadians(0); + const roll = 0 + const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll) + const orientation = Cesium.Transforms.headingPitchRollQuaternion( + position, + hpr + ) + const entity = viewer.entities.add({ + name: 'photon', + position: position, + orientation: orientation, + model: { + uri: url,//注意entitits.add方式加载gltf文件时，这里是uri，不是url，并且这种方式只能加载.glb格式的文件 + scale: 1.5,//缩放比例 + minimumPixelSize: 1000,//最小像素大小，可以避免太小看不见 + maximumScale: 20000,//模型的最大比例尺大小。minimumPixelSize的上限 + incrementallyLoadTextures: true,//加载模型后纹理是否可以继续流入 + runAnimations: true,//是否启动模型中制定的gltf动画 + clampAnimations: true,//制定gltf动画是否在没有关键帧的持续时间内保持最后一个姿势 + shadows: Cesium.ShadowMode.ENABLED, + heightReference: Cesium.HeightReference.NONE + } + }) + viewer.trackedEntity = entity; // 聚焦模型 + viewer.zoomTo(entity) + //*****cesium加载.glb格式的文件*****// } } diff --git a/src/views/bigScreen/enpComponents/cems.vue b/src/views/bigScreen/enpComponents/cems.vue index 68842939..e254f934 100644 --- a/src/views/bigScreen/enpComponents/cems.vue +++ b/src/views/bigScreen/enpComponents/cems.vue @@ -17,6 +17,16 @@ {{ scope.row.equipment_envdata.dust_rtd ? scope.row.equipment_envdata.dust_rtd : '-' }} + + + + + + - \ No newline at end of file + --> \ No newline at end of file