修改图层显示

guonan

2025-04-21 df7876b99d8e8d359909756d42e909dcc215fa38

修改图层显示

 src/components/monifangzhen/ResultAssess.vue

@@ -50,7 +50,12 @@
                    @click="handleClick(item)"
                    class="level-item"
                >
                    <img style="width: 100%" src="@/assets/img/mapview/example.png" alt="" srcset="" />
          <img
            style="width: 100%"
            src="@/assets/img/mapview/example.png"
            alt=""
            srcset=""
          />
                    <div class="title">
                        <div>创建时间：</div>
                        <div>2024年04月03日12:00:00</div>
@@ -66,10 +71,19 @@
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount, onUnmounted, defineEmits } from "vue"
import { loadAreaPolygon } from '@/utils/area.js'
const emits = defineEmits(['row-click'])
const currentLevel = ref("10年一遇")
import {
  ref,
  reactive,
  onMounted,
  onBeforeUnmount,
  onUnmounted,
  defineEmits,
} from "vue";
import { loadAreaPolygon } from "@/utils/area.js";
import { useSimStore } from "@/store/simulation";
import { storeToRefs } from "pinia";
const emits = defineEmits(["row-click"]);
const currentLevel = ref("10年一遇");
const form = ref({
    name: `孙胡沟${currentLevel.value}降雨模拟`,
    interval: 15,
@@ -78,7 +92,7 @@
    jy: "",
    jg: "",
    date: "",
})
});
const levelList = ref([
    {
        name: "10年一遇",
@@ -92,40 +106,42 @@
    // {
    //     name: "100年一遇",
    // },
])
]);

let dataSource = null
let dataSource = null;
const simStore = useSimStore();

const { showDangerAssess } = storeToRefs(simStore);

function handleClick(item) {
    currentLevel.value = item.name
    showDetail.value = !showDetail.value
    emits('row-click', showDetail.value)

    addFxArea(showDetail.value)
  currentLevel.value = item.name;
  showDangerAssess.value = !showDangerAssess.value;
  //   showDangerAssess.value = true;
  emits("row-click", showDangerAssess.value);
  addFxArea(showDangerAssess.value);
}
const showDetail = ref(false)
// const showDangerAssess = ref(false);
function addFxArea(visible) {
    if (dataSource != null) {
        dataSource.show = visible
    dataSource.show = visible;

        return
    return;
    }
    // const dataSourcePromise = Cesium.GeoJsonDataSource.load('/json/fxArea.json', {
    //     stroke: Cesium.Color.YELLOW,
    //     fill: Cesium.Color.YELLOW.withAlpha(0.5),
    // })
    dataSourcePromise.then(data => {
        dataSource = data
        viewer.dataSources.add(data)
    })

  const dataSourcePromise = Cesium.GeoJsonDataSource.load("/json/fxArea.json", {
    stroke: Cesium.Color.YELLOW,
    fill: Cesium.Color.YELLOW.withAlpha(0.5),
  });
  dataSourcePromise.then((data) => {
    dataSource = data;
    viewer.dataSources.add(data);
  });
}
function removeFxArea() {
    dataSource && viewer.dataSources.remove(dataSource)
  dataSource && viewer.dataSources.remove(dataSource);
}
onUnmounted(() => {
    removeFxArea()
})
  removeFxArea();
});
</script>

<style lang="less" scoped>

 src/components/tools/LayerTree.vue

@@ -19,7 +19,12 @@
import { useRoute } from "vue-router";
import { loadAreaPolygon, clearAreaPolygon } from "@/utils/area";
import { checkedKeys } from "@/store/index";
import { getDuanMainData, getDevicetListData, getDistrictListData } from "@/api/index.js";
import {
  getDuanMainData,
  getDevicetListData,
  getDistrictListData,
} from "@/api/index.js";
import { init } from "echarts";

const route = useRoute();

@@ -57,42 +62,85 @@
/**
 * 初始化地图
 */
