修改图层显示

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>