From b4f02c8da482f386680b3d5e5e37fc8a7efb15ec Mon Sep 17 00:00:00 2001
From: kun <1422840143@qq.com>
Date: Thu, 19 Oct 2023 18:29:15 +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

---
 .../components/coordinatePicking.vue          | 339 +++++++++++++++
 .../largeScreen/components/myTags.vue         | 392 ++++++++++++++++++
 .../components/regionalNavigation.vue         | 232 +++++++++++
 src/views/goverment/largeScreen/index.vue     |  29 +-
 4 files changed, 986 insertions(+), 6 deletions(-)
 create mode 100644 src/views/goverment/largeScreen/components/coordinatePicking.vue
 create mode 100644 src/views/goverment/largeScreen/components/myTags.vue
 create mode 100644 src/views/goverment/largeScreen/components/regionalNavigation.vue

diff --git a/src/views/goverment/largeScreen/components/coordinatePicking.vue b/src/views/goverment/largeScreen/components/coordinatePicking.vue
new file mode 100644
index 0000000..32bbc55
--- /dev/null
+++ b/src/views/goverment/largeScreen/components/coordinatePicking.vue
@@ -0,0 +1,339 @@
+<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="item-classify">
+			<div class="item-classify-item">
+				<span>类型：</span>
+				<el-radio-group v-model="allProperty.radioType" @change="changeFanwei">
+					<el-radio label="1">十进制</el-radio>
+					<el-radio label="2">度分秒</el-radio>
+					<el-radio label="3">平面坐标</el-radio>
+				</el-radio-group>
+			</div>
+			<!-- 十进制 -->
+			<div v-if="allProperty.radioType == '1'">
+				<div class="item-classify-item">
+					<span>经度：</span>
+					<el-input v-model="allProperty.jd" @change="changeJWD" />
+				</div>
+				<div class="item-classify-item">
+					<span>纬度：</span>
+					<el-input v-model="allProperty.wd" @change="changeJWD" />
+				</div>
+				<div class="item-classify-item">
+					<span>高程：</span>
+					<el-input v-model="allProperty.alt" @change="changeJWD" />
+				</div>
+			</div>
+			<!-- 度分秒 -->
+			<div v-if="allProperty.radioType == '2'">
+				<div class="item-classify-item">
+					<span>经度：</span>
+					<el-input v-model="allProperty.jdDegree" style="width: 25%" @change="changeDMS">
+						<template #append>度</template>
+					</el-input>
+					<el-input v-model="allProperty.jdMinute" style="width: 25%" @change="changeDMS">
+						<template #append>分</template>
+					</el-input>
+					<el-input v-model="allProperty.jdSecond" style="width: 25%" @change="changeDMS">
+						<template #append>秒</template>
+					</el-input>
+				</div>
+				<div class="item-classify-item">
+					<span>纬度：</span>
+					<el-input v-model="allProperty.wdDegree" style="width: 25%" @change="changeDMS">
+						<template #append>度</template>
+					</el-input>
+					<el-input v-model="allProperty.wdMinute" style="width: 25%" @change="changeDMS">
+						<template #append>分</template>
+					</el-input>
+					<el-input v-model="allProperty.wdSecond" style="width: 25%" @change="changeDMS">
+						<template #append>秒</template>
+					</el-input>
+				</div>
+				<div class="item-classify-item">
+					<span>高程：</span>
+					<el-input v-model="allProperty.alt" @change="changeJWD" />
+				</div>
+			</div>
+			<!-- 平面坐标 -->
+			<div v-if="allProperty.radioType == '3'">
+				<div class="item-classify-item">
+					<span>分带：</span>
+					<el-radio-group v-model="allProperty.radioFendai" @change="changeFendai">
+						<el-radio label="1">三度带</el-radio>
+						<el-radio label="2">六度带</el-radio>
+					</el-radio-group>
+				</div>
+				<div class="item-classify-item">
+					<span>纵坐标：</span>
+					<el-input v-model="allProperty.gk6X" style="width: 75%" @change="changeGKZone" />
+				</div>
+				<div class="item-classify-item">
+					<span>横坐标：</span>
+					<el-input v-model="allProperty.gk6Y" style="width: 75%" @change="changeGKZone" />
+				</div>
+				<div class="item-classify-item">
+					<span>高度值：</span>
+					<el-input v-model="allProperty.alt" style="width: 75%" @change="changeGKZone" />
+				</div>
+			</div>
+		</div>
+		<div class="operate-btn">
+			<el-button type="primary" @click="bindMourseClick">图上拾取</el-button>
+			<el-button type="primary" @click="submitCenter">坐标定位</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";
+const props = defineProps(["mapInstance"]);
+const emits = defineEmits(["hiddenConfim"]);
+const allProperty = ref({
+	radioType: "1",
+	radioFendai: "2",
+	jd: 0,
+	wd: 0,
+	alt: 0,
+	jdDegree: 0,
+	jdMinute: 0,
+	jdSecond: 0,
+	wdDegree: 0,
+	wdMinute: 0,
+	wdSecond: 0,
+	gk6X: 0,
+	gk6Y: 0
+});
+let map: any = props.mapInstance;
+let currJD: number;
+let currWD: number;
+let currGD: number;
+let pointEntity: any;
+// 坐标定位
+const submitCenter = () => {
+	if (allProperty.value.jd > 180 || allProperty.value.jd < -180) {
+		ElMessage("请输入有效的经度值！");
+		return;
+	}
+	if (allProperty.value.wd > 90 || allProperty.value.wd < -90) {
+		ElMessage("请输入有效的纬度值！");
+		return;
+	}
+	updateMarker(true, currJD, currWD, currGD);
+};
+const updateMarker = (hasCenter: any, jd: any, wd: any, alt: any) => {
+	const position = [jd, wd, alt];
+
+	if (pointEntity == null) {
+		pointEntity = new mars3d.graphic.PointEntity({
+			position: position,
+			style: {
+				color: "#3388ff",
+				pixelSize: 10,
+				outlineColor: "#ffffff",
+				outlineWidth: 2
+			}
+		});
+		map.graphicLayer.addGraphic(pointEntity);
+	} else {
+		pointEntity.position = position;
+	}
+
+	if (hasCenter) {
+		pointEntity.flyTo({ radius: 1000 });
+	}
+};
+const marsProj4Trans = (JD: any, WD: any, radio: any) => {
+	if (radio === "2") {
+		return mars3d.PointTrans.proj4Trans([JD, WD], mars3d.CRS.EPSG4326, mars3d.CRS.CGCS2000_GK_Zone_6);
+	} else {
+		return mars3d.PointTrans.proj4Trans([JD, WD], mars3d.CRS.EPSG4326, mars3d.CRS.CGCS2000_GK_Zone_3);
+	}
+};
+const changeFendai = () => {
+	// 十进制转2000平面六分度
+	const zoon = marsProj4Trans(currJD, currWD, allProperty.value.radioFendai);
+	allProperty.value.gk6X = marsUtilFormtNum(zoon[0], 1);
+	allProperty.value.gk6Y = marsUtilFormtNum(zoon[1], 1);
+};
+const changeFanwei = () => {
+	switch (allProperty.value.radioType) {
+		case "2": // 度分秒
+			allProperty.value.jdDegree = marsPointTrans(currJD).degree;
+			allProperty.value.jdMinute = marsPointTrans(currJD).minute;
+			allProperty.value.jdSecond = marsPointTrans(currJD).second;
+
+			allProperty.value.wdDegree = marsPointTrans(currWD).degree;
+			allProperty.value.wdMinute = marsPointTrans(currWD).minute;
+			allProperty.value.wdSecond = marsPointTrans(currWD).second;
+
+			break;
+		case "3": // CGCS2000
+			changeFendai();
+			break;
+		default:
+			// 十进制
+			allProperty.value.jd = marsUtilFormtNum(currJD, 6);
+			allProperty.value.wd = marsUtilFormtNum(currWD, 6);
+			break;
+	}
+};
+// 坐标转化的三种方法
+const marsUtilFormtNum = (item: any, num: any) => {
+	return mars3d.Util.formatNum(item, num);
+};
+const marsPointTrans = (item: any) => {
+	return mars3d.PointTrans.degree2dms(item);
+};
+// 转换成十进制的方法
+const marsDms2degree = (du: any, fen: any, miao: any) => {
+	return mars3d.PointTrans.dms2degree(du, fen, miao);
+};
+const marsZONEtoCRS = (jd: any, wd: any, radio: any) => {
+	if (radio === "2") {
+		return mars3d.PointTrans.proj4Trans([jd, wd], mars3d.CRS.CGCS2000_GK_Zone_6, mars3d.CRS.EPSG4326);
+	} else {
+		return mars3d.PointTrans.proj4Trans([jd, wd], mars3d.CRS.CGCS2000_GK_Zone_3, mars3d.CRS.EPSG4326);
+	}
+};
+// 图上拾取
+const bindMourseClick = () => {
+	map.setCursor(true);
+	map.once(mars3d.EventType.click, function (event: any) {
+		map.setCursor(false);
+		const cartesian = event.cartesian;
+		const point = mars3d.LngLatPoint.fromCartesian(cartesian);
+		point.format();
+		currJD = point.lng;
+		currWD = point.lat;
+		currGD = point.alt;
+
+		allProperty.value.jd = marsUtilFormtNum(currJD, 6);
+		allProperty.value.wd = marsUtilFormtNum(currWD, 6);
+		allProperty.value.alt = marsUtilFormtNum(currGD, 6);
+		changeFanwei();
+		// 更新面板
+		updateMarker(false, currJD, currWD, currGD);
+	});
+};
+const changeGKZone = () => {
+	const zoon = marsZONEtoCRS(Number(allProperty.value.gk6X), Number(allProperty.value.gk6Y), allProperty.value.radioFendai);
+	currJD = zoon[0];
+	currWD = zoon[1];
+};
+const changeDMS = () => {
+	currJD = marsDms2degree(allProperty.value.jdDegree, allProperty.value.jdMinute, allProperty.value.jdSecond);
+	currWD = marsDms2degree(allProperty.value.wdDegree, allProperty.value.wdMinute, allProperty.value.wdSecond);
+};
+const changeJWD = () => {
+	currJD = Number(allProperty.value.jd);
+	currWD = Number(allProperty.value.wd);
+	currGD = Number(allProperty.value.alt);
+};
+const closeDiv = () => {
+	emits("hiddenConfim");
+};
+onMounted(() => {
+	console.log(map, "66666");
+});
+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: 350px;
+	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;
+			}
+		}
+	}
+	.item-classify {
+		width: 95%;
+		margin: 0 auto;
+		display: flex;
+		flex-direction: column;
+		&-item {
+			display: flex;
+			align-items: center;
+			color: white;
+			margin-bottom: 10px;
+			* {
+				margin-right: 10px;
+			}
+			:deep() {
+				.el-input {
+					width: 80%;
+				}
+				.el-checkbox__inner,
+				.el-radio__inner {
+					background-color: transparent;
+				}
+				.el-checkbox__label,
+				.el-radio__label {
+					color: white;
+				}
+			}
+		}
+	}
+	.operate-btn {
+		@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
new file mode 100644
index 0000000..016ecaa
--- /dev/null
+++ b/src/views/goverment/largeScreen/components/myTags.vue
@@ -0,0 +1,392 @@
+<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="item-classify">
+			<div class="item-classify-item">
+				<span>数据维护：</span>
+				<el-button type="primary" @click="startDrawGraphic">图上标绘</el-button>
+				<!-- <el-checkbox v-model="checkVal">是否编辑</el-checkbox> -->
+			</div>
+			<div class="item-classify-item">
+				<span>数据导出：</span>
+				<el-upload
+					ref="importRef"
+					:auto-upload="false"
+					:headers="headers"
+					:on-change="uploadFileChange"
+					multiple
+					:limit="1"
+					:show-file-list="false"
+				>
+					<el-button type="primary">打开</el-button>
+				</el-upload>
+				<el-button type="primary" @click="expGeoJSONFile">导出GeoJSON</el-button>
+				<el-button type="primary" @click="expJSONFile">导出构造JSON</el-button>
+			</div>
+		</div>
+		<div class="table-operate">
+			<el-table :data="tableData" rowKey="key">
+				<el-table-column prop="name" align="center" label="名称" />
+				<el-table-column align="center" label="操作">
+					<template #default="{ row, $index }">
+						<el-button link type="primary" @click="toPoint(row)">定位</el-button>
+						<el-button link type="primary" @click="deletePoint(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 { Console } from "console";
+import { GlobalStore } from "@/stores";
+const importRef = ref();
+const globalStore = GlobalStore();
+const headers = ref({ Authorization: "Bearer " + globalStore.token });
+const baseUrl = import.meta.env.VITE_API_URL;
+const props = defineProps(["mapInstance"]);
+const emits = defineEmits(["hiddenConfim"]);
+const tableData = ref<any>([]);
+const checkVal = ref(false);
+let map: any = props.mapInstance;
+let graphicLayer: any;
+let dataIndex = 0;
+onMounted(() => {
+	graphicLayer = new mars3d.layer.GraphicLayer();
+	map.addLayer(graphicLayer);
+	graphicLayer.on(mars3d.EventType.drawCreated, function (event: any) {
+		console.log("矢量对象绘制完成", event);
+		productTableData();
+	});
+	bindLayerPopup(); // 在图层上绑定popup,对所有加到这个图层的矢量数据都生效
+	bindLayerContextMenu(); // 在图层绑定右键菜单,对所有加到这个图层的矢量数据都生效
+});
+
+// 打卡JSON文件
+const uploadFileChange = (response: any) => {
+	console.log(response);
+
+	const item = response.raw;
+	const fileName = item.name;
+	const fileType = fileName?.substring(fileName.lastIndexOf(".") + 1, fileName.length).toLowerCase();
+	try {
+		if (fileType === "json" || fileType === "geojson") {
+			const reader = new FileReader();
+			reader.readAsText(item, "UTF-8");
+			reader.onloadend = function (e) {
+				const geojson = JSON.parse(this.result as string);
+				console.log("打开了json文件", geojson);
+
+				if (geojson.type === "graphic" && geojson.data) {
+					graphicLayer.addGraphic(geojson.data);
+					graphicLayer.flyTo();
+				} else {
+					graphicLayer.loadGeoJSON(geojson, { flyTo: true });
+					// initGraphicableData(graphicLayer)
+				}
+
+				productTableData();
+			};
+		} else if (fileType === "kml") {
+			const reader = new FileReader();
+			reader.readAsText(item, "UTF-8");
+			reader.onloadend = function (e) {
+				const strkml = this.result;
+
+				map.kgUtil.toGeoJSON(strkml).then((geojson: any) => {
+					console.log("kml2geojson转换结果为", geojson);
+
+					graphicLayer.loadGeoJSON(geojson, {
+						flyTo: true
+					});
+				});
+			};
+		} else if (fileType === "kmz") {
+			// 加载input文件控件的二进制流
+
+			map.kgUtil.toGeoJSON(item).then((geojson: any) => {
+				console.log("kmz2geojson", geojson);
+
+				graphicLayer.loadGeoJSON(geojson, {
+					flyTo: true
+				});
+			});
+		} else {
+			ElMessage("暂不支持 " + fileType + " 文件类型的数据！");
+		}
+		importRef.value.clearFiles();
+	} catch (error) {
+		ElMessage("有相同数据");
+	}
+};
+// 导出构造JSON文件
+const expJSONFile = () => {
+	if (graphicLayer.length == 0) {
+		ElMessage("当前没有标注任何数据，无需保存！");
+		return;
+	}
+	const geojson = graphicLayer.toJSON();
+	mars3d.Util.downloadFile("矢量数据构造参数.json", JSON.stringify(geojson));
+};
+// 导出GeoJSON文件
+const expGeoJSONFile = () => {
+	if (graphicLayer.length == 0) {
+		ElMessage("当前没有标注任何数据，无需保存！");
+		return;
+	}
+	const geojson = graphicLayer.toGeoJSON();
+	mars3d.Util.downloadFile("矢量数据GeoJSON.json", JSON.stringify(geojson));
+};
+// 删除点位
+const deletePoint = (row: any, index: number) => {
+	const graphic = graphicLayer.getGraphicById(row.key);
+	graphic && graphic.remove(true);
+	tableData.value.splice(index, 1);
+};
+// 定位到点位
+const toPoint = (row: any) => {
+	const graphic = graphicLayer.getGraphicById(row.key);
+	graphic.flyTo();
+};
+// 获取点位名称
+const getGraphicName = (graphic: any) => {
+	if (graphic?.style?.label?.text) {
+		return `${graphic.type} - ${graphic.style.label.text}`;
+	}
+
+	if (graphic.name) {
+		return `${graphic.type} - ${graphic.name}`;
+	}
+	if (graphic.attr.remark) {
+		return `${graphic.type} - ${graphic.attr.remark}`;
+	}
+
+	graphic.name = `未命名${dataIndex}`;
+	return `${graphic.type} - ${graphic.name}`;
+};
+// 生成表格数据
+const productTableData = () => {
+	console.log(graphicLayer.graphics);
+	const list = graphicLayer.graphics;
+	for (let i = list.length - 1; i >= 0; i--) {
+		const graphic = list[i];
+		if (graphic.isPrivate) {
+			continue;
+		}
+		tableData.value.push({
+			key: graphic.id,
+			name: getGraphicName(graphic)
+		});
+	}
+	// let position = [] as any;
+	// const graphic = new mars3d.graphic.PointEntity({
+	// 	position: position,
+	// 	style: {
+	// 		color: "#00ffff",
+	// 		pixelSize: 6,
+	// 		outlineColor: "#ffffff",
+	// 		outlineWidth: 2
+	// 	},
+	// 	attr: { index: dataIndex }
+	// });
+	// graphicLayer.addGraphic(graphic);
+	// dataIndex++;
+};
+// 绑定右键菜单
+const bindLayerContextMenu = () => {
+	graphicLayer.bindContextMenu([
+		// {
+		//   text: "开始编辑对象",
+		//   icon: "fa fa-edit",
+		//   show: function (e) {
+		//     const graphic = e.graphic
+		//     if (!graphic || !graphic.hasEdit) {
+		//       return false
+		//     }
+		//     return !graphic.isEditing
+		//   },
+		//   callback: (e) => {
+		//     const graphic = e.graphic
+		//     if (!graphic) {
+		//       return false
+		//     }
+		//     if (graphic) {
+		//       graphicLayer.startEditing(graphic)
+		//     }
+		//   }
+		// },
+		// {
+		//   text: "停止编辑对象",
+		//   icon: "fa fa-edit",
+		//   show: function (e) {
+		//     const graphic = e.graphic
+		//     if (!graphic || !graphic.hasEdit) {
+		//       return false
+		//     }
+		//     return graphic.isEditing
+		//   },
+		//   callback: (e) => {
+		//     const graphic = e.graphic
+		//     if (!graphic) {
+		//       return false
+		//     }
+		//     if (graphic) {
+		//       graphic.stopEditing()
+		//     }
+		//   }
+		// },
+		{
+			text: "删除对象",
+			icon: "fa fa-trash-o",
+			show: (event: any) => {
+				const graphic = event.graphic;
+				if (!graphic || graphic.isDestroy) {
+					return false;
+				} else {
+					return true;
+				}
+			},
+			callback: e => {
+				const graphic = e.graphic;
+				if (!graphic) {
+					return;
+				}
+				const parent = graphic.parent; // 右击是编辑点时
+				graphicLayer.removeGraphic(graphic);
+				if (parent) {
+					graphicLayer.removeGraphic(parent);
+				}
+			}
+		}
+	]);
+};
+// 绑定图层弹出框
+const bindLayerPopup = () => {
+	graphicLayer.bindPopup((event: any) => {
+		const attr = event.graphic.attr || {};
+		attr["类型"] = event.graphic.type;
+		attr["来源"] = "我是layer上绑定的Popup";
+		attr["备注"] = "我支持鼠标交互";
+		return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: "all", attr: attr });
+	});
+};
+// 图上绘制
+const startDrawGraphic = () => {
+	graphicLayer.startDraw({
+		type: "point",
+		style: {
+			color: "#00ffff",
+			pixelSize: 6,
+			outlineColor: "#ffffff",
+			outlineWidth: 2
+			//   label: {
+			//     // 不需要文字时，去掉label配置即可
+			//     text: "可以同时支持文字",
+			//     font_size: 20,
+			//     color: "#ffffff",
+			//     outline: true,
+			//     outlineColor: "#000000",
+			//     pixelOffsetY: -20
+			//   }
+		}
+	});
+};
+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: 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: #0089fe;
+			margin-right: auto;
+		}
+		:deep() {
+			.el-icon {
+				cursor: pointer;
+			}
+		}
+	}
+	.item-classify {
+		width: 95%;
+		margin: 0 auto;
+		display: flex;
+		flex-direction: column;
+		&-item {
+			display: flex;
+			align-items: center;
+			color: white;
+			margin-bottom: 10px;
+			* {
+				margin-right: 10px;
+			}
+			:deep() {
+				.el-input {
+					width: 80%;
+				}
+				.el-checkbox__inner,
+				.el-radio__inner {
+					background-color: transparent;
+				}
+				.el-checkbox__label,
+				.el-radio__label {
+					color: white;
+				}
+			}
+		}
+	}
+	.table-operate {
+		width: 95%;
+		margin: 0 auto;
+	}
+}
+</style>
diff --git a/src/views/goverment/largeScreen/components/regionalNavigation.vue b/src/views/goverment/largeScreen/components/regionalNavigation.vue
new file mode 100644
index 0000000..5725b13
--- /dev/null
+++ b/src/views/goverment/largeScreen/components/regionalNavigation.vue
@@ -0,0 +1,232 @@
+<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="areabox">
+			<div class="flex-box">
+				<span>省：</span>
+				<el-select v-model="address.province" placeholder="请选择省" @change="handleProvinceSelect">
+					<el-option v-for="item in regionData" :label="item.label" :value="item.value" />
+				</el-select>
+			</div>
+			<div class="flex-box">
+				<span>市：</span>
+				<el-select
+					v-model="address.city"
+					placeholder="请选择市"
+					:disabled="!address.province || cityList.length == 0"
+					@change="handleCitySelect"
+				>
+					<el-option v-for="item in cityList" :label="item.label" :value="item.value" />
+				</el-select>
+			</div>
+			<div class="flex-box">
+				<span>区：</span>
+				<el-select
+					v-model="address.area"
+					placeholder="请选择区"
+					:disabled="!address.province || !address.city || areaList.length == 0"
+					@change="handleAreaSelect"
+				>
+					<el-option v-for="item in areaList" :label="item.label" :value="item.value" />
+				</el-select>
+			</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, computed } from "vue";
+import { ElMessage } from "element-plus";
+import { regionData, CodeToText } from "element-china-area-data";
+const props = defineProps(["mapInstance"]);
+const emits = defineEmits(["hiddenConfim"]);
+const address = ref({
+	province: "",
+	city: "",
+	area: ""
+});
+let map: any = props.mapInstance;
+let geoJsonLayer: any;
+//切换省份函数
+const handleProvinceSelect = () => {
+	address.value.city = "";
+	address.value.area = "";
+	console.log(regionData);
+	console.log(address.value);
+	geoJsonLayer = new mars3d.layer.GeoJsonLayer({
+		url: `//data.mars3d.cn/file/geojson/areas/${address.value.province}.json`,
+		mask: false, // 标识为遮罩层【重点参数】
+		symbol: {
+			styleOptions: {
+				fill: true,
+				color: "rgb(2,26,79)",
+				opacity: 0.9,
+				outline: true,
+				outlineColor: "#39E09B",
+				outlineWidth: 8,
+				outlineOpacity: 0.8,
+				arcType: Cesium.ArcType.GEODESIC,
+				clampToGround: true
+			}
+		},
+		flyTo: true
+	});
+	map.addLayer(geoJsonLayer);
+};
+//切换城市函数
+const handleCitySelect = () => {
+	address.value.area = "";
+	geoJsonLayer = new mars3d.layer.GeoJsonLayer({
+		url: `//data.mars3d.cn/file/geojson/areas/${address.value.city}.json`,
+		mask: false, // 标识为遮罩层【重点参数】
+		symbol: {
+			styleOptions: {
+				fill: true,
+				color: "rgb(2,26,79)",
+				opacity: 0.9,
+				outline: true,
+				outlineColor: "#39E09B",
+				outlineWidth: 8,
+				outlineOpacity: 0.8,
+				arcType: Cesium.ArcType.GEODESIC,
+				clampToGround: true
+			}
+		},
+		flyTo: true
+	});
+	map.addLayer(geoJsonLayer);
+};
+//切换地区函数
+const handleAreaSelect = () => {
+	geoJsonLayer = new mars3d.layer.GeoJsonLayer({
+		url: `//data.mars3d.cn/file/geojson/areas/${address.value.area}.json`,
+		mask: false, // 标识为遮罩层【重点参数】
+		symbol: {
+			styleOptions: {
+				fill: true,
+				color: "rgb(2,26,79)",
+				opacity: 0.9,
+				outline: true,
+				outlineColor: "#39E09B",
+				outlineWidth: 8,
+				outlineOpacity: 0.8,
+				arcType: Cesium.ArcType.GEODESIC,
+				clampToGround: true
+			}
+		},
+		flyTo: true
+	});
+	map.addLayer(geoJsonLayer);
+};
+
+//二级城市列表
+const cityList = computed(() => {
+	if (!address.value.province) {
+		return [];
+	}
+	let temp = regionData.find((item: any) => {
+		return item.value == address.value.province || item.label == address.value.province;
+	});
+
+	if (!temp) return;
+	return temp.children ? temp.children : [];
+});
+//三级地区列表
+const areaList = computed(() => {
+	if (!address.value.province || !address.value.city) {
+		return [];
+	}
+	if (cityList.value.length == 0) {
+		return [];
+	} else {
+		let temp = cityList.value.find((item: any) => {
+			return item.value == address.value.city || item.label == address.value.city;
+		});
+
+		if (temp) {
+			return temp.children ? temp.children : [];
+		} else {
+			return [];
+		}
+	}
+});
+const closeDiv = () => {
+	emits("hiddenConfim");
+};
+onMounted(() => {
+	console.log(map, "66666");
+	mars3d.Util.fetchJson({ url: "//data.mars3d.cn/file/geojson/areas/config.json" }).then(data => {
+		console.log(data);
+	});
+});
+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: 350px;
+	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;
+			}
+		}
+	}
+	.areabox {
+		.flex-box {
+			@include flex;
+			justify-content: center;
+			margin-top: 10px;
+			> span {
+				color: white;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/views/goverment/largeScreen/index.vue b/src/views/goverment/largeScreen/index.vue
index 1b468d3..41eb2af 100644
--- a/src/views/goverment/largeScreen/index.vue
+++ b/src/views/goverment/largeScreen/index.vue
@@ -81,7 +81,13 @@
 		<!-- 图上量算弹框 -->
 		<MapMeasurement :mapInstance="map" v-if="measurementShow" @hiddenConfim="measurementShow = false" />
 		<!-- 空间分析弹框 -->
-		<SpaceAnalysis :mapInstance="map" v-if="analysisShow" @hiddenConfim="analysisShow = false"></SpaceAnalysis>
+		<SpaceAnalysis :mapInstance="map" v-if="analysisShow" @hiddenConfim="analysisShow = false" />
+		<!-- 坐标定位弹框 -->
+		<CoordinatePicking :mapInstance="map" v-if="pickingShow" @hiddenConfim="pickingShow = false" />
+		<!-- 地区导航弹框 -->
+		<RegionalNavigation :mapInstance="map" v-if="regionalNavigationShow" @hiddenConfim="regionalNavigationShow = false" />
+		<!-- 我的标记弹框 -->
+		<MyTags :mapInstance="map" v-if="myTagsShow" @hiddenConfim="myTagsShow = false" />
 	</div>
 
 	<!-- <div class="option-list">
@@ -188,6 +194,12 @@ import { initVue3Popup } from "@/utils/file-util";
 import QueryPopup from "./components/query-popup.vue";
 import MapMeasurement from "./components/mapMeasurement.vue";
 import SpaceAnalysis from "./components/spaceAnalysis.vue";
+import CoordinatePicking from "./components/coordinatePicking.vue";
+import RegionalNavigation from "./components/regionalNavigation.vue";
+import MyTags from "./components/myTags.vue";
+const myTagsShow = ref(false); // 我的标记弹框
+const regionalNavigationShow = ref(false); // 地区导航弹框
+const pickingShow = ref(false); // 坐标定位弹框
 const analysisShow = ref(false); // 空间分析弹框
 const measurementShow = ref(false); // 图上量算弹框
 const layersShow = ref(false); // 图层弹框
@@ -302,10 +314,10 @@ const data = [
 		icon: "tool",
 		children: [
 			{ 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: "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" },
@@ -341,8 +353,13 @@ const clickMenu = (name: any) => {
 	if (name == "图上量算") {
 		measurementShow.value = true;
 	} else if (name == "空间分析") {
-		console.log(666);
 		analysisShow.value = true;
+	} else if (name == "坐标定位") {
+		pickingShow.value = true;
+	} else if (name == "地区导航") {
+		regionalNavigationShow.value = true;
+	} else if (name == "我的标记") {
+		myTagsShow.value = true;
 	}
 };
 // 获取Canvas对象