Mars3D-screen_web/src/views/goverment/largeScreen/components/flyRoam.vue

<template>
	<div class="main-content">
		<div class="main-content-title">
			<span>飞行漫游</span>
			<el-icon size="16" color="#fff" @click="closeDiv"><Close /></el-icon>
		</div>
		<div class="btn-operate">
			<el-button type="primary" @click="addRoute">新增路线</el-button>
			<el-button type="primary">导入</el-button>
			<el-button type="primary">导出</el-button>
		</div>
		<div class="table-operate">
			<el-table :data="tableData" rowKey="id">
				<el-table-column prop="name" align="center" label="名称" />
				<el-table-column align="center" label="操作">
					<template #default="{ row, $index }">
						<el-button link type="primary" @click="flyToModel(row)">漫游</el-button>
						<!-- <el-button link type="primary">编辑</el-button> -->
						<el-button link type="primary" @click="deleteRoute(row, $index)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script lang="ts" setup>
//引入cesium基础库
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
import * as Cesium from "mars3d-cesium";
//导入mars3d主库
import "mars3d/dist/mars3d.css";
import * as mars3d from "mars3d";
import { ref, watch, onMounted, onUnmounted } from "vue";
import { ElMessage } from "element-plus";
import { GlobalStore } from "@/stores";
const globalStore = GlobalStore();
const props = defineProps(["mapInstance"]);
const emits = defineEmits(["hiddenConfim"]);
const tableData = ref<any>([]);
let map: any = props.mapInstance;
let graphicLayer: any;
let dataIndex = 0 as any;
const colors = [
	"rgb(40, 40, 255)",
	"rgb(0, 88, 176)",
	"rgb(0, 128, 255)",
	"rgb(0, 217, 0)",
	"rgb(0, 151, 0)",
	"rgb(255, 199, 83)",
	"rgb(255, 144, 30)",
	"rgb(202, 101, 0)",
	"rgb(255, 0, 0)"
];
onMounted(() => {
	graphicLayer = new mars3d.layer.GraphicLayer({
		hasEdit: false,
		isAutoEditing: false // 绘制完成后是否自动激活编辑
	});
	map.addLayer(graphicLayer);
});
// 删除漫游路线
const deleteRoute = (row: any, index: number) => {
	const routeData = graphicLayer.getGraphicById(row.id);
	routeData && routeData.remove(true);
	tableData.value.splice(index, 1);
};
// 模型路线漫游
const flyToModel = (row: any) => {
	const routeData = graphicLayer.getGraphicById("0");
	console.log(routeData);
	// 启动漫游
	routeData.flyTo();
	routeData.start();
};
// 生成路线
const productRoute = (obj: any) => {
	console.log(obj.id);
	const item = {
		id: obj.id,
		name: "路线-" + dataIndex
	};
	tableData.value.unshift(item);
	const routePath = new mars3d.graphic.FixedRoute({
		id: dataIndex + "",
		name: "111",
		speed: 10000,
		positions: obj.points,
		model: {
			url: "//data.mars3d.cn/gltf/mars/MQ-9-Predator.glb",
			scale: 1,
			minimumPixelSize: 60
		},
		path: {
			color: "#ffff00",
			opacity: 0.5,
			width: 1,
			leadTime: 0
		},
		coneTrack: {
			angle: 15, // 半场角度
			color: "rgba(255,0,255,0.5)"
		},
		updateClock: false,
		point: {
			color: "#ffff00",
			pixelSize: 5,
			distanceDisplayCondition: true,
			distanceDisplayCondition_near: 80000,
			distanceDisplayCondition_far: Number.MAX_VALUE
		},
		label: {
			text: "测试",
			font_size: 20,
			pixelOffsetX: 0,
			pixelOffsetY: -20,
			scaleByDistance: true,
			scaleByDistance_far: 80000,
			scaleByDistance_farValue: 0.4,
			distanceDisplayCondition: true,
			distanceDisplayCondition_far: 80000
		}
	});
	graphicLayer.addGraphic(routePath);
	dataIndex++;
};
// 绘制路线
const addRoute = () => {
	graphicLayer.startDraw({
		type: "polyline",
		style: {
			pixelSize: 12,
			color: "#3388ff"
		},
		success: function (graphic: any) {
			console.log(graphic);
			productRoute(graphic);
			// eslint-disable-next-line no-console
			// console.log(JSON.stringify(graphic.coordinates));
		}
	});
};
const closeDiv = () => {
	emits("hiddenConfim");
};
onUnmounted(() => {
	map = null;
});
</script>

<style scoped lang="scss">
@mixin flex {
	display: flex;
	align-items: center;
}
// 菜单弹框出现动画
@keyframes fadeIn {
	0% {
		opacity: 0;
		transform: translate3d(100%, 0, 0);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}
.main-content {
	position: absolute;
	top: 60px;
	right: 10px;
	padding-bottom: 10px;
	background-image: none !important;
	border: 1px solid #008aff70;
	border-radius: 2px !important;
	background-color: rgba(23, 49, 71, 0.8);
	width: 300px;
	box-shadow: 0 4px 15px 1px #02213bb3;
	animation: fadeIn 1s;
	&-title {
		@include flex;
		width: 100%;
		height: 40px;
		padding: 0 5px 0 10px;
		background-color: #173147;
		span {
			font-size: 16px;
			color: #0089fe;
			margin-right: auto;
		}
		:deep() {
			.el-icon {
				cursor: pointer;
			}
		}
	}
	.btn-operate {
		@include flex;
		justify-content: center;
		margin-top: 10px;
		:deep() {
			.el-button {
				margin-left: 10px;
			}
		}
	}

	.table-operate {
		width: 95%;
		margin: 0 auto;
		margin-top: 10px;
	}
}
</style>