fix: BUG修改

src/views/goverment/largeScreen/components/spaceAnalysis.vue

@@ -65,6 +65,7 @@
 				</div>
 				<div class="sunshing-play">
 					<el-button type="primary" @click="addviewShed">添加可视域</el-button>
+					<el-button type="primary" @click="saveJson">保存</el-button>
 				</div>
 			</div>
 			<!-- 方量分析 -->
@@ -126,6 +127,7 @@
 				<div class="volume-operate">
 					<el-button type="primary" @click="btnDrawExtent">添加矩形</el-button>
 					<el-button type="primary" @click="btnDraw">添加多边形</el-button>
+					<el-button type="primary" @click="saveJson">保存</el-button>
 				</div>
 			</div>
 			<!-- 地表透明 -->
@@ -292,7 +294,7 @@ import dayjs from "dayjs";
 import { ref, watch, onMounted, computed, onUnmounted } from "vue";
 import { ElMessage } from "element-plus";
 const props = defineProps(["mapInstance"]);
-const emits = defineEmits(["hiddenConfim"]);
+const emits = defineEmits(["hiddenConfim", "saveJson"]);
 const mainMenuShow = ref(true);
 const subMenuShow = ref(false);
 const sunshineText = ref("播放");
@@ -338,11 +340,13 @@ const menuList = ref([
 	{ name: "模型压平", icon: new URL("../../../../assets/images/Mars3DIcon/mxyp.png", import.meta.url).href },
 	{ name: "限高分析", icon: new URL("../../../../assets/images/Mars3DIcon/xgfx.png", import.meta.url).href }
 ]);
+const clearBool = ref(true);
+const initGraphicLength = ref(0);
 let map: any = props.mapInstance;
+let graphicLayer: any;
 let measure: any;
 let measureVolume: any;
 let shadows: any;
-let graphicLayer: any;
 let terrainClip: any;
 let underground: any;
 let slope: any;