function initMap() {
  // 初始化地形数据
  let TerrainLayer = earthCtrl.factory.createTerrainLayer({
// function initMap() {
//   // 初始化地形数据
//   let TerrainLayer = earthCtrl.factory.createTerrainLayer({
//     sourceType: "ctb",
//     url: "http://106.120.22.26:9103/gisserver/ctsserver/sungugoudem",
//   });
//   treeMap.set("地形数据", TerrainLayer);
//   console.log(TerrainLayer,'aaaa')
//   // 初始化模型数据
//   // let modelPromise = addTileset(
//   //   "http://106.120.22.26:9103/gisserver/c3dserver/sunhugou3d/tileset.json"
//   // );
//   // modelPromise.then((model) => {
//   //   treeMap.set("模型数据", model);
//   // });

//   // 初始化影像数据
//   // let ImageryLayer = earthCtrl.factory.createImageryLayer({
//   //   sourceType: "tms",
//   //   url: "http://106.120.22.26:9103/gisserver/tmsserver/sunhugoudom",
//   // });
//   // treeMap.set("影像数据", ImageryLayer);
// }


// 地形数据
let TerrainLayer = null;
async function initMap() {
  try {
    // 初始化地形数据（使用await等待Promise解析）
    TerrainLayer = await earthCtrl.factory.createTerrainLayer({
    sourceType: "ctb",
    url: "http://106.120.22.26:9103/gisserver/ctsserver/sungugoudem",
  });
  treeMap.set("地形数据", TerrainLayer);
    // 初始化模型数据
  // let modelPromise = addTileset(
  //   "http://106.120.22.26:9103/gisserver/c3dserver/sunhugou3d/tileset.json"
  // );
  // modelPromise.then((model) => {
  //   treeMap.set("模型数据", model);
  // });

  // 初始化影像数据
  // let ImageryLayer = earthCtrl.factory.createImageryLayer({
  //   sourceType: "tms",
  //   url: "http://106.120.22.26:9103/gisserver/tmsserver/sunhugoudom",
  // });
  // treeMap.set("影像数据", ImageryLayer);
    treeMap.set("地形数据", TerrainLayer);
  } catch (error) {
    console.error("初始化失败:", error);
  }
}

/**
 * 处理复选框状态变化
 */
function handleCheckChange(data, checked, indeterminate) {
  const label = data.label;
  if (label === "影像数据") {
    if (checked) {
      // 加载影像数据
      console.log("开始加载影像数据...");
      let ImageryLayer = earthCtrl.factory.createImageryLayer({
// 应用初始化时预先加载
// 影像数据初始
let ImageryLayer = null;
async function initImageryLayer() {
  ImageryLayer = await earthCtrl.factory.createImageryLayer({
        sourceType: "tms",
        url: "http://106.120.22.26:9103/gisserver/tmsserver/sunhugoudom",
      });
}

function handleCheckChange(data, checked, indeterminate) {
  const label = data.label;
  if (label === "地形数据") {
    if (checked) {
      initMap();
      treeMap.set("地形数据", TerrainLayer);
      toggleLayerVisible("地形数据", true); // 显示影像数据
    } else {
      const layer = treeMap.get("地形数据");
      if (layer) {
        toggleLayerVisible("地形数据", false); // 隐藏影像数据
        TerrainLayer.removeFromMap(); // 从 Map 中移除
        console.log("影像数据已移除");
      }
    }
  }
  if (label === "影像数据") {
    if (checked) {
      initImageryLayer();
      // // 加载影像数据
      // console.log("开始加载影像数据...");
      // ImageryLayer = earthCtrl.factory.createImageryLayer({
      //   sourceType: "tms",
      //   url: "http://106.120.22.26:9103/gisserver/tmsserver/sunhugoudom",
      // });
      treeMap.set("影像数据", ImageryLayer);
      toggleLayerVisible("影像数据", true); // 显示影像数据
    } else {
@@ -114,11 +162,13 @@
        "http://106.120.22.26:9103/gisserver/c3dserver/sunhugou3d/tileset.json"
      );

      modelPromise.then((model) => {
      modelPromise
        .then((model) => {
        console.log("模型数据加载完成");
        treeMap.set("模型数据", model); // 将模型数据存储到 treeMap
        toggleLayerVisible("模型数据", true); // 显示模型数据
      }).catch((error) => {
        })
        .catch((error) => {
        console.error("模型数据加载失败:", error);
      });
    } else {
@@ -162,7 +212,7 @@
      console.log(`Setting entity show to:`, checked);
      entity.show = checked;
    });
  } else if (entityList && typeof entityList.show !== 'undefined') {
  } else if (entityList && typeof entityList.show !== "undefined") {
    console.log(`Setting layer show to:`, checked);
    entityList.show = checked;
  } else {
@@ -178,7 +228,7 @@
 */
const getDevicetList = async () => {
  await getDevicetListData().then((res) => {
    console.log(res.data, 'devicetList.value2');
    console.log(res.data, "devicetList.value2");
    devicetList.value = res.data;
  });
};
@@ -312,10 +362,7 @@
      toggleLayerVisible("孙胡沟隐患点", false);
      toggleLayerVisible("孙胡沟断面", false);
    } else if (path == "/mnfz") {
      treeRef.value.setCheckedKeys(
        defaultKeys.concat("孙胡沟断面"),
        false
      );
      treeRef.value.setCheckedKeys(defaultKeys.concat("孙胡沟断面"), false);
      toggleLayerVisible("孙胡沟断面", false);
      toggleLayerVisible("孙胡沟隐患点", false);
      toggleLayerVisible("综合监测设备信息", false);

 src/views/mnfz.vue

@@ -1,9 +1,23 @@
<template>
  <Left @start="startSimulate" @end="endSimulate" />
  <echartInfo :isDynamicMode="isDynamicMode" :isFinish="isFinish" v-if="rightRiverShow" />
  <TimeLine v-if="showWaterSimulate" @time-update="timeUpdate" @is-playing="isPlaying"
    :waterSimulateParams="waterSimulateParams" @playbackFinished="playbackFinished" @end="endSimulate" />
  <DebuffDetail v-if="showDebuffDetail" @open="openDetail" @close="showDebuffDetail = false" />
  <echartInfo
    :isDynamicMode="isDynamicMode"
    :isFinish="isFinish"
    v-if="rightRiverShow"
  />
  <TimeLine
    v-if="showWaterSimulate"
    @time-update="timeUpdate"
    @is-playing="isPlaying"
    :waterSimulateParams="waterSimulateParams"
    @playbackFinished="playbackFinished"
    @end="endSimulate"
  />
  <DebuffDetail
    v-if="showDebuffDetail"
    @open="openDetail"
    @close="showDebuffDetail = false"
  />
  <DebuffTable v-if="showDebuffTable" @close="closeDebuffTable" />
</template>

@@ -22,12 +36,10 @@
import danger from "@/assets/img/left/danger.png";
import { checkedKeys } from "@/store/index";


import { useSimStore } from "@/store/simulation";
import { storeToRefs } from "pinia";
const simStore = useSimStore();
const { rightRiverShow } = storeToRefs(simStore);


const waterSimulateParams = ref({});
const showWaterSimulate = ref(false);
@@ -37,9 +49,6 @@
const isFinish = ref(true);

const treeMap = new Map();




// 提供方法给所有子组件
provide("simulateActions", {