3dtiles

.gitignore

@@ -1,6 +1,8 @@
 .DS_Store
 node_modules
 /public/img/ignore/
+/public/3dtiles/
+/public/cesium/
 /dist
 .VSCodeCounter/
 

public/index.html

@@ -13,8 +13,8 @@
 	<title>
 		<%= VUE_APP_TITLE %>
 	</title>
-	<!-- <script src="./jsmap/jsmap.js"> </script> -->
+	<script src="/cesium/Cesium.js"></script>
-	<!-- <link type="text/css" href="./jsmap/jsmap.css" rel="stylesheet"/> -->
+	<!-- <link href="style.css" rel="stylesheet" /> -->
 	<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
 	<script type="text/javascript" src="./webVideoCtrl.js"></script>
 	<script type="text/javascript" src="./jsVideoPlugin-1.0.0.min.js"></script>

src/main.js

@@ -13,12 +13,17 @@ import preventReClick from './utils/preventReClick'
 import Print from './utils/print2'
 import Xlsx from './utils/xlsx'
 import DataVVue3 from '@kjgl77/datav-vue3'
+import * as Cesium from '../public/cesium/Cesium.js'
+import '../public/cesium/Widgets/widgets.css'
+// Vue.prototype.Cesium = Cesium
+
 
 const app = createApp(App);
 
 app.use(store);
 app.use(router);
 app.use(ElementPlus);
+app.use(Cesium);
 app.use(i18n);
 app.use(scui);
 app.use(ehsui);
@@ -26,6 +31,7 @@ app.use(preventReClick);
 app.use(Print);
 app.use(Xlsx);
 app.use(DataVVue3)
+
 //挂载app
 app.mount('#app');
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {

src/views/bigScreen/cesiumtest.vue

@@ -0,0 +1,36 @@
+
+<template>
+  <div id="cesiumContainer" style="width: 100%; height: 100%;"></div>
+</template>
+ 
+<script>
+export default {
+  name: 'cesium',
+  mounted() {
+    Cesium.Ion.defaultAccessToken =
+      "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",
+    });
+
+    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
+        )
+      );
+    });
+
+  }
+}
+</script>
+<style></style>

src/views/bigScreen/index_enp_blue.vue

@@ -11,7 +11,7 @@
           @click="configDark"></el-button>
 
       </div>
-      <div style="position: absolute;top:1.3vh;height:6vh">
+      <div style="position: absolute;top:0.7vh;height:6vh">
         <div style="display: flex;padding-top: 1vh;margin-left: 1vw;">
           <div :class="bindClass(0)" @click="menuClick(0)">
             <div class="menuItem">首页</div>
@@ -51,7 +51,7 @@
           </div>
         </div>
       </div>
-      <div style="position: absolute;top:1.3vh;right: 8px;height: 6vh;">
+      <div style="position: absolute;top:0.7vh;right: 8px;height: 6vh;">
         <div style="display: flex;padding-top:  1vh;padding-right:  1vw;justify-content: flex-end;">
           <div :class="bindClass(3)">
             <div class="menuItem">
@@ -109,7 +109,7 @@
       </div>
     </header>
     <el-main style="padding:0;overflow: hidden;">
-      <div v-show="activeIndex == 0" class="model">
+      <div v-show="activeIndex == 0" class="model" style="">
         <div id="loadingScreen">
           <el-progress type="circle" :percentage="loadedPercent" :width=220 status="warning">
             <template #default="{ percentage }">
@@ -118,6 +118,7 @@
             </template>
           </el-progress>
         </div>
+        <Cesium />
         <canvas id="renderCanvas"></canvas>
       </div>
       <!-- 左侧列表数据 -->
@@ -342,6 +343,7 @@ import * as BABYLON from "babylonjs"
 import * as BABYLON_GUI from "babylonjs-gui"
 import * as BABYLON_GRID from "@/utils/gridMaterial"
 import * as BABYLON_MATERIAL from "@/utils/babylonMaterial"
+import Cesium from './cesiumtest.vue'
 import orgDialog from "./enpComponents/orgwryList"
 import cemsDrawer from './enpComponents/cems.vue'
 import cems2Drawer from './enpComponents/cems2.vue'
@@ -361,6 +363,7 @@ import 'babylonjs-loaders';
 import 'animate.css';
 export default {
   components: {
+    Cesium,
     orgDialog,
     cemsDrawer,
     cems2Drawer,
@@ -609,10 +612,10 @@ export default {
         left_other.style.position = 'absolute';
         left_other.style.width = '20%';
         right_other.style.position = 'absolute';
-        right_other.style.width = '20%';
+        // right_other.style.width = '20%';
-        model.style.position = 'absolute';
+        // model.style.position = 'absolute';
-        model.style.height = (windowHeight - 4) + 'px';
+        // model.style.height = (windowHeight - 4) + 'px';
-        model.style.top = 0;
+        // model.style.top = 0;
 
         var chartHeight1 = (100 - 18) * 0.31 + 'vh';
         var chartHeight2 = (100 - 18) * 0.37 + 'vh';
@@ -1179,8 +1182,9 @@ header {
   position: relative;
   align-items: center;
   box-sizing: border-box;
-  padding: 1.3vh 0.4vw 0 0.4vw;
+  padding: 0.7vh 0.4vw;
   justify-content: space-between;
+  background-image: url('/public/img/enp_blue/bg_enp.png');
 }
 
 .headerImg {
@@ -1191,6 +1195,7 @@ header {
   font-size: 1.8vw;
   text-align: center;
   position: relative;
+
 }
 
 .sysName {
@@ -1302,7 +1307,7 @@ header {
 
 
 .model {
-  top: 0;
+  top: 8%;
   left: 0;
   width: 100%;
   background-image: url('/public/img/enp_blue/bg_enp.png');