修改

src/renderer/src/views/components/headers/components/setPup/components/modelManage.vue

@@ -183,6 +183,7 @@ import type { DragEvents } from 'element-plus/es/components/tree/src/model/useDr
 import type { AllowDropType, NodeDropType, RenderContentContext } from 'element-plus'
 import { ModelApi } from '@/api/model/index'
 import { ElMessage, ElMessageBox } from 'element-plus'
+
 import {
   $sendElectronChanel,
   $recvElectronChanel,

src/renderer/src/views/components/propertyBox/RoutePlanning.vue

@@ -238,6 +238,7 @@ const closeCallBack = (e) => {
   startLat.value = null
   endLng.value = null
   endLat.value = null
+  routePlanning.destroyMouse()
 }
 onBeforeUnmount(() => {
   closeCallBack('')
@@ -251,8 +252,7 @@ const routeQuery = async (e) => {
     waypoints: []
   })
 }
-const clearRoute = (e) => {
+const clearRoute = (e) => {}
-}
 const pickStartPos = () => {
   routePlanning.pickStartPos((position) => {
     startLng.value = position.lng

src/renderer/src/views/components/propertyBox/ScreenShot.vue

@@ -125,8 +125,10 @@ const getResultData = (data) => {
     // eventBus.emit('mapPrintDialog')
   }
 }
+const name = 'ScreenShotHD'
 defineExpose({
-  open
+  open,
+  name
 })
 </script>
 

src/renderer/src/views/components/propertyBox/imagePop.vue

@@ -48,6 +48,7 @@ import { debounce } from '@/utils'
 import { ModelApi } from '@/api/model/index'
 import { ElMessage } from 'element-plus'
 import { viewGlb, viewGlbByEarth } from './viewGlb'
+import { toBlob } from 'html-to-image'
 
 const baseDialog: any = ref(null)
 const eventBus: any = inject('bus')
@@ -63,9 +64,12 @@ let func = (data) => {
   rowData.name = data.modelName
   baseDialog.value?.open()
   setTimeout(() => {
-    initThreeJS()
+    // initThreeJS()
-    loadModel()
+    // loadModel()
-    animate()
+    // animate()
+    window.viewGlb = new viewGlbByEarth('threeCanvas')
+    console.log(service.value + rowData.modelDataUrl, 'cccccc')
+    window.viewGlb.addGltf(service.value + rowData.modelDataUrl)
   })
 }
 onMounted(() => {
@@ -197,7 +201,7 @@ const viewPointHeightInput = () => {
   }
 }
 const closeCallBack = (e) => {
-  renderer.domElement.remove() // 从DOM中移除渲染器。
+  renderer?.domElement.remove() // 从DOM中移除渲染器。
   imageData.value = null
   rowData = []
   //打开系统设置弹框
@@ -206,25 +210,19 @@ const closeCallBack = (e) => {
 
 var posterLoading: any = ref(false)
 const setImage = (e) => {
-  renderer.render(scene, camera) // 确保场景已渲染
+  window.viewGlb.canvasToBase((file) => {
-  const canvas = renderer.domElement
+    console.log(file, 'file')
-
-  canvas.toBlob((blob) => {
-    const file = new File([blob], 'filename.png', { type: 'image/png' })
-    imageData.value = file
-
     const formData = new FormData()
     formData.append('modelId', rowData.id)
-    // rowData.name && formData.append('modelName', rowData.name)
+    file && formData.append('file', file)
-    imageData.value && formData.append('file', imageData.value)
     ModelApi.updatePoster(formData).then((res) => {
       if (res.code == 0 || res.code == 200) {
         ElMessage.success('设置成功')
       }
     })
+  })
 
-    // ElMessage.warning('设置成功')
+  // })
-  }, 'image/png')
 
   // const formData = new FormData()
   // formData.append('modelId', rowData.id)

src/renderer/src/views/components/propertyBox/viewGlb.js

@@ -1,137 +1,132 @@
-import * as THREE from "three";
+import * as THREE from 'three'
 //导入轨道控制器
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 //导入GLTF模型加载器
-import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
 
 class viewGlb {
   constructor(selector) {
-    this.canvasWidth = 900;
+    this.canvasWidth = 900
-    this.canvasHeight = 650;
+    this.canvasHeight = 650
-    this.container = document.querySelector(selector); //获取容器
+    this.container = document.querySelector(selector) //获取容器
-    this.modelInfo = {};
+    this.modelInfo = {}
-    this.scene = null;
+    this.scene = null
-    this.camera = null;
+    this.camera = null
-    this.renderer = null;
+    this.renderer = null
-    this.controls = null;
+    this.controls = null
-    this.init(); //初始化
+    this.init() //初始化
-    this.animate(); //循环函数
+    this.animate() //循环函数
   }
 
   init() {
     // 初始化场景
-    this.initScene();
+    this.initScene()
     // 初始化辅助轴
-    this.initAxesHelper();
+    this.initAxesHelper()
     // 初始化灯光
-    this.initLight();
+    this.initLight()
     // 初始化相机
-    this.initCamera();
+    this.initCamera()
     // 初始化渲染器
-    this.initRender();
+    this.initRender()
     // 初始化轨道控制器
-    this.initControls();
+    this.initControls()
     // 监听场景大小改变，重新渲染尺寸
-    window.addEventListener("resize", this.onWindowResize.bind(this));
+    window.addEventListener('resize', this.onWindowResize.bind(this))
     // this.addGLTFModel()
   }
 
   initScene() {
-    this.scene = new THREE.Scene();
+    this.scene = new THREE.Scene()
     // this.scene.background = new THREE.Color(0xffffff)
   }
 
   initAxesHelper() {
-    const axesHelper = new THREE.AxesHelper(5);
+    const axesHelper = new THREE.AxesHelper(5)
-    this.scene.add(axesHelper);
+    this.scene.add(axesHelper)
   }
 
   initLight() {
-    const hesLight = new THREE.HemisphereLight(0xffffff, 0x444444);
+    const hesLight = new THREE.HemisphereLight(0xffffff, 0x444444)
-    hesLight.intensity = 0.6;
+    hesLight.intensity = 0.6
-    this.scene.add(hesLight);
+    this.scene.add(hesLight)
 
-    const dirLight = new THREE.DirectionalLight();
+    const dirLight = new THREE.DirectionalLight()
-    dirLight.position.set(5, 5, 5);
+    dirLight.position.set(5, 5, 5)
-    this.scene.add(dirLight);
+    this.scene.add(dirLight)
   }
 
   initCamera() {
-    this.camera = new THREE.PerspectiveCamera(
+    this.camera = new THREE.PerspectiveCamera(75, this.canvasWidth / this.canvasHeight, 0.1, 100)
-      75,
-      this.canvasWidth / this.canvasHeight,
-      0.1,
-      100
-    );
     // this.camera.position.set(1.5, 1.5, 1.5)
-    this.camera.position.set(2, 2, 2);
+    this.camera.position.set(2, 2, 2)
   }
 
   initRender() {
     this.renderer = new THREE.WebGLRenderer({
       antialias: true,
-      alpha: true,
+      alpha: true
       // preserveDrawingBuffer: true
-    }); //设置抗锯齿
+    }) //设置抗锯齿
     //设置屏幕像素比
-    this.renderer.setPixelRatio(window.devicePixelRatio);
+    this.renderer.setPixelRatio(window.devicePixelRatio)
     //渲染的尺寸大小
-    this.renderer.setSize(this.canvasWidth, this.canvasHeight);
+    this.renderer.setSize(this.canvasWidth, this.canvasHeight)
     //gltf格式模型纹理贴图
-    this.renderer.outputEncoding = THREE.sRGBEncoding;
+    this.renderer.outputEncoding = THREE.sRGBEncoding
     // 设置背景颜色
-    this.renderer.setClearColor(0x000000, 0);
+    this.renderer.setClearColor(0x000000, 0)
     // 添加到容器
-    this.container.appendChild(this.renderer.domElement);
+    this.container.appendChild(this.renderer.domElement)
   }
 
   render() {
-    this.renderer.render(this.scene, this.camera);
+    this.renderer.render(this.scene, this.camera)
   }
 
   animate() {
-    this.renderer.setAnimationLoop(this.render.bind(this));
+    this.renderer.setAnimationLoop(this.render.bind(this))
   }
 
   initControls() {
-    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+    this.controls = new OrbitControls(this.camera, this.renderer.domElement)
   }
 
   onWindowResize() {
-    this.camera.aspect = this.canvasWidth / this.canvasHeight;
+    this.camera.aspect = this.canvasWidth / this.canvasHeight
-    this.camera.updateProjectionMatrix(); //更新矩阵，将3d内容投射到2d画面上转换
+    this.camera.updateProjectionMatrix() //更新矩阵，将3d内容投射到2d画面上转换
-    this.renderer.setSize(this.canvasWidth, this.canvasHeight);
+    this.renderer.setSize(this.canvasWidth, this.canvasHeight)
   }
 
   addGLTFModel(obj) {
-    this.modelInfo = obj;
+    this.modelInfo = obj
     return new Promise((resolve, reject) => {
-      const loader = new GLTFLoader(); //.setPath('3dModels/')
+      const loader = new GLTFLoader() //.setPath('3dModels/')
       loader.load(obj.model_url, (gltf) => {
-        console.log(gltf);
+        console.log(gltf)
-        this.scene.add(gltf.scene);
+        this.scene.add(gltf.scene)
-        resolve("模型添加成功");
+        resolve('模型添加成功')
-      });
+      })
-    });
+    })
   }
 
   canvasToBase(cb) {
-    this.renderer.render(this.scene, this.camera);
+    this.renderer.render(this.scene, this.camera)
-    let imgData = this.renderer.domElement.toDataURL("image/png");
+    let imgData = this.renderer.domElement.toDataURL('image/png')
-    console.log(imgData);
+    console.log(imgData)
-    let base64 = imgData.replace(/^data:image\/\w+;base64,/, "");
+    let base64 = imgData.replace(/^data:image\/\w+;base64,/, '')
-    let dataBuffer = new Buffer(base64, "base64");
+    let dataBuffer = new Buffer(base64, 'base64')
-    base64ToFile(base64, "image/png", "poster.png");
+    base64ToFile(base64, 'image/png', 'poster.png')
-    console.log(process.cwd());
+    console.log(process.cwd())
-    $root_home_index.$sendElectronChanel("newDir", {
+    $root_home_index.$sendElectronChanel('newDir', {
       name: this.modelInfo.model_name,
-      paths: [process.cwd(), "model_thumb"],
+      paths: [process.cwd(), 'model_thumb'],
-      buffer: dataBuffer,
+      buffer: dataBuffer
-    });
+    })
-    $root_home_index.$recvElectronChanel("newDirRes", (e, res) => {
+    $root_home_index.$recvElectronChanel('newDirRes', (e, res) => {
       // $root_home_index.$message.info(res)
-      cb(res);
+      cb(res)
-    });
+    })
 
     /*;*/
   }
@@ -139,33 +134,33 @@ class viewGlb {
   clearScene() {
     this.scene.traverse((child) => {
       if (child.material) {
-        child.material.dispose();
+        child.material.dispose()
       }
       if (child.geometry) {
-        child.geometry.dispose();
+        child.geometry.dispose()
       }
-      child = null;
+      child = null
-    });
+    })
-    this.container.childNodes[1].remove();
+    this.container.childNodes[1].remove()
-    this.renderer.forceContextLoss();
+    this.renderer.forceContextLoss()
-    this.renderer.dispose();
+    this.renderer.dispose()
-    this.scene.clear();
+    this.scene.clear()
-    this.modelInfo = {};
+    this.modelInfo = {}
-    this.scene = null;
+    this.scene = null
-    this.camera = null;
+    this.camera = null
-    this.controls = null;
+    this.controls = null
-    this.renderer.domElement = null;
+    this.renderer.domElement = null
-    this.renderer = null;
+    this.renderer = null
-    this.container = null;
+    this.container = null
   }
 }
 
 class viewGlbByEarth {
   constructor(selector) {
-    this.viewer = null;
+    this.viewer = null
-    this.modelInfo = null;
+    this.modelInfo = null
-    this.selector = selector;
+    this.selector = selector
-    this.init(selector);
+    this.init(selector)
   }
 
   init(selector) {
@@ -177,22 +172,24 @@ class viewGlbByEarth {
       baseLayerPicker: false,
       sceneModePicker: false,
       animation: false,
-    });
+      fullscreenButton: false, // 禁用全屏按钮
-    const scene = this.viewer.scene;
+      geocoder: false
+    })
+    const scene = this.viewer.scene
     /*this.viewer.scene.screenSpaceCameraController.tiltEventTypes = [
       Cesium.CameraEventType.PINCH,
       Cesium.CameraEventType.RIGHT_DRAG,
     ]*/
     scene.screenSpaceCameraController.zoomEventTypes = [
       Cesium.CameraEventType.WHEEL,
-      Cesium.CameraEventType.PINCH,
+      Cesium.CameraEventType.PINCH
-    ];
+    ]
     scene.screenSpaceCameraController.tiltEventTypes = [
       Cesium.CameraEventType.PINCH,
-      Cesium.CameraEventType.RIGHT_DRAG,
+      Cesium.CameraEventType.RIGHT_DRAG
-    ];
+    ]
-    this.viewer._cesiumWidget._creditContainer.style.display = "none";
+    this.viewer._cesiumWidget._creditContainer.style.display = 'none'
-    scene.globe.depthTestAgainstTerrain = true;
+    scene.globe.depthTestAgainstTerrain = true
     // scene.globe.show = false;
     // scene.sun.show = false;
     // scene.moon.show = false;
