修改
This commit is contained in:
Binary file not shown.
12
src/renderer/public/sdk/YJEarth.min.js
vendored
12
src/renderer/public/sdk/YJEarth.min.js
vendored
File diff suppressed because one or more lines are too long
@ -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,
|
||||
|
||||
@ -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
|
||||
|
||||
@ -125,8 +125,10 @@ const getResultData = (data) => {
|
||||
// eventBus.emit('mapPrintDialog')
|
||||
}
|
||||
}
|
||||
const name = 'ScreenShotHD'
|
||||
defineExpose({
|
||||
open
|
||||
open,
|
||||
name
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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 }
|
||||
|
||||
@ -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",
|
||||
|
||||
Reference in New Issue
Block a user