@@ -357,6 +361,7 @@ onMounted(() => {
 	graphicLayer = new mars3d.layer.GraphicLayer();
 	map.addLayer(graphicLayer);
 	// map.scene.globe.depthTestAgainstTerrain = true; // 不加无法投射到地形上
+	initGraphicLength.value = graphicLayer.getGraphics().length;
 	// 地形开挖
 	terrainClip = new mars3d.thing.TerrainClip({
 		diffHeight: allProperty.value.diffHeight, // 井的深度
@@ -391,10 +396,19 @@ onMounted(() => {
 	});
 	map.addThing(contourLine);
 });
+// 保存配置的图上JSON数据
+const saveJson = async () => {
+	// if (graphicLayer.length == 0) {
+	// 	ElMessage("当前没有任何数据，无需保存！");
+	// 	return;
+	// }
+	clearBool.value = false;
+	emits("saveJson", graphicLayer);
+};
 // 限定高度--绘制面
 const drawheightLimitPoly = () => {
-	map.graphicLayer.clear();
+	graphicLayer.clear();
-	map.graphicLayer.startDraw({
+	graphicLayer.startDraw({
 		type: "polygon",
 		style: {
 			color: "#ffff00",
@@ -406,15 +420,15 @@ const drawheightLimitPoly = () => {
 			const positions = graphic.positionsShow;
 			limitHeight.positions = positions;
 
-			map.graphicLayer.clear();
+			graphicLayer.clear();
 			console.log("绘制坐标为", JSON.stringify(mars3d.LngLatArray.toArray(positions))); // 方便测试拷贝坐标
 		}
 	});
 };
 // 限定高度--绘制矩形
 const drawheightLimitDrawExtent = () => {
-	map.graphicLayer.clear();
+	graphicLayer.clear();
-	map.graphicLayer.startDraw({
+	graphicLayer.startDraw({
 		type: "rectangle",
 		style: {
 			color: "#ffff00",
@@ -426,7 +440,7 @@ const drawheightLimitDrawExtent = () => {
 			const positions = graphic.getOutlinePositions(false);
 			limitHeight.positions = positions;
 
-			map.graphicLayer.clear();
+			graphicLayer.clear();
 		}
 	});
 };
@@ -436,8 +450,8 @@ const limitHeightOperate = (e: any) => {
 };
 // 模型压平--绘制多边形
 const btnModelFlattenDraw = () => {
-	map.graphicLayer.clear();
+	graphicLayer.clear();
-	map.graphicLayer.startDraw({
+	graphicLayer.startDraw({
 		type: "polygon",
 		style: {
 			color: "#007be6",
@@ -446,7 +460,7 @@ const btnModelFlattenDraw = () => {
 		success: function (graphic: any) {
 			// 绘制成功后回调
 			const positions = graphic.positionsShow;
-			map.graphicLayer.clear();
+			graphicLayer.clear();
 
 			console.log("绘制坐标为", JSON.stringify(mars3d.LngLatArray.toArray(positions))); // 方便测试拷贝坐标
 
@@ -456,8 +470,8 @@ const btnModelFlattenDraw = () => {
 };
 // 模型压平--绘制矩形
 const btnModelFlattenDrawExtent = () => {
-	map.graphicLayer.clear();
+	graphicLayer.clear();
-	map.graphicLayer.startDraw({
+	graphicLayer.startDraw({
 		type: "rectangle",
 		style: {
 			color: "#007be6",
@@ -467,7 +481,7 @@ const btnModelFlattenDrawExtent = () => {
 		success: function (graphic: any) {
 			// 绘制成功后回调
 			const positions = graphic.getOutlinePositions(false);
-			map.graphicLayer.clear();
+			graphicLayer.clear();
 
 			console.log("绘制坐标为", JSON.stringify(mars3d.LngLatArray.toArray(positions))); // 方便测试拷贝坐标
 
@@ -540,7 +554,7 @@ const drawSectionPoly = () => {
 		success: function (graphic: any) {
 			// 绘制成功后回调
 			const positions = graphic.positionsShow;
-			map.graphicLayer.clear();
+			graphicLayer.clear();
 
 			modelPlanClip.clipOutSide = allProperty.value.clipOutSide;
 			modelPlanClip.positions = positions;
@@ -562,7 +576,7 @@ const drawSectionLine = () => {
 		success: function (graphic: any) {
 			// 绘制成功后回调
 			const positions = graphic.positionsShow;
-			map.graphicLayer.clear();
+			graphicLayer.clear();
 
 			modelPlanClip.positions = positions;
 		}
@@ -581,7 +595,7 @@ const modelSectionOperate = (e: any, label: any) => {
 // 图上选中模型
 const selectModal = () => {
 	// 拾取点位
-	map.graphicLayer.startDraw({
+	graphicLayer.startDraw({
 		type: "point",
 		style: {
 			color: "#00fff2"
@@ -657,16 +671,20 @@ const surfaceOpacityOperate = (e: any, label: any) => {
 };
 // 地形开挖---多边形
 const btnDraw = () => {
-	map.graphicLayer.startDraw({
+	graphicLayer.startDraw({
 		type: "polygon",
 		style: {
 			color: "#007be6",
 			opacity: 0.5,
 			outline: false
 		},
+		attr: {
+			key: "terrainClip",
+			diffHeight: allProperty.value.diffHeight
+		},
 		success: (graphic: any) => {
 			const positions = graphic.positionsShow;
-			map.graphicLayer.clear();
+			graphicLayer.clear();
 
 			console.log(JSON.stringify(mars3d.LngLatArray.toArray(positions))); // 打印下边界
 			// 挖地区域
@@ -676,15 +694,19 @@ const btnDraw = () => {
 };
 // 地形开挖---矩形
 const btnDrawExtent = () => {
-	map.graphicLayer.startDraw({
+	graphicLayer.startDraw({
 		type: "rectangle",
 		style: {
 			color: "#007be6",
-			opacity: 0.8
+			opacity: 0
+		},
+		attr: {
+			key: "terrainClip",
+			diffHeight: allProperty.value.diffHeight
 		},
 		success: (graphic: any) => {
 			const positions = graphic.getOutlinePositions(false);
-			map.graphicLayer.clear();
+			// graphicLayer.clear();
 
 			console.log(JSON.stringify(mars3d.LngLatArray.toArray(positions))); // 打印下边界
 
@@ -703,7 +725,7 @@ const selectHeight = () => {
 		ElMessage("请先开始方量分析");
 	}
 	// 拾取高度
-	map.graphicLayer.startDraw({
+	graphicLayer.startDraw({
 		type: "point",
 		style: {
 			color: "#00fff2"
@@ -711,7 +733,7 @@ const selectHeight = () => {
 		success: (graphic: any) => {
 			console.log(666);
 			const height = graphic.point?.alt;
-			map.graphicLayer.removeGraphic(graphic);
+			graphicLayer.removeGraphic(graphic);
 			if (!height) {
 				return;
 			}
@@ -768,7 +790,11 @@ const volumeOperate = (e: any, label: any) => {
 const clearShow = () => {
 	console.log(selectedName.value);
 	if (selectedName.value == "可视域") {
-		graphicLayer.clear();
+		graphicLayer.getGraphics().map(item => {
+			if (item.type == "viewShed") {
+				graphicLayer.removeGraphic(item);
+			}
+		});
 	} else if (selectedName.value == "方量分析") {
 		measure.clear();
 		measureVolume = null;
@@ -819,7 +845,7 @@ const backMainMenu = () => {
 	} else if (name == "可视域") {
 	} else if (name == "方量分析") {
 	} else if (name == "地形开挖") {
-		terrainClip.clear(); // 清除挖地区域
+		// terrainClip.clear(); // 清除挖地区域
 	} else if (name == "地表透明") {
 		underground.remove(); // 清除地表透明
 		allProperty.value.enabled = false;

src/views/goverment/largeScreen/index.vue

@@ -129,7 +129,7 @@
 		<!-- 图上量算弹框 -->
 		<MapMeasurement :mapInstance="map" v-if="measurementShow" @hiddenConfim="measurementShow = false" />
 		<!-- 空间分析弹框 -->
-		<SpaceAnalysis :mapInstance="map" v-if="analysisShow" @hiddenConfim="analysisShow = false" />
+		<SpaceAnalysis :mapInstance="map" v-if="analysisShow" @hiddenConfim="analysisShow = false" @saveJson="saveAnalysisLayer" />
 		<!-- 坐标定位弹框 -->
 		<CoordinatePicking :mapInstance="map" v-if="pickingShow" @hiddenConfim="pickingShow = false" />
 		<!-- 地区导航弹框 -->
@@ -466,11 +466,21 @@ onMounted(async () => {
 });
 // 展示保存的地图标绘配置
 const showMapData = (arr: any) => {
+	console.log(arr);
 	if (arr && arr.length > 0) {
 		arr.map(item => {
-			if (item.type != "fixedRoute") {
+			if (item.attr.key == "terrainClip") {
-				graphicLayer.addGraphic(item);
+				// 地形开挖
-				console.log("111111111111111");
+				const terrainClip = new mars3d.thing.TerrainClip({
+					diffHeight: item.attr.diffHeight, // 井的深度
+					image: "src/assets/images/Mars3DImg/textures/poly-stone.jpg",
+					imageBottom: "src/assets/images/Mars3DImg/textures/poly-soil.jpg",
+					splitNum: 80, // 井边界插值数
+					enabled: true
+				});
+				const positions = item.points || item.positions;
+				// 挖地区域
+				terrainClip.addArea(positions);
 			} else if (item.type == "fixedRoute") {
 				const newRoutePath = new mars3d.graphic.FixedRoute({
 					id: item.id,
@@ -520,6 +530,9 @@ const showMapData = (arr: any) => {
 				// 启动漫游
 				newRoutePath.flyTo();
 				newRoutePath.start();
+			} else {
+				graphicLayer.addGraphic(item);
+				console.log("111111111111111");
 			}
 		});
 	}
@@ -554,6 +567,22 @@ const saveAddLayer = async (subGraphicLayer: any) => {
 		ElMessage.success("操作成功");
 	}
 };
+// 单独保存空间分析操作
+const saveAnalysisLayer = async (subGraphicLayer: any) => {
+	const geojson = subGraphicLayer.getGraphics(false);
+	console.log(geojson);
+	let allArr = layerJsonArr.value.concat(geojson);
+	let requestData: any = { configKey: "layerConfig", configValue: JSON.stringify(allArr) };
+	if (layerJsonArr.value.length > 0) {
+		requestData.configId = layerId.value;
+	}
+	console.log(layerJsonArr.value);
+	const res = await updateSystemConfig(requestData);
+	console.log(res);
+	if (res.code == 200) {
+		ElMessage.success("操作成功");
+	}
+};
 const qingtianSkybox = new mars3d.GroundSkyBox({
 	// 晴天天空盒
 	sources: {