@@ -201,46 +198,45 @@ class viewGlbByEarth {
   }
 
   addGltf(obj) {
-    this.modelInfo = obj;
+    this.modelInfo = obj
 
     const czml = [
       {
-        id: "aircraft model",
+        id: 'aircraft model',
-        name: "Cesium Air",
+        name: 'Cesium Air',
         position: {
-          cartographicDegrees: [-77, 37, 10000],
+          cartographicDegrees: [-77, 37, 10000]
         },
         model: {
-          gltf: obj.model_url,
+          // gltf: obj.model_url,
+          gltf: obj,
           scale: 2.0,
-          minimumPixelSize: 128,
+          minimumPixelSize: 128
-        },
+        }
-      },
+      }
-    ];
+    ]
 
     let entity = this.viewer.entities.add({
-      position: Cesium.Cartesian3.fromRadians(
+      position: Cesium.Cartesian3.fromRadians(106.31593773128115, 29.625102082951624),
-        106.31593773128115,
-        29.625102082951624
-      ),
       model: {
-        uri: obj.model_url,
+        // uri: obj.model_url,
-      },
+        uri: obj
-    });
+      }
+    })
 
-    this.viewer.trackedEntity = entity;
+    this.viewer.trackedEntity = entity
   }
 
   canvasToBase(cb) {
     // let imgData = $(`#${this.selector}`).find("canvas")[0].toDataURL("image/png");
     // console.log(imgData)
-    this.viewer.render();
+    this.viewer.render()
-    let imgData = this.viewer.scene.canvas.toDataURL("image/png");
+    let imgData = this.viewer.scene.canvas.toDataURL('image/png')
-    let base64 = imgData.replace(/^data:image\/\w+;base64,/, "");
+    let base64 = imgData.replace(/^data:image\/\w+;base64,/, '')
-    let dataBuffer = new Buffer(base64, "base64");
+    let dataBuffer = new Buffer(base64, 'base64')
-    let file = this.base64ToFile(base64, "image/png", "poster.png");
+    let file = this.base64ToFile(base64, 'image/png', 'poster.png')
     // console.log("ddddddddddddd", file);
-    cb(file);
+    cb(file)
     // $root_home_index.$sendElectronChanel("newDir", {
     //   name: this.modelInfo.model_name, //+ "_" + new Date().getTime(),
     //   paths: [process.cwd(), "model_thumb"],
@@ -255,25 +251,25 @@ class viewGlbByEarth {
   }
   base64ToFile(base64, mime, filename) {
     // let arr = base64.split(",");
-    let type = mime || arr[0].match(/:(.*?);/)[1];
+    let type = mime || arr[0].match(/:(.*?);/)[1]
     // let suffix = mine.split("/")[1];
     // let fileName = filename || `未命名.${suffix}`;
-    let fileName = filename || `未命名.png`;
+    let fileName = filename || `未命名.png`
-    let bstr = atob(base64);
+    let bstr = atob(base64)
-    let n = bstr.length;
+    let n = bstr.length
-    let u8arr = new Uint8Array(n);
+    let u8arr = new Uint8Array(n)
     while (n--) {
-      u8arr[n] = bstr.charCodeAt(n);
+      u8arr[n] = bstr.charCodeAt(n)
     }
-    return new File([u8arr], fileName, { type });
+    return new File([u8arr], fileName, { type })
   }
 
   clearScene() {
-    this.viewer.destroy();
+    this.viewer.destroy()
-    this.viewer = null;
+    this.viewer = null
-    this.modelInfo = null;
+    this.modelInfo = null
-    this.selector = "";
+    this.selector = ''
   }
 }
 
