JT-CIM/src/views/Map3d/components/viewerlabel.vue

<script setup>
	import {
		inject
	} from "vue";
	import html2canvas from 'html2canvas';
	import {Store} from '@/store/index';
	store = Store()
	import {
		blobToBase64,
		base64ToBlob
	} from '@/assets/js/blobtobase64';
	const getMapInstance = inject("getMapInstance");
	jt3d = getMapInstance();
</script>

<template>
	<div class="mainview">
		<div class="header">
			<input @input="getName()" id="inputValue" type="text" placeholder="创建视角标签" />
			<el-button v-if="store.userport=='PC'" type="primary" @click="addviewer" size="small">添加</el-button>
			<el-button type="primary" @click="searchviewer" size="small">查询</el-button>
		</div>
		<div class="middleviewer">
			<div class="viewer" v-for="(res,index) in ImgurlList" :key="index">
				<div class="viewertop">
					<img :src="res.url" @click="flyto(res.info)">
				</div>
				<div class="viewerbottom">
					{{res.name}}
					<img src="@/assets/images/delete.png" class="deleteImg" @click="deleteviewer(res,index)" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	let store = undefined;
	let jt3d = undefined;
	export default {
		data() {
			return {
				viewersName: '', //视角标签名称
				ImgurlList: [], //截图地址列表
			}
		},
		methods: {
			//获取输入框值
			getName() {
				this.viewersName = document.getElementById("inputValue").value;
			},

			//跳转方法
			flyto(options) {
				jt3d.LocateUtil.flyToPoint(options)
			},

			//删除方法，传keyvalue以及需要修改属性
			deleteviewer(item, index) {
				//删除对应数组内的对象
				this.ImgurlList.splice(index, 1)
				if (item.id) {
					this.$http.get('/delete', {
						tableName: 'map_angle',
						keyValue: item.id,
					}).then(res => {
						console.log(res.data)
					})
				}
			},

			//添加视角标签，当前页存数组，向数据库传入相机参数
			addviewer() {
				//获取当前界面截图方法
				html2canvas(
					this.$parent.$parent.$refs.refMap3d.$refs.cesiumContainer, {
						// backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
						useCORS: true, //支持图片跨域
						scale: 1 / 8, //设置放大的倍数
					}
				).then(canvas => {
					//截图用img元素承装，显示在页面的上
					let url = canvas.toDataURL('image/png')
					//经纬度、高度
					// 获取 相机姿态信息
					let heading = window["viewer"].scene.camera.heading
					let pitch = window["viewer"].scene.camera.pitch
					let roll = window["viewer"].scene.camera.roll
					let position = window["viewer"].scene.camera.positionCartographic
					let longitude = Cesium.Math.toDegrees(position.longitude) //y
					let latitude = Cesium.Math.toDegrees(position.latitude) //x
					let height = position.height
					let info = {
						latitude: latitude,
						longitude: longitude,
						height: height,
						pitch: Cesium.Math.toDegrees(pitch),
						roll: Cesium.Math.toDegrees(roll),
						heading: Cesium.Math.toDegrees(heading)
					}
					//dom for循环渲染列表
					this.ImgurlList.unshift({
						url: url,
						name: this.viewersName,
						info: info
					})

					//base64转换为二进制文件
					// let blob = base64ToBlob(url)
					// //文件转为文件流
					// let formData = new FormData();
					// formData.append('file',blob)

					let data = {
						name: this.viewersName,
						x: latitude,
						y: longitude,
						z: height,
						pitch: Cesium.Math.toDegrees(pitch),
						roll: Cesium.Math.toDegrees(roll),
						heading: Cesium.Math.toDegrees(heading),
						screenshot: url,
						// screenshot: '',
						userId: this.id,
						// id:0
					}

					//添加数据接口
					this.$http.post('/postSubmit', {
						tableName: 'map_angle',
						keyValue: '',
						formData: data,
					}).then(res => {
						console.log(res)
						if (res.success == true) {
							console.log('添加成功')
							document.getElementById("inputValue").value = ''
						}
					})
				}).catch(err => {
					console.log(err)
				})
			},
			searchviewer() {
				this.info = JSON.parse(localStorage.getItem('person'))
				this.id = this.info.id
				//获取所有图片数据
				this.$http.get('/getTableList', {
					tableName: 'map_angle', //
					sqlWhere: "name like '%" + this.viewersName + "%'",
					orderByField: ''
				}).then(res => {
					console.log('获取图片', res.data)
					this.ImgurlList = [];
					res.data.forEach(item => {
						let info = {
							latitude: item.x,
							longitude: item.y,
							height: item.z,
							pitch: item.pitch,
							roll: item.roll,
							heading: item.heading
						}
						// let url = blobToBase64(item.screenshot)
						//dom for循环渲染列表
						this.ImgurlList.push({
							url: item.screenshot,
							name: item.name,
							info: info,
							id: item.id
						})
					})

					// console.log('img列表',this.ImgurlList)
				})
			}
		},

		mounted() {
			this.info = JSON.parse(localStorage.getItem('person'))
			this.id = this.info.id
			//获取所有图片数据
			this.$http.get('/getTableList', {
				tableName: 'map_angle', //
				sqlWhere: '', //+ this.loginForm.id
				orderByField: ''
			}).then(res => {
				console.log('获取图片', res.data)
				if(res.data.length == 0) return
				res.data.forEach(item => {
					let info = {
						latitude: item.x,
						longitude: item.y,
						height: item.z,
						pitch: item.pitch,
						roll: item.roll,
						heading: item.heading
					}
					// let url = blobToBase64(item.screenshot)
					//dom for循环渲染列表
					this.ImgurlList.push({
						url: item.screenshot,
						name: item.name,
						info: info,
						id: item.id
					})
				})

				// console.log('img列表',this.ImgurlList)
			})
		}
	}
