diff --git a/src/views/goverment/largeScreen/components/spaceAnalysis.vue b/src/views/goverment/largeScreen/components/spaceAnalysis.vue index 3633652..436cc54 100644 --- a/src/views/goverment/largeScreen/components/spaceAnalysis.vue +++ b/src/views/goverment/largeScreen/components/spaceAnalysis.vue @@ -65,6 +65,7 @@
添加可视域 + 保存
@@ -126,6 +127,7 @@
添加矩形 添加多边形 + 保存
@@ -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(); - map.graphicLayer.startDraw({ + graphicLayer.clear(); + 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(); - map.graphicLayer.startDraw({ + graphicLayer.clear(); + 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(); - map.graphicLayer.startDraw({ + graphicLayer.clear(); + 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(); - map.graphicLayer.startDraw({ + graphicLayer.clear(); + 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; diff --git a/src/views/goverment/largeScreen/index.vue b/src/views/goverment/largeScreen/index.vue index 8b59ae3..a47c46d 100644 --- a/src/views/goverment/largeScreen/index.vue +++ b/src/views/goverment/largeScreen/index.vue @@ -129,7 +129,7 @@ - + @@ -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") { - graphicLayer.addGraphic(item); - console.log("111111111111111"); + if (item.attr.key == "terrainClip") { + // 地形开挖 + 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: {