11

WebVue/TaiHufenglang/package-lock.json

@@ -9,6 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "@amap/amap-jsapi-loader": "^1.0.1",
+        "@epicgames-ps/lib-pixelstreamingfrontend-ue5.2": "^0.5.8",
+        "@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2": "^0.4.9",
         "@jiaminghi/data-view": "^2.10.0",
         "@jiaminghi/data-view-react": "^1.2.5",
         "autofit.js": "^3.2.8",
@@ -560,6 +562,29 @@
         "node": ">=20.19.0"
       }
     },
+    "node_modules/@epicgames-ps/lib-pixelstreamingfrontend-ue5.2": {
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/@epicgames-ps/lib-pixelstreamingfrontend-ue5.2/-/lib-pixelstreamingfrontend-ue5.2-0.5.8.tgz",
+      "integrity": "sha512-mVh05FFFRNc0VQy95V2mgISLDHIoYZyvspsw5GiaG9RZN5uEhR+YPCm/WvvKOatwqAlR7XOZ1sml1Lj1ymz7eQ==",
+      "license": "MIT",
+      "dependencies": {
+        "sdp": "^3.1.0"
+      }
+    },
+    "node_modules/@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2": {
+      "version": "0.4.9",
+      "resolved": "https://registry.npmjs.org/@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2/-/lib-pixelstreamingfrontend-ui-ue5.2-0.4.9.tgz",
+      "integrity": "sha512-ZKNp1anSurKeQd4u+0cRoR1HHhp/ee9SUFfOHJSx3Pqd7/6leAr7up1km0ZJVJnVcC89++WOnLU6InQb9T3TrQ==",
+      "license": "MIT",
+      "dependencies": {
+        "jss": "^10.9.2",
+        "jss-plugin-camel-case": "^10.9.2",
+        "jss-plugin-global": "^10.9.2"
+      },
+      "peerDependencies": {
+        "@epicgames-ps/lib-pixelstreamingfrontend-ue5.2": "^0.5.8"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.5",
       "resolved": "https://mirrors.huaweicloud.com/repository/npm/@esbuild/aix-ppc64/-/aix-ppc64-0.25.5.tgz",
@@ -3238,6 +3263,12 @@
         "node": ">=18.18.0"
       }
     },
+    "node_modules/hyphenate-style-name": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz",
+      "integrity": "sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/iferr": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/iferr/-/iferr-0.1.5.tgz",
@@ -3319,6 +3350,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g==",
+      "license": "MIT"
+    },
     "node_modules/is-inside-container": {
       "version": "1.0.0",
       "resolved": "https://mirrors.huaweicloud.com/repository/npm/is-inside-container/-/is-inside-container-1.0.0.tgz",
@@ -3510,6 +3547,43 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jss": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-10.10.0.tgz",
+      "integrity": "sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1",
+        "csstype": "^3.0.2",
+        "is-in-browser": "^1.1.3",
+        "tiny-warning": "^1.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/jss"
+      }
+    },
+    "node_modules/jss-plugin-camel-case": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.10.0.tgz",
+      "integrity": "sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1",
+        "hyphenate-style-name": "^1.0.3",
+        "jss": "10.10.0"
+      }
+    },
+    "node_modules/jss-plugin-global": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.10.0.tgz",
+      "integrity": "sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.10.0"
+      }
+    },
     "node_modules/kdbush": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
@@ -4478,6 +4552,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/sdp": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/sdp/-/sdp-3.2.1.tgz",
+      "integrity": "sha512-lwsAIzOPlH8/7IIjjz3K0zYBk7aBVVcvjMwt3M4fLxpjMYyy7i3I97SLHebgn4YBjirkzfp3RvRDWSKsh/+WFw==",
+      "license": "MIT"
+    },
     "node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://mirrors.huaweicloud.com/repository/npm/semver/-/semver-6.3.1.tgz",
@@ -4899,6 +4979,12 @@
         "xtend": "~4.0.1"
       }
     },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.14",
       "resolved": "https://mirrors.huaweicloud.com/repository/npm/tinyglobby/-/tinyglobby-0.2.14.tgz",

WebVue/TaiHufenglang/package.json

@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
+    "@epicgames-ps/lib-pixelstreamingfrontend-ue5.2": "^0.5.8",
+    "@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2": "^0.4.9",
     "@jiaminghi/data-view": "^2.10.0",
     "@jiaminghi/data-view-react": "^1.2.5",
     "autofit.js": "^3.2.8",

