Przeglądaj źródła

修改自适应位置,解决cesium鼠标不准的问题

baixuanda 1 miesiąc temu
rodzic
commit
b032fffe15

+ 19 - 17
WebVue/TaiHufenglang/src/App.vue

@@ -1,27 +1,29 @@
 <template>
   <MapContainer />
+  <Cesium />  
 </template>
 
 <script setup>
 import { onMounted, onBeforeUnmount } from 'vue';
 import MapContainer from './components/MapContainer.vue';
-import autofit from 'autofit.js';
-
-// 初始化自动适配(Vue3组合式API写法)
-const initAutoFit = () => {
-  autofit.init({
-    designWidth: 1920,
-    designHeight: 1080,
-    el: '#app',
-    resize: true,
-    unit: 'px',
-    debug: false,
-    maxWidth: 1920,
-    maxHeight: 1080,
-    minFontSize: 12,
-    fontScale: true  // 启用字体缩放
-  });
-};
+import Cesium from './components/Cesium.vue'
+// import autofit from 'autofit.js';
+
+// // // 初始化自动适配(Vue3组合式API写法)
+// // const initAutoFit = () => {
+// //   autofit.init({
+// //     designWidth: 1920,
+// //     designHeight: 1080,
+// //     el: '#app',
+// //     resize: true,
+// //     unit: 'px',
+// //     debug: false,
+// //     maxWidth: 1920,
+// //     maxHeight: 1080,
+// //     minFontSize: 12,
+// //     fontScale: true  // 启用字体缩放
+// //   });
+// // };
 
 
 // 生命周期钩子

+ 22 - 22
WebVue/TaiHufenglang/src/components/Cesium.vue

@@ -108,28 +108,28 @@ onMounted(() => {
     entityDataMap.set(entity.id, item);
   });
 
-  // // 天地图影像
-  // const tdtLayer = new Cesium.WebMapTileServiceImageryProvider({
-  //   url: `http://t0.tianditu.com/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${TDTTK}`,
-  //   layer: "tdt",
-  //   style: "default",
-  //   format: "image/jpeg",
-  //   tileMatrixSetID: "w",
-  //   maximumLevel: 18,
-  //   show: false,
-  // });
-  // viewer.imageryLayers.addImageryProvider(tdtLayer);
-
-  // // 天地图注记
-  // const tdtAnnotionLayer = new Cesium.WebMapTileServiceImageryProvider({
-  //   url: `http://t0.tianditu.com/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${TDTTK}`,
-  //   layer: "tdtAnno",
-  //   style: "default",
-  //   format: "image/jpeg",
-  //   tileMatrixSetID: "w",
-  //   maximumLevel: 18,
-  //   show: false,
-  // });
+  // 天地图影像
+  const tdtLayer = new Cesium.WebMapTileServiceImageryProvider({
+    url: `http://t0.tianditu.com/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${TDTTK}`,
+    layer: "tdt",
+    style: "default",
+    format: "image/jpeg",
+    tileMatrixSetID: "w",
+    maximumLevel: 18,
+    show: false,
+  });
+  viewer.imageryLayers.addImageryProvider(tdtLayer);
+
+  // 天地图注记
+  const tdtAnnotionLayer = new Cesium.WebMapTileServiceImageryProvider({
+    url: `http://t0.tianditu.com/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${TDTTK}`,
+    layer: "tdtAnno",
+    style: "default",
+    format: "image/jpeg",
+    tileMatrixSetID: "w",
+    maximumLevel: 18,
+    show: false,
+  });
 
   // 移除默认水印
   viewer.cesiumWidget.creditContainer.style.display = "none";

+ 20 - 1
WebVue/TaiHufenglang/src/components/MapContainer.vue

@@ -8,7 +8,6 @@
       <Rightmoudle />
     </div>
   </div>
-  <Cesium />  
   <!-- <PixelStreaming ss="ws://192.168.0.120:85"/>   -->
 </template>
  
@@ -23,6 +22,26 @@ import Rightmoudle from './rightmodul.vue'
 import Middlemoudle from './middlemodul.vue'
 import Cesium from './Cesium.vue'
 import PixelStreaming from './UEpix.vue'
+import autofit from 'autofit.js';
+
+
+
+// 初始化自动适配(Vue3组合式API写法)
+const initAutoFit = () => {
+  autofit.init({
+    designWidth: 1920,
+    designHeight: 1080,
+    el: '#app',
+    resize: true,
+    unit: 'px',
+    debug: false,
+    maxWidth: 1920,
+    maxHeight: 1080,
+    minFontSize: 12,
+    fontScale: true  // 启用字体缩放
+  });
+};
+
 </script>
 
 <style scoped></style>