-export { viewGlb, viewGlbByEarth };
+export { viewGlb, viewGlbByEarth }

src/renderer/src/views/home/index.vue

@@ -137,6 +137,7 @@ import { getdefaultLabelStyle } from '../components/propertyBox/defaultLabelStyl
 
 import { setEventBus } from './eventBus'
 import router from '@renderer/router'
+import { ElMessage, ElMessageBox } from 'element-plus'
 
 const { rightMenus } = useRightOperate()
 const firstMenuRef = ref(null)
@@ -164,6 +165,22 @@ if (!localStorage.getItem('defaultLabelStyle')) {
 localStorage.removeItem('weartherSetting')
 
 eventBus.on('openDialog', async (sourceType: any, id: any) => {
+  if (dynamicComponentRef.value?.name == 'ScreenShotHD') {
+    console.log('关闭截图')
+    ElMessageBox.confirm('此操作将会打开新弹窗关闭高清截图功能, 是否继续?', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+      .then(() => {
+        openOtherDialog(sourceType, id)
+      })
+      .catch(() => {})
+  } else {
+    openOtherDialog(sourceType, id)
+  }
+})
+const openOtherDialog = async (sourceType: any, id: any) => {
   if (dynamicComponentRef.value && dynamicComponentRef.value.close) {
     dynamicComponentRef.value.close()
   }
@@ -445,7 +462,7 @@ eventBus.on('openDialog', async (sourceType: any, id: any) => {
       break
   }
   id && dynamicComponentRef.value && (dynamicComponentRef.value.id = id)
-})
+}
 eventBus.on('openSelectImg', (selected, entity) => {
   // $sendElectronChanel("requireGEMarkerName", {
   //   dirName: "GEMarker",