</script>

<style lang="scss" scoped>
	.el-button--small{
		--el-button-size:24rem;
		font-size:12rem;
		padding: 5rem 12rem;
	}
	
	.mainview {
		width: 100%;
		height: 100%;
		height: calc(calc(100% - 115rem) / 3 + 90rem);

		.header {
			width: 100%;
			display: flex;

			input,
			input:focus {
				outline: none;
				width: 185rem !important;
				border: 1rem solid rgba(255, 255, 255, 0.8);
				margin-right: 10rem;
				height: 26rem !important;
				color: rgba(255, 255, 255, 1);
				background-color: rgba(255, 255, 255, 0) !important;
				border-radius: 3rem;
			}
		}

		.middleviewer {
			width: 322rem;
			height: 100%;
			margin-left: 7rem;

			.viewer {
				width: 322rem !important;
				height: 240rem !important;
				margin-top: 15rem;
				border: 1rem solid #ffffff !important;
				border-radius: 1rem !important;

				.viewertop {
					width: 322rem !important;
					height: 210rem !important;

					img {
						width: 100% !important;
						height: 100% !important;
					}
				}

				.viewerbottom {
					line-height: 30rem !important;
					text-align: center !important;
					width: 322rem !important;
					height: 30rem !important;
					position: relative;
					background-color: rgba(15, 145, 185, 0.7);

					.deleteImg {
						width: 24rem;
						height: 24rem;
						right: 5rem;
						top: 3rem;
						position: absolute;
					}
				}
			}
		}
	}

	::v-deep .el-input {
		flex-grow: 0 !important;
		width: 200rem !important;
		// display: inline !important;
		// margin-left: 5rem;
		margin-right: 10rem;
		height: 30rem !important;
	}

	//输入框文字颜色
	::v-deep .el-input__inner {
		color: rgba(255, 255, 255, 1)
	}

	//输入框背景色
	::v-deep .el-input__wrapper {
		background-color: rgba(255, 255, 255, 0) !important;
	}

	::v-deep .el-button {
		border-radius: 3rem !important;

	}

	::v-deep .el-button--primary {
		background-color: rgba(64, 158, 255, 0.6) !important;
	}

	::-webkit-scrollbar {
		width: 0rem;
	}
</style>