From 22480ff8e8b54a221d6b83dcf9ef1a080c4c7c9a Mon Sep 17 00:00:00 2001
From: kun <1422840143@qq.com>
Date: Tue, 17 Oct 2023 18:34:40 +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

---
 .../largeScreen/components/mapMeasurement.vue | 305 ++++++++++++++++++
 src/views/goverment/largeScreen/index.vue     | 289 ++++++++++++++---
 2 files changed, 548 insertions(+), 46 deletions(-)
 create mode 100644 src/views/goverment/largeScreen/components/mapMeasurement.vue

diff --git a/src/views/goverment/largeScreen/components/mapMeasurement.vue b/src/views/goverment/largeScreen/components/mapMeasurement.vue
new file mode 100644
index 0000000..b016d20
--- /dev/null
+++ b/src/views/goverment/largeScreen/components/mapMeasurement.vue
@@ -0,0 +1,305 @@
+<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="main-content-menu">
+			<div v-for="(item, i) in menuList" :key="i" class="menu-item" @click="mapOperate(item.name)">
+				<div><img class="icon" src="@/assets/images/icon/fire.png" alt="" srcset="" /></div>
+				<div>{{ item.name }}</div>
+			</div>
+		</div>
+		<div class="only-modal">
+			<el-checkbox v-model="formData.checkVal" @change="onlyPickModelPosition">仅测量模型(不拾取地形)</el-checkbox>
+		</div>
+		<div class="unit-select">
+			<span>单位</span>
+			<el-select v-model="formData.unitVal" placeholder="请选择">
+				<el-option v-for="item in unitList" :key="item.value" :label="item.name" :value="item.value" />
+			</el-select>
+		</div>
+		<div class="distance-show" v-if="formData.distanceVal">
+			<span>{{ formData.distanceVal }}</span>
+		</div>
+		<div class="empty-btn">
+			<el-button type="primary" @click="emptyMeasure">清空测量数据</el-button>
+		</div>
+	</div>
+	<div class="echarts-content" v-if="echartShow">sss</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 } from "vue";
+const props = defineProps(["show", "mapInstance"]);
+const emits = defineEmits(["hiddenConfim"]);
+const echartShow = ref<boolean>(false);
+const unitList = ref([
+	{ name: "自动", value: "auto" },
+	{ name: "米", value: "m" },
+	{ name: "公里", value: "km" },
+	{ name: "海里", value: "mile" },
+	{ name: "丈", value: "zhang " }
+]);
+const formData = ref({
+	checkVal: false,
+	unitVal: null,
+	distanceVal: 0
+});
+const menuList = ref([
+	{ name: "空间距离" },
+	{ name: "贴地距离" },
+	{ name: "剖面" },
+	{ name: "水平面积" },
+	{ name: "贴地面积" },
+	{ name: "角度" },
+	{ name: "三角测量" },
+	{ name: "坐标测量" },
+	{ name: "高度差" }
+]);
+let map: any = props.mapInstance;
+let measure: any;
+// 清空测量数据
+const emptyMeasure = () => {
+	measure.clear();
+	formData.value.distanceVal = 0;
+};
+const onlyPickModelPosition = () => {
+	// 控制鼠标只取模型上的点，忽略地形上的点的拾取
+	map.onlyPickModelPosition = formData.value.checkVal;
+};
+const closeDiv = () => {
+	emits("hiddenConfim");
+};
+const mapOperate = (name: any) => {
+	console.log(name);
+	if (name == "空间距离") {
+		measure.distance({
+			showAddText: true,
+			// label: {
+			// 	type: "div",
+			// 	updateText: function (text: any, graphic: any) {
+			// 		// 必须，用于动态更新text
+			// 		graphic.html = `<div class="marsGreenGradientPnl" style="color: #fff;">${text}</div>`;
+			// 	},
+			// 	// 下面是graphic对应类型本身的参数
+			// 	html: `<div class="marsGreenGradientPnl"></div>`,
+			// 	horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+			// 	verticalOrigin: Cesium.VerticalOrigin.BOTTOM
+			// },
+			unit: formData.value.unitVal
+			// style: {
+			//     color: '#ffff00',
+			//     width: 3,
+			//     clampToGround: false // 是否贴地
+			// }
+		});
+	} else if (name == "贴地距离") {
+		measure.distanceSurface({
+			showAddText: true,
+			unit: formData.value.unitVal,
+			exact: false // 是否进行精确计算, 传false时是否快速概略计算方式，该方式计算精度较低，但计算速度快，仅能计算在当前视域内坐标的高度
+		});
+	} else if (name == "剖面") {
+		measure.section({
+			splitNum: 300, // 插值次数
+			unit: formData.value.unitVal,
+			exact: false
+		});
+	} else if (name == "水平面积") {
+		measure.area({
+			unit: formData.value.unitVal
+			// style: {
+			//   color: '#00fff2',
+			//   opacity: 0.4,
+			//   outline: true,
+			//   outlineColor: '#fafa5a',
+			//   outlineWidth: 1,
+			//   clampToGround: false //贴地
+			// }
+		});
+	} else if (name == "贴地面积") {
+		measure.areaSurface({
+			unit: formData.value.unitVal,
+			style: {
+				color: "#ffff00"
+			},
+			splitNum: 10, // step插值分割的个数
+			exact: false // 是否进行精确计算， 传false时是否快速概略计算方式，该方式计算精度较低，但计算速度快，仅能计算在当前视域内坐标的高度
+		});
+	} else if (name == "角度") {
+		measure.angle();
+	} else if (name == "三角测量") {
+		measure.heightTriangle({
+			unit: formData.value.unitVal
+		});
+	} else if (name == "坐标测量") {
+		measure.point();
+	} else if (name == "高度差") {
+		measure.height({
+			unit: formData.value.unitVal
+		});
+	}
+};
+onMounted(() => {
+	console.log(map, "66666");
+	measure = new mars3d.thing.Measure({
+		label: {
+			color: "#ffffff",
+			font_family: "楷体",
+			font_size: 20,
+			background: false
+		}
+	});
+	map.addThing(measure);
+	// 触发事件：开始分析前
+	measure.on(mars3d.EventType.start, function (e: any) {
+		console.log("开始分析", e);
+	});
+	// 触发事件：异步分析完成后
+	measure.on(mars3d.EventType.end, function (e: any) {
+		console.log(e);
+		formData.value.distanceVal = e.label;
+		// echartShow.value = true;
+	});
+});
+</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: 0 !important;
+	background-image: none !important;
+	border: 1px solid #008aff70;
+	border-radius: 2px !important;
+	background-color: rgba(23, 49, 71, 0.8);
+	width: 300px;
+	height: 500px;
+	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: white;
+			margin-right: auto;
+		}
+		:deep() {
+			.el-icon {
+				cursor: pointer;
+			}
+		}
+	}
+	&-menu {
+		width: 90%;
+		height: max-content;
+		margin: 0 auto;
+		overflow-y: scroll;
+		.menu-item {
+			display: inline-block;
+			width: 75px;
+			margin-top: 10px;
+			margin-left: 10px;
+			vertical-align: top;
+			text-align: center;
+			cursor: pointer;
+			font-size: 12px;
+			color: white;
+			.icon {
+				width: 65px;
+				height: 60px;
+				padding: 1px;
+			}
+		}
+	}
+	.only-modal {
+		@include flex;
+		justify-content: center;
+		margin-top: 5px;
+		:deep() {
+			.el-checkbox__inner {
+				background-color: transparent;
+			}
+			.el-checkbox__label {
+				color: white;
+			}
+		}
+	}
+	.unit-select {
+		@include flex;
+		justify-content: center;
+		margin-top: 20px;
+		span {
+			color: white;
+			margin-right: 5px;
+		}
+	}
+	.distance-show {
+		@include flex;
+		justify-content: center;
+		margin-top: 20px;
+		span {
+			color: white;
+			font-size: 16px;
+			margin-right: 5px;
+		}
+	}
+	.empty-btn {
+		width: 92%;
+		margin: 0 auto;
+		margin-top: 20px;
+		:deep() {
+			.el-button {
+				width: 100%;
+			}
+		}
+	}
+}
+.echarts-content {
+	position: fixed;
+	bottom: 10px;
+	right: 10px;
+	padding: 0 !important;
+	background-image: none !important;
+	border: 1px solid #008aff70;
+	border-radius: 2px !important;
+	background-color: rgba(23, 49, 71, 0.8);
+	width: 300px;
+	height: 500px;
+	box-shadow: 0 4px 15px 1px #02213bb3;
+	animation: fadeIn 1s;
+}
+// 图上图形样式
+:deep() {
+	.marsGreenGradientPnl {
+		color: white;
+	}
+}
+</style>
diff --git a/src/views/goverment/largeScreen/index.vue b/src/views/goverment/largeScreen/index.vue
index 8eb6dd2..34034c1 100644
--- a/src/views/goverment/largeScreen/index.vue
+++ b/src/views/goverment/largeScreen/index.vue
@@ -17,7 +17,7 @@
 		<!-- 菜单操作 -->
 		<div class="menu-operate">
 			<div class="menu-operate-item" v-for="(item, i) in data" :key="i">
