Merge branch 'master' of http://103.135.160.14:9034/r/NslWeb

wangjuncheng

2025-06-06 75e8b201c5094714894b1b6206b8811eab2bfd20

Merge branch 'master' of http://103.135.160.14:9034/r/NslWeb

 public/images/earth/µØͼ.png

 public/images/earth/µØÐÎ.png

 public/images/earth/Ó°Ïñ.png

 src/assets/img/screen/dq.png

 src/store/simulation.js

@@ -23,12 +23,12 @@
    const weatherShow = ref(false)
    const barShow = ref(false)
    const deviceShow = ref(false)
    const showResultAssess = ref(false)
    const showLayerTree = ref(true)
    const showDangerAssess = ref(false)
    const schemCard = ref([])
    const backToHome = ref(false)
    const selectedScheme = ref(null)
    // æ¨¡æ‹Ÿä»¿çœŸå›¾ä¾‹
    const isShowEarth = ref(false)
    // é™é›¨æ•°æ®åˆ—表
    const rainFalls = ref()
    // é™é›¨å•ä½
@@ -58,8 +58,6 @@
        rightRiverShow.value = false
        showPreview.value = false
        deviceShow.value = false
        showResultAssess.value = false
        showDangerAssess.value = false
        schemCard.value = []
    }

@@ -102,24 +100,29 @@
        init()
        flyToHomeView()
        locationShow.value = true
        isShowEarth.value = true

    }

    const startZHJC = () => {
        init()
        functionShow.value = true
        deviceShow.value = true
        isShowEarth.value = true

    }

    const startMNFZ = () => {
        init()
        leftShow.value = true
        // rightRiverShow.value = true
        isShowEarth.value = false

    }

    const startMNPG = () => {
        init()
        // showResultAssess.value = true
        // showDangerAssess.value = true
        isShowEarth.value = false

    }

    const setBackToHome = (value) => {
@@ -162,9 +165,7 @@
        weatherShow,
        barShow,
        deviceShow,
        showResultAssess,
        showLayerTree,
        showDangerAssess,
        schemCard,
        backToHome,
        rainFalls,
@@ -172,6 +173,7 @@
        DangerPoint,
        DeviceShowSwitch,
        DangerShowSwitch,
        isShowEarth,

        // æ–¹æ¡ˆç›¸å…³æ–¹æ³•
        setSchemCard,

 src/views/GisView.vue

@@ -1,5 +1,30 @@
<template>
  <div id="gis-view" ref="mapRef"></div>
  <!-- åˆ‡æ¢åº•å›¾å½±åƒ -->
  <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 class="icon-wrapper">
        <img :src="getImageUrl(item.icon)" :alt="item.label" />
        <span class="label">{{ item.label }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
@@ -17,7 +42,69 @@
import { getDistrictCount, getDistrictCountByCity } from "@/api/index";
import { useRoute } from "vue-router";
import { EventBus } from "@/eventBus"; // å¼•å…¥äº‹ä»¶æ€»çº¿
import { useSimStore } from "@/store/simulation";
const simStore = useSimStore();

const views = [
  { label: "地图", value: "map", icon: "地图.png" },
  { label: "影像", value: "image", icon: "影像.png" },
  { label: "地形", value: "terrain", icon: "地形.png" },
];

const getImageUrl = (iconName) => {
  return `/images/earth/${iconName}`;
};

const picShow = ref(false);

const handleShow = () => {
  picShow.value = !picShow.value;
};

const currentIndex = ref(-1);

let currentLayer = null;

const switchView = async (index) => {
  currentIndex.value = index;

  // å¦‚果已经有图层存在，先从地图中移除
  if (currentLayer) {
    currentLayer.removeFromMap();
    currentLayer = null; // æ¸…空引用
  }

  if (views[index].value === "map") {
    // ç™¾åº¦åœ°å›¾
    currentLayer = await earthCtrl.factory.createImageryLayer({
      sourceType: "baidu",
      url: "https://ss1.bdstatic.com/8bo_dTSlR1gBo1vgoIiO_jowehsv/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&udt=20180810&scaler=1&showtext=1",
    });
  } else if (views[index].value === "image") {
    currentLayer = await earthCtrl.factory.createImageryLayer({
      sourceType: "mapworld",
      url: "https://t0.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=3ec79cf7a9dcc6bb18411a5414b148cb",
      layers: "tdtBasicLayer",
      style: "default",
      format: "image/jpeg",
      maximumLevel: 18,
      layer: "",
      tileMatrixSetID: "",
    });
    //标注层
    currentLayer = await earthCtrl.factory.createImageryLayer({
      sourceType: "mapworld",
      subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
      url: "https://{s}.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&tk=c53eb074c3fcba5ac86103d4d711bbe8",
    });
  } else if (views[index].value === "terrain") {
    // åœ°å½¢å›¾å±‚
    currentLayer = await earthCtrl.factory.createTerrainLayer({
      sourceType: "arcgis",
      url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
    });
  }
};
const route = useRoute();
let handler = null;
function initMap() {
@@ -43,6 +130,8 @@

  //显示fps
  earthCtrl.showFPS = true;

  // ç³»ç»Ÿç›®å‰é»˜è®¤ä½¿ç”¨çš„
  earthCtrl.factory.createImageryLayer({
    sourceType: "mapworld",
    url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=7eb11c0c503429878691ac917238f87f",
@@ -474,9 +563,77 @@
  height: 100vh;
  position: absolute;
}

// // ä¿®æ”¹æŒ‡å—针位置
/deep/ .compass {
  right: 128px !important;
  top: 112px;
}

.diqiu {
  position: absolute;
  bottom: 8%;
  right: 4%;
  z-index: 9999;
}

.earthBox {
  z-index: 9999;
  width: 12%;
  height: 7%;
  background-color: rgba(0, 9, 9, 0.3);
  position: absolute;
  right: 8%;
  bottom: 6%;
  display: flex;
  justify-content: space-evenly;
  padding: 10px 6px;
}

.icon-wrapper {
  position: relative;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid transparent; /* é»˜è®¤é€æ˜Žè¾¹æ¡†å ä½ */

  img {
    height: 100%;
    width: auto; /* ç¡®ä¿å›¾ç‰‡æŒ‰æ¯”例缩放 */
    margin: 0;
    padding: 0;
    display: block; /* ç§»é™¤å›¾ç‰‡ä¸‹æ–¹å¯èƒ½å­˜åœ¨çš„空白间隙 */
  }

  .label {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    color: white;
  }
}

.item-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.item-container.active .icon-wrapper {
  border: 1px solid #218967; /* è“è‰²è¾¹æ¡† */
}

.item-container.active .label {
  background-color: rgba(33, 137, 103, 0.8);
}

.diqiu.shift-right {
  right: 10%;
}
.earthBox.shift-right {
  right: 13%;
}
</style>