From 90015511b6a5a9fb911c447d0d1397efea32d2eb Mon Sep 17 00:00:00 2001
From: kun <1422840143@qq.com>
Date: Fri, 20 Oct 2023 18:32:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=83=A8=E5=88=86=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stores/index.ts                           |   2 +
 src/stores/interface/index.ts                 |   1 +
 .../largeScreen/components/flyRoam.vue        | 213 ++++++++++++++++++
 .../largeScreen/components/mapPrint.vue       | 109 +++++++++
 .../largeScreen/components/myTags.vue         |   1 -
 .../largeScreen/components/viewBookmark.vue   | 203 +++++++++++++++++
 src/views/goverment/largeScreen/config.json   |   5 +
 src/views/goverment/largeScreen/index.vue     |  26 ++-
 8 files changed, 555 insertions(+), 5 deletions(-)
 create mode 100644 src/views/goverment/largeScreen/components/flyRoam.vue
 create mode 100644 src/views/goverment/largeScreen/components/mapPrint.vue
 create mode 100644 src/views/goverment/largeScreen/components/viewBookmark.vue

diff --git a/src/stores/index.ts b/src/stores/index.ts
index a9bb2dc..7e9f1f3 100644
--- a/src/stores/index.ts
+++ b/src/stores/index.ts
@@ -45,6 +45,8 @@ export const GlobalStore = defineStore({
 		activeSn: "",
 		// 右侧抽屉选择的Id值
 		activeId: "",
+		// 视角书签
+		viewBookmarkArr: "",
 		// themeConfig
 		themeConfig: {
 			// 当前页面是否全屏
diff --git a/src/stores/interface/index.ts b/src/stores/interface/index.ts
index 10a0bd3..84effde 100644
--- a/src/stores/interface/index.ts
+++ b/src/stores/interface/index.ts
@@ -23,6 +23,7 @@ export interface GlobalState {
 	activeType: string;
 	activeSn: string;
 	activeId: string;
+	viewBookmarkArr: string;
 }
 
 /* themeConfigProp */
diff --git a/src/views/goverment/largeScreen/components/flyRoam.vue b/src/views/goverment/largeScreen/components/flyRoam.vue
new file mode 100644
index 0000000..78b6666
--- /dev/null
+++ b/src/views/goverment/largeScreen/components/flyRoam.vue
@@ -0,0 +1,213 @@
+<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>
diff --git a/src/views/goverment/largeScreen/components/mapPrint.vue b/src/views/goverment/largeScreen/components/mapPrint.vue
new file mode 100644
index 0000000..fbff80d
--- /dev/null
+++ b/src/views/goverment/largeScreen/components/mapPrint.vue
@@ -0,0 +1,109 @@
+<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="downLoadImg">存为图片</el-button>
+			<el-button type="primary" @click="printImg">打印</el-button>
+		</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";
+import printJS from "print-js";
+const importRef = ref();
+const globalStore = GlobalStore();
+const props = defineProps(["mapInstance"]);
+const emits = defineEmits(["hiddenConfim"]);
+let map: any = props.mapInstance;
+onMounted(() => {});
+// 打印
+const printImg = () => {
+	printJS({
+		printable: "mars3dContainer",
+		type: "html",
+		targetStyles: ["*"],
+		maxWidth: 2500,
+		style: "@page{size:auto; margin: 0;}" + "@media print { @page {size: landscape } }"
+	});
+};
+// 导出图片
+const downLoadImg = () => {
+	map.expImage();
+};
+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;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/goverment/largeScreen/components/myTags.vue b/src/views/goverment/largeScreen/components/myTags.vue
index 016ecaa..1fc5b18 100644
--- a/src/views/goverment/largeScreen/components/myTags.vue
+++ b/src/views/goverment/largeScreen/components/myTags.vue
@@ -50,7 +50,6 @@ import "mars3d/dist/mars3d.css";
 import * as mars3d from "mars3d";
 import { ref, watch, onMounted, onUnmounted } from "vue";
 import { ElMessage } from "element-plus";
-import { Console } from "console";
 import { GlobalStore } from "@/stores";
 const importRef = ref();
 const globalStore = GlobalStore();
diff --git a/src/views/goverment/largeScreen/components/viewBookmark.vue b/src/views/goverment/largeScreen/components/viewBookmark.vue
new file mode 100644
index 0000000..92490ff
--- /dev/null
+++ b/src/views/goverment/largeScreen/components/viewBookmark.vue
@@ -0,0 +1,203 @@
+<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="input-add">
+			<el-input v-model="textVal" placeholder="请输入" />
+			<el-button type="primary" @click="addView">添加</el-button>
+		</div>
+		<div class="list-box" v-if="listArr.length > 0">
+			<div class="list-item" v-for="(item, index) in listArr" :key="index">
+				<img :src="item.img" alt="" @click="flytoView(item)" />
+				<!-- <el-image style="width: 100%; height: 200px" :src="item.img" @click="flytoView(item)" /> -->
+				<div>
+					<span>{{ item.name }}</span>
+					<el-icon size="14" color="#fff" @click="delteMark(index)" style="cursor: pointer"><Delete /></el-icon>
+				</div>
+			</div>
+		</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";
+import { base64ToImg } from "@/api/modules/common";
+const props = defineProps(["mapInstance"]);
+const emits = defineEmits(["hiddenConfim"]);
+const globalStore = GlobalStore();
+const listArr = ref<any>([]);
+const textVal = ref("");
+let map: any = props.mapInstance;
+onMounted(() => {
+	try {
+		const data = JSON.parse(globalStore.viewBookmarkArr);
+		if (data && data.length > 0) {
+			console.log("历史数据", data);
+			for (let i = 0; i < data.length; i++) {
+				const item = data[i];
+				// 删除未匹配项
+				// if (listArr.value[0].img === "") {
+				//   formState.imgObject.splice(0, 1)
+				//   formState.found = true
+				// }
+				listArr.value.push(item);
+			}
+		}
+	} catch (err) {}
+});
+// 飞到对应视角
+const flytoView = (item: any) => {
+	map.setCameraView(item.center);
+};
+// 删除视角书签
+const delteMark = (index: number) => {
+	listArr.value.splice(index, 1);
+	// 记录到历史数据
+	globalStore.viewBookmarkArr = JSON.stringify(listArr.value);
+};
+// 添加视角书签
+const addView = () => {
+	if (!textVal.value) {
+		ElMessage("请先输入名称");
+		return;
+	}
+	// 不能使用相同名称
+	if (listArr.value.some((item: any) => item.name === textVal.value)) {
+		ElMessage(textVal.value + " 已存在，请更换名称");
+		return;
+	}
+	const item = {
+		name: textVal.value,
+		center: map.getCameraView(),
+		img: ""
+	};
+	map
+		.expImage({
+			download: false,
+			width: 300
+		})
+		.then(async (response: any) => {
+			console.log(response);
+			// const { result } = await base64ToImg({
+			// 	base64: response.image
+			// });
+			item.img = response.image;
+			listArr.value.unshift(item);
+			console.log(listArr.value);
+			// 记录到历史数据
+			globalStore.viewBookmarkArr = JSON.stringify(listArr.value);
+			textVal.value = "";
+		});
+};
+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;
+			}
+		}
+	}
+	.input-add {
+		@include flex;
+		justify-content: center;
+		padding: 0 10px;
+		margin-top: 10px;
+		:deep() {
+			.el-input {
+				// width: 40%;
+				margin-right: 10px;
+			}
+		}
+	}
+	.list-box::-webkit-scrollbar {
+		width: 0; /* 隐藏滚动条 */
+	}
+	.list-box {
+		max-height: 500px;
+		overflow-y: scroll;
+		padding: 0 10px;
+		margin-top: 10px;
+		.list-item {
+			border: 1px solid #fff;
+			padding-bottom: 10px;
+			> img {
+				width: 100%;
+				height: 200px;
+			}
+			> div {
+				@include flex;
+				margin-top: 5px;
+				span {
+					display: inline-block;
+					width: 92%;
+					font-size: 14px;
+					color: white;
+					text-align: center;
+				}
+			}
+		}
+		.list-item:not(:last-child) {
+			margin-bottom: 10px;
+		}
+		.list-item:hover {
+			background-color: #3e3d35;
+			border-color: #2f659a;
+		}
+	}
+}
+</style>
diff --git a/src/views/goverment/largeScreen/config.json b/src/views/goverment/largeScreen/config.json
index 6b2f0a0..47ba8fe 100644
--- a/src/views/goverment/largeScreen/config.json
+++ b/src/views/goverment/largeScreen/config.json
@@ -30,6 +30,11 @@
 				"enableZoom": true,
 				"enableCollisionDetection": true,
 				"minimumCollisionTerrainHeight": 15000