-				<div v-if="item.widget && !item.children" class="toolbar-item" @click="showWidget(item.widget)">
+				<div v-if="item.widget && !item.children" class="toolbar-item" @click="showWidget(item.name)">
 					<el-icon size="18" color="#fff" v-if="i == 0"><PictureRounded /></el-icon>
 					<el-icon size="18" color="#fff" v-else-if="i == 1"><DocumentCopy /></el-icon>
 					<span class="title">{{ item.name }}</span>
@@ -30,29 +30,58 @@
 					</div>
 					<template #dropdown>
 						<el-dropdown-menu class="dropdown">
-							<el-dropdown-item v-for="child in item.children" :key="child.widget" @click="clickMenu"
-								><el-icon size="16" color="#fff"><PictureRounded /></el-icon> <span>{{ child.name }}</span></el-dropdown-item
+							<el-dropdown-item v-for="child in item.children" :key="child.name" @click="clickMenu(child.name)"
+								><el-icon size="16"><PictureRounded /></el-icon> <span>{{ child.name }}</span></el-dropdown-item
 							>
 						</el-dropdown-menu>
 					</template>
 				</el-dropdown>
 			</div>
 		</div>
+		<!-- 底图菜单操作页面 -->
+		<div class="basic-map" v-if="basicMapShow">
+			<div class="basic-title">
+				<span>底图</span>
+				<el-icon size="16" color="#fff" @click="basicMapShow = false"><Close /></el-icon>
+			</div>
+			<div class="basemap">
+				<div
+					v-for="(item, i) in baseMaps"
+					:key="i"
+					class="basemap-card"
+					:class="{ 'active-card': active === item.id }"
+					@click="changeBaseMaps(item.id)"
+				>
+					<div><img class="icon" :src="`${item.options.icon || 'src/assets/images/Mars3DImg/basemaps/bingAerial.png'}`" /></div>
+					<div>{{ item.name }}</div>
+				</div>
+			</div>
+			<div class="terrain-show">
+				<span>显示地形</span>
+				<el-switch v-model="chkHasTerrain" @change="terrainOperate" />
+			</div>
+		</div>
+		<!-- 图层添加 -->
+		<div class="layer-add" v-if="layersShow">
+			<div class="layer-add-title">
+				<span>图层</span>
+				<el-icon size="16" color="#fff" @click="layersShow = false"><Close /></el-icon>
+			</div>
+			<div class="layer-add-tree">
+				<el-tree
+					:default-expanded-keys="expandedKeys"
+					:default-checked-keys="checkedKeys"
+					:data="treeData"
+					:props="props"
+					show-checkbox
+					@check-change="handleCheckChange"
+				/>
+			</div>
+		</div>
+		<!-- 图上量算弹框 -->
+		<MapMeasurement :mapInstance="map" v-if="measurementShow" @hiddenConfim="measurementShow = false" />
 	</div>
