This commit is contained in:
2025-12-22 16:09:02 +08:00
parent 9ddceba80e
commit 969427af3a
8 changed files with 175 additions and 161 deletions

File diff suppressed because one or more lines are too long

View File

@ -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,

View File

@ -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

View File

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

View File

@ -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()
loadModel()
animate()
// initThreeJS()
// loadModel()
// 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) // 确保场景已渲染
const canvas = renderer.domElement
canvas.toBlob((blob) => {
const file = new File([blob], 'filename.png', { type: 'image/png' })
imageData.value = file
window.viewGlb.canvasToBase((file) => {
console.log(file, 'file')
const formData = new FormData()
formData.append('modelId', rowData.id)
// rowData.name && formData.append('modelName', rowData.name)
imageData.value && formData.append('file', imageData.value)
file && formData.append('file', file)
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)

View File

@ -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.canvasHeight = 650;
this.container = document.querySelector(selector); //获取容器
this.modelInfo = {};
this.scene = null;
this.camera = null;
this.renderer = null;
this.controls = null;
this.init(); //初始化
this.animate(); //循环函数
this.canvasWidth = 900
this.canvasHeight = 650
this.container = document.querySelector(selector) //获取容器
this.modelInfo = {}
this.scene = null
this.camera = null
this.renderer = null
this.controls = null
this.init() //初始化
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);
this.scene.add(axesHelper);
const axesHelper = new THREE.AxesHelper(5)
this.scene.add(axesHelper)
}
initLight() {
const hesLight = new THREE.HemisphereLight(0xffffff, 0x444444);
hesLight.intensity = 0.6;
this.scene.add(hesLight);
const hesLight = new THREE.HemisphereLight(0xffffff, 0x444444)
hesLight.intensity = 0.6
this.scene.add(hesLight)
const dirLight = new THREE.DirectionalLight();
dirLight.position.set(5, 5, 5);
this.scene.add(dirLight);
const dirLight = new THREE.DirectionalLight()
dirLight.position.set(5, 5, 5)
this.scene.add(dirLight)
}
initCamera() {
this.camera = new THREE.PerspectiveCamera(
75,
this.canvasWidth / this.canvasHeight,
0.1,
100
);
this.camera = new THREE.PerspectiveCamera(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.updateProjectionMatrix(); //更新矩阵将3d内容投射到2d画面上转换
this.renderer.setSize(this.canvasWidth, this.canvasHeight);
this.camera.aspect = this.canvasWidth / this.canvasHeight
this.camera.updateProjectionMatrix() //更新矩阵将3d内容投射到2d画面上转换
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);
this.scene.add(gltf.scene);
resolve("模型添加成功");
});
});
console.log(gltf)
this.scene.add(gltf.scene)
resolve('模型添加成功')
})
})
}
canvasToBase(cb) {
this.renderer.render(this.scene, this.camera);
let imgData = this.renderer.domElement.toDataURL("image/png");
console.log(imgData);
let base64 = imgData.replace(/^data:image\/\w+;base64,/, "");
let dataBuffer = new Buffer(base64, "base64");
base64ToFile(base64, "image/png", "poster.png");
console.log(process.cwd());
$root_home_index.$sendElectronChanel("newDir", {
this.renderer.render(this.scene, this.camera)
let imgData = this.renderer.domElement.toDataURL('image/png')
console.log(imgData)
let base64 = imgData.replace(/^data:image\/\w+;base64,/, '')
let dataBuffer = new Buffer(base64, 'base64')
base64ToFile(base64, 'image/png', 'poster.png')
console.log(process.cwd())
$root_home_index.$sendElectronChanel('newDir', {
name: this.modelInfo.model_name,
paths: [process.cwd(), "model_thumb"],
buffer: dataBuffer,
});
$root_home_index.$recvElectronChanel("newDirRes", (e, res) => {
paths: [process.cwd(), 'model_thumb'],
buffer: dataBuffer
})
$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;
});
this.container.childNodes[1].remove();
this.renderer.forceContextLoss();
this.renderer.dispose();
this.scene.clear();
this.modelInfo = {};
this.scene = null;
this.camera = null;
this.controls = null;
this.renderer.domElement = null;
this.renderer = null;
this.container = null;
child = null
})
this.container.childNodes[1].remove()
this.renderer.forceContextLoss()
this.renderer.dispose()
this.scene.clear()
this.modelInfo = {}
this.scene = null
this.camera = null
this.controls = null
this.renderer.domElement = null
this.renderer = null
this.container = null
}
}
class viewGlbByEarth {
constructor(selector) {
this.viewer = null;
this.modelInfo = null;
this.selector = selector;
this.init(selector);
this.viewer = null
this.modelInfo = null
this.selector = selector
this.init(selector)
}
init(selector) {
@ -177,22 +172,24 @@ class viewGlbByEarth {
baseLayerPicker: false,
sceneModePicker: false,
animation: false,
});
const scene = this.viewer.scene;
fullscreenButton: false, // 禁用全屏按钮
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,
];
this.viewer._cesiumWidget._creditContainer.style.display = "none";
scene.globe.depthTestAgainstTerrain = true;
Cesium.CameraEventType.RIGHT_DRAG
]
this.viewer._cesiumWidget._creditContainer.style.display = 'none'
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",
name: "Cesium Air",
id: 'aircraft model',
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(
106.31593773128115,
29.625102082951624
),
position: Cesium.Cartesian3.fromRadians(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();
let imgData = this.viewer.scene.canvas.toDataURL("image/png");
let base64 = imgData.replace(/^data:image\/\w+;base64,/, "");
let dataBuffer = new Buffer(base64, "base64");
let file = this.base64ToFile(base64, "image/png", "poster.png");
this.viewer.render()
let imgData = this.viewer.scene.canvas.toDataURL('image/png')
let base64 = imgData.replace(/^data:image\/\w+;base64,/, '')
let dataBuffer = new Buffer(base64, 'base64')
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 bstr = atob(base64);
let n = bstr.length;
let u8arr = new Uint8Array(n);
let fileName = filename || `未命名.png`
let bstr = atob(base64)
let n = bstr.length
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 = null;
this.modelInfo = null;
this.selector = "";
this.viewer.destroy()
this.viewer = null
this.modelInfo = null
this.selector = ''
}
}
export { viewGlb, viewGlbByEarth };
export { viewGlb, viewGlbByEarth }

View File

@ -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",