WebVue/TaiHufenglang/src/assets/css/index.css

@@ -12,6 +12,8 @@
   z-index: 0;
 }
 
+
+
 /* 导航栏样式 */
 .main-nav {
   position: fixed;

WebVue/TaiHufenglang/src/components/Cesium.vue

@@ -1,10 +1,11 @@
-
-<template>  <div id="cesiumContainer"></div></template>
+<template>
+  <div id="cesiumContainer" style="height: 100%;width: 100%;"></div>
+</template>
 
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue'
 import * as Cesium from 'cesium';
-import "cesium/Build/Cesium/Widgets/widgets.css";
+import "cesium/Build/CesiumUnminified/Widgets/widgets.css";
 
 
 const TDTTK = "d9e7aa2ad204aba6aeedea6f5ab48ed9";
@@ -33,16 +34,18 @@ onMounted(() => {
     show: false,
   });
 
-      // 设置初始镜头位置（北京）
-      viewer.camera.setView({
-      destination: Cesium.Cartesian3.fromDegrees(116.3, 39.9, 100000),
-      orientation: {
-        heading: Cesium.Math.toRadians(0),
-        pitch: Cesium.Math.toRadians(-45),
-      },
-    });
+ 
+
+  // 设置初始镜头位置（北京）
+  viewer.camera.setView({
+    destination: Cesium.Cartesian3.fromDegrees(116.3, 39.9, 100000),
+    orientation: {
+      heading: Cesium.Math.toRadians(0),
+      pitch: Cesium.Math.toRadians(-45),
+    },
+  });
 
   viewer.imageryLayers.addImageryProvider(tdtAnnotionLayer);
-}) 
+})
 
 </script>

WebVue/TaiHufenglang/src/components/MapContainer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="content">
+  <div class="content" >
     <Header />
     <Gradientoverlay />
     <div class="main">
@@ -9,6 +9,7 @@
     </div>
   </div>
   <Cesium />  
+   <!-- <UEpix /> -->
 </template>
 
 
@@ -20,18 +21,7 @@ import Leftmoudle from './leftmodul.vue'
 import Rightmoudle from './rightmodul.vue'
 import Middlemoudle from './middlemodul.vue'
 import Cesium from './Cesium.vue'
-
-
+// import UEpix from './UEpix.vue'
 </script>
 
-<style scoped>
-
-/* 主内容区域布局 */
-.main {
-  display: grid;
-  grid-template-columns: 1fr 2fr 1fr;
-  gap: 20px;
-  padding: 20px;
-  height: calc(100vh - 80px); /* 根据实际头部高度调整 */
-}
-</style>
+<style scoped></style>

WebVue/TaiHufenglang/src/components/UEpix.vue

@@ -0,0 +1,47 @@
+<template>
+    <div>
+      <!-- 页面内容 -->
+    </div>
+</template>
+  
+  <script>
+import { Config, PixelStreaming } from '@epicgames-ps/lib-pixelstreamingfrontend-ue5.2';
+import { Application, PixelStreamingApplicationStyle } from '@epicgames-ps/lib-pixelstreamingfrontend-ui-ue5.2';
+ 
+ 
+export default {
+    name: 'PlayerView',
+    mounted() {
+      const PixelStreamingApplicationStyles = new PixelStreamingApplicationStyle();
+      PixelStreamingApplicationStyles.applyStyleSheet();
+  
+      // Example of how to set the logger level
+      // Logger.SetLoggerVerbosity(10);
+  
+      // Create a config object
+      const config = new Config({ useUrlParams: true });
+  
+      // Create a Native DOM delegate instance that implements the Delegate interface class
+      const stream = new PixelStreaming(config);
+      const application = new Application({
+        stream,
+        onColorModeChanged: (isLightMode) => PixelStreamingApplicationStyles.setColorMode(isLightMode)
+      });
+  
+      document.body.appendChild(application.rootElement);
+    },
+    methods: {
+      // ...
+    }
+}
+</script>
+  
+<style>
+body {
+    width: 100vw;
+    height: 100vh;
+    min-height: -webkit-fill-available;
+    font-family: 'Montserrat';
+    margin: 0;
+}
+</style>