-	<!-- 图层添加 -->
-	<!-- <div class="layer-add">
-		<span class="layer-add-title">图层添加</span>
-		<el-scrollbar style="margin-top: 10px" :style="{ height: title ? `calc(100% - 95px)` : `calc(100% - 56px)` }">
-			<el-tree
-				:default-expanded-keys="expandedKeys"
-				:default-checked-keys="checkedKeys"
-				:data="treeData"
-				:props="props"
-				show-checkbox
-				@check-change="handleCheckChange"
-			/>
-		</el-scrollbar>
-	</div> -->
+
 	<!-- <div class="option-list">
 		<span class="option-list-title">功能选择</span>
 		<el-scrollbar style="margin-top: 10px" :style="{ height: title ? `calc(100% - 95px)` : `calc(100% - 56px)` }">
@@ -159,7 +188,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted, onUnmounted, computed } from "vue";
+import { ref, onMounted, onUnmounted, computed, markRaw } from "vue";
 //引入cesium基础库
 import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
 import * as Cesium from "mars3d-cesium";
@@ -172,6 +201,13 @@ import { ElMessage } from "element-plus";
 import { datas } from "@/enums/company/SetpsEnum";
 import { initVue3Popup } from "@/utils/file-util";
 import QueryPopup from "./components/query-popup.vue";
