1

wangjuncheng

2025-06-06 5c3fd1617e1413683b1586451d746aa1686b09ba

 src/views/GisView.vue

@@ -1,24 +1,12 @@
<template>
  <div id="gis-view" ref="mapRef"></div>
  <!-- 切换底图影像 -->
  <div
    @click="handleShow"
    class="diqiu"
    :class="{ 'shift-right': simStore.isShowEarth }"
  >
  <div @click="handleShow" class="diqiu" :class="{ 'shift-right': simStore.isShowEarth }">
    <img src="@/assets/img/screen/dq.png" alt="" />
  </div>
  <div
    v-show="picShow"
    class="earthBox"
    :class="{ 'shift-right': simStore.isShowEarth }"
  >
    <div
      v-for="(item, index) in views"
      :key="index"
      :class="['item-container', { active: currentIndex === index }]"
      @click="switchView(index)"
    >
  <div v-show="picShow" class="earthBox" :class="{ 'shift-right': simStore.isShowEarth }">
    <div v-for="(item, index) in views" :key="index" :class="['item-container', { active: currentIndex === index }]"
      @click="switchView(index)">
      <div class="icon-wrapper">
        <img :src="getImageUrl(item.icon)" :alt="item.label" />
        <span class="label">{{ item.label }}</span>
@@ -44,6 +32,21 @@
import { EventBus } from "@/eventBus"; // 引入事件总线
import { useSimStore } from "@/store/simulation";
const simStore = useSimStore();
// 1. 设置初始时间
const date = new Date(2025, 3, 11, 12, 0, 0, 0);
// const date = new Date(2024, 6, 13, 5, 5, 50);
const julianDate = SmartEarth.Cesium.JulianDate.fromDate(date);
// earthCtrl.viewer.clock.currentTime = julianDate;

// // 2. 配置时钟选项，禁止自动推进时间
earthCtrl.viewer.clockViewModel.shouldAnimate = false; // 禁用动画
earthCtrl.viewer.clockViewModel.clockRange =
  SmartEarth.Cesium.ClockRange.CLAMPED; // 限制时间范围
earthCtrl.viewer.clockViewModel.multiplier = 0; // 设置时间推进速度为0
// 开启大气散射效果
// earthCtrl.atmosphere.enable();
// 3. 设置当前时间并锁定
earthCtrl.viewer.clock.currentTime = julianDate;

const views = [
  { label: "地图", value: "map", icon: "地图.png" },
@@ -595,14 +598,17 @@
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid transparent; /* 默认透明边框占位 */
  border: 1px solid transparent;
  /* 默认透明边框占位 */

  img {
    height: 100%;
    width: auto; /* 确保图片按比例缩放 */
    width: auto;
    /* 确保图片按比例缩放 */
    margin: 0;
    padding: 0;
    display: block; /* 移除图片下方可能存在的空白间隙 */
    display: block;
    /* 移除图片下方可能存在的空白间隙 */
  }

  .label {
@@ -623,7 +629,8 @@
}

.item-container.active .icon-wrapper {
  border: 1px solid #218967; /* 蓝色边框 */
  border: 1px solid #218967;
  /* 蓝色边框 */
}

.item-container.active .label {
@@ -633,6 +640,7 @@
.diqiu.shift-right {
  right: 10%;
}

.earthBox.shift-right {
  right: 13%;
}