+			},
+			"contextOptions": {
+				"webgl": {
+					"preserveDrawingBuffer": true
+				}
 			}
 		},
 		"control": {
diff --git a/src/views/goverment/largeScreen/index.vue b/src/views/goverment/largeScreen/index.vue
index 41eb2af..bf1c187 100644
--- a/src/views/goverment/largeScreen/index.vue
+++ b/src/views/goverment/largeScreen/index.vue
@@ -88,6 +88,12 @@
 		<RegionalNavigation :mapInstance="map" v-if="regionalNavigationShow" @hiddenConfim="regionalNavigationShow = false" />
 		<!-- 我的标记弹框 -->
 		<MyTags :mapInstance="map" v-if="myTagsShow" @hiddenConfim="myTagsShow = false" />
+		<!-- 视角书签弹框 -->
+		<ViewBookmark :mapInstance="map" v-if="ViewBookmarkShow" @hiddenConfim="ViewBookmarkShow = false" />
+		<!-- 地图打印弹框 -->
+		<MapPrint :mapInstance="map" v-if="MapPrintShow" @hiddenConfim="MapPrintShow = false" />
+		<!-- 飞行漫游弹框 -->
+		<FlyRoam :mapInstance="map" v-if="FlyRoamShow" @hiddenConfim="FlyRoamShow = false" />
 	</div>
 
 	<!-- <div class="option-list">
@@ -197,6 +203,12 @@ import SpaceAnalysis from "./components/spaceAnalysis.vue";
 import CoordinatePicking from "./components/coordinatePicking.vue";
 import RegionalNavigation from "./components/regionalNavigation.vue";
 import MyTags from "./components/myTags.vue";
+import ViewBookmark from "./components/viewBookmark.vue";
+import MapPrint from "./components/mapPrint.vue";
+import FlyRoam from "./components/flyRoam.vue";
+const FlyRoamShow = ref(false); // 飞行漫游弹框
+const MapPrintShow = ref(false); // 地图打印弹框
+const ViewBookmarkShow = ref(false); // 视角书签弹框
 const myTagsShow = ref(false); // 我的标记弹框
 const regionalNavigationShow = ref(false); // 地区导航弹框
 const pickingShow = ref(false); // 坐标定位弹框
@@ -317,10 +329,10 @@ const data = [
 			{ name: "空间分析", icon: "analysis", widget: "analysis" },
 			{ name: "坐标定位", icon: "local", widget: "location-point" },
 			{ name: "地区导航", icon: "navigation", widget: "location-region" },
-			{ name: "我的标记", icon: "mark", widget: "addmarker" }
-			// { name: "视角书签", icon: "bookmark", widget: "bookmark" },
-			// { name: "地图打印", icon: "printer", widget: "print" },
-			// { name: "飞行漫游", icon: "take-off", widget: "roamLine-list" },
+			{ name: "我的标记", icon: "mark", widget: "addmarker" },
+			{ name: "视角书签", icon: "bookmark", widget: "bookmark" },
+			{ name: "地图打印", icon: "printer", widget: "print" },
+			{ name: "飞行漫游", icon: "take-off", widget: "roamLine-list" },
 			// { name: "图上标绘", icon: "hand-painted-plate", widget: "plot" },
 			// { name: "路线导航", icon: "connection", widget: "query-route" },
 			// { name: "卷帘对比", icon: "switch-contrast", widget: "map-split" },
@@ -360,6 +372,12 @@ const clickMenu = (name: any) => {
 		regionalNavigationShow.value = true;
 	} else if (name == "我的标记") {
 		myTagsShow.value = true;
+	} else if (name == "视角书签") {
+		ViewBookmarkShow.value = true;
+	} else if (name == "地图打印") {
+		MapPrintShow.value = true;
+	} else if (name == "飞行漫游") {
+		FlyRoamShow.value = true;
 	}
 };
 // 获取Canvas对象