+import MapMeasurement from "./components/mapMeasurement.vue";
+const measurementShow = ref(false); // 图上量算弹框
+const layersShow = ref(false); // 图层弹框
+const basicMapShow = ref(false); // 底图弹框
+const chkHasTerrain = ref(false);
+const active = ref("");
+const baseMaps = ref([]);
 const storageName = "mars3d_queryGaodePOI";
 const inputVal = ref();
 const dataSource = ref<any>([]);
@@ -279,9 +315,9 @@ const data = [
 		name: "工具",
 		icon: "tool",
 		children: [
-			// { name: "图上量算", icon: "ruler", widget: "measure" },
-			// { name: "空间分析", icon: "analysis", widget: "analysis" },
-			{ name: "坐标定位", icon: "local", widget: "location-point" }
+			{ name: "图上量算", icon: "ruler", widget: "measure" },
+			{ 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" },
@@ -295,12 +331,30 @@ const data = [
 		]
 	}
 ];
-const showWidget = (widget: string) => {
+// 显示地形
+const terrainOperate = (e: any) => {
+	map.hasTerrain = chkHasTerrain.value;
+};
+// 改变底图
+const changeBaseMaps = (id: string) => {
+	map.basemap = active.value = id;
+};
+const showWidget = (name: string) => {
+	if (name == "底图") {
+		basicMapShow.value = true;
+		layersShow.value = false;
+	} else if (name == "图层") {
+		basicMapShow.value = false;
+		layersShow.value = true;
+	}
 	console.log(666);
 };
 
-const clickMenu = ({ key }: any) => {
-	console.log(666);
+const clickMenu = (name: any) => {
+	console.log(name);
+	if (name == "图上量算") {
+		measurementShow.value = true;
+	}
 };
 // 获取Canvas对象
 const getCanvas = (text: any) => {
@@ -504,6 +558,8 @@ const initMars3d = (option: any) => {
 		return dom;
 	});
 	map.addLayer(graphicLayer);
+	// 获取配置文件底图数据
+	getBasicMaps();
 	// 添加数据
 	// addRandomGraphicByCount(graphicLayer, [117.080397, 31.656139, 33.3]);
 	// addRandomGraphicByCount(graphicLayer, [117.078006, 31.65649, 49.4]);
@@ -558,6 +614,25 @@ const initMars3d = (option: any) => {
 	// map.addEffect(snowCover);
 	// map.addThing(shadows);
 };
+// 获取config.json中的底图配置
+const getBasicMaps = () => {
+	const layers = {
+		baseMaps: map.getBasemaps(true),
+		hasTerrain: map.hasTerrain
+	};
+	console.log(layers.baseMaps);
+	baseMaps.value = layers.baseMaps.map((m: any) => {
+		if (m.isAdded && m.show) {
+			active.value = m.id;
+		}
+		return {
+			name: m.name,
+			id: m.id,
+			options: markRaw(m.options)
+		};
+	});
+	chkHasTerrain.value = layers.hasTerrain || false;
+};
 const addRandomGraphicByCount = (graphicLayer: any, position: any) => {
 	const graphicImg = new mars3d.graphic.DivGraphic({
 		position: position,
@@ -738,11 +813,16 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
+@mixin flex {
+	display: flex;
+	align-items: center;
+}
 .map-content {
 	height: calc(100% - 72px);
 	width: 100%;
 	position: relative;
 	background-color: #ccc;
+	overflow: hidden;
 	.mars3d-container {
 		height: 100%;
 		width: 100%;
@@ -798,8 +878,7 @@ onUnmounted(() => {
 		}
 	}
 	.menu-operate {
-		display: flex;
-		align-items: center;
+		@include flex;
 		position: absolute;
 		top: 10px;
 		right: 10px;
@@ -812,11 +891,11 @@ onUnmounted(() => {
 		box-shadow: 0 4px 15px 1px #02213bb3;
 		&-item {
 			.toolbar-item {
-				display: flex;
-				align-items: center;
+				@include flex;
 				padding: 6px 12px;
 				height: 100%;
 				font-size: 15px;
+				cursor: pointer;
 				.title {
 					color: white;
 					margin-left: 5px;
@@ -827,12 +906,143 @@ onUnmounted(() => {
 			}
 		}
 	}
+	// 菜单弹框出现动画
+	@keyframes fadeIn {
+		0% {
+			opacity: 0;
+			transform: translate3d(100%, 0, 0);
+		}
+		100% {
+			opacity: 1;
+			transform: none;
+		}
+	}
+	.basic-map {
+		position: absolute;
+		top: 60px;
+		right: 10px;
+		padding: 0 !important;
+		background-image: none !important;
+		border: 1px solid #008aff70;
+		border-radius: 2px !important;
+		background-color: rgba(23, 49, 71, 0.8);
+		width: 380px;
+		height: 500px;
+		box-shadow: 0 4px 15px 1px #02213bb3;
+		animation: fadeIn 1s;
+		.basic-title {
+			@include flex;
+			width: 100%;
+			height: 40px;
+			padding: 0 5px 0 10px;
+			background-color: #173147;
+			span {
+				font-size: 16px;
+				color: white;
+				margin-right: auto;
+			}
+			:deep() {
+				.el-icon {
+					cursor: pointer;
+				}
+			}
+		}
+		.basemap {
+			width: 95%;
+			height: calc(100% - 80px);
+			margin: 0 auto;
+			overflow-y: scroll;
+			.basemap-card {
+				display: inline-block;
+				width: 75px;
+				margin-top: 10px;
+				margin-left: 10px;
+				vertical-align: top;
+				text-align: center;
+				cursor: pointer;
+				font-size: 12px;
+				color: white;
+				&:hover {
+					color: #337fe5 !important;
+					.icon {
+						border-color: #337fe5;
+					}
+				}
+				.icon {
+					border: 1px solid #4db3ff78;
+					width: 75px;
+					height: 70px;
+					padding: 1px;
+				}
+			}
+			.active-card {
+				color: #337fe5 !important;
+				.icon {
+					border-color: #337fe5;
+				}
+			}
+		}
+		.terrain-show {
+			@include flex;
+			width: 100%;
+			height: 40px;
+			span {
+				color: white;
+				margin: 0 5px 0 10px;
+			}
+		}
+	}
+	.layer-add {
+		position: absolute;
+		top: 60px;
+		right: 10px;
+		padding: 0 !important;
+		background-image: none !important;
+		border: 1px solid #008aff70;
+		border-radius: 2px !important;
+		background-color: rgba(23, 49, 71, 0.8);
+		width: 300px;
+		height: 500px;
+		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: white;
+				margin-right: auto;
+			}
+			:deep() {
+				.el-icon {
+					cursor: pointer;
+				}
+			}
+		}
+		&-tree {
+			height: calc(100% - 40px);
+			overflow-y: scroll;
+			:deep() {
+				.el-tree {
+					background-color: rgba(23, 49, 71, 0.8);
+					color: white;
+				}
+				.el-tree-node__content:hover {
+					background-color: rgba(0, 138, 255, 0.5);
+				}
+				.el-tree-node:focus > .el-tree-node__content {
+					background-color: rgba(0, 138, 255, 0.5);
+				}
+				.el-checkbox__inner {
+					background-color: transparent;
+				}
+			}
+		}
+	}
 }
-// :deep() {
-// 	.el-dropdown__popper.el-popper {
-// 		border: 1px solid rgba(23, 49, 71, 0.8);
-// 	}
-// }
 // .dropdown {
 // 	background-color: rgba(23, 49, 71, 0.8) !important;
 // 	// border: 1px solid rgba(23, 49, 71, 0.8) !important;
@@ -845,19 +1055,6 @@ onUnmounted(() => {
 // 		}
 // 	}
 // }
-.layer-add {
-	width: 200px;
-	height: 350px;
-	position: absolute;
-	right: 20px;
-	top: 20px;
-	background-color: white;
-	padding: 20px;
-	&-title {
-		font-size: 16px;
-		font-weight: 700;
-	}
-}
 .option-list {
 	width: 200px;
 	height: 350px;