地图影像切换

TreeWish

2023-03-14 80f2898c87c89352099337397b6b264437e4a037

地图影像切换

 src/assets/img/Screen/geovisearth-ter.png

 src/components/Screen/bottom.vue

@@ -56,8 +56,19 @@
        </div>
      </div>
      <div class="bottom13">
        <img :src="yxImg" @click="ChangeBaseLayer('yx')" title="影像图" />
        <img :src="xrImg" @click="ChangeBaseLayer('xr')" title="晕渲图" />
        <div class="bottom13-wrapper" :class="isExpand ? 'expend' : 'fold'" @mouseover="handleMouseOver" @mouseout="handleMouseOut">
          <div
            v-for="item in yxList"
            yxList
            :class="item.name == currYX && isExpand ? [item.key, 'active'] : item.key"
            @click="ChangeBaseLayer(item.name)"
            :title="item.name"
          ></div>

          <!-- <transition name="slide-fade">
            <p v-if="show">hello</p>
          </transition> -->
        </div>
      </div>
    </div>
    <div class="bottom2">
@@ -169,6 +180,22 @@
        },
      ],
      showTree: false,
      currYX: "影像图",
      yxList: [
        {
          name: "影像图",
          key: "yingxiang",
        },
        {
          name: "注记图",
          key: "zhuji",
        },
        {
          name: "晕渲图",
          key: "yunxuan",
        },
      ],
      isExpand: false
    }
  },
  computed: {
@@ -189,46 +216,47 @@
    this.getCountProjectTour()
  },
  methods: {
    ChangeBaseLayer(parm) {
      if (parm == "yx") {
        if (this.YXState) {
          //this.yxImg = require("../../assets/img/Screen/bdimg.png")
          //加载百度影像
          Viewer.imageryLayers._layers[1].show = true
          Viewer.imageryLayers._layers[2].show = false
          Viewer.imageryLayers._layers[3].show = false
        } else {
          //this.yxImg = require("../../assets/img/Screen/yximg.png")
          Viewer.imageryLayers._layers[1].show = false
          Viewer.imageryLayers._layers[2].show = true
          Viewer.imageryLayers._layers[3].show = true
        }
        this.YXState = !this.YXState
    ChangeBaseLayer(name) {
      this.currYX = name
      Viewer.imageryLayers._layers[1].show = false
      Viewer.imageryLayers._layers[2].show = false
      Viewer.imageryLayers._layers[3].show = false
      if (yunxuanLayer) {
        yunxuanLayer.item.show = false
      }

      if (parm == "xr") {
        if (yunxuanLayer == null) {
          var urls = "https://tiles3.geovisearth.com/base/v1/ter"
          // 星图地球地形晕渲
          yunxuanLayer = sgworld.Creator.createUrlTemplateImageryProvider(
            "星图地球地形晕渲",
            {
              url:
                urls +
                "/{z}/{x}/{y}?format=webp&token=486dac3bec56d7d7c2a581c150be2bd937462f1e8f3bc9c78b5658b396122405",
            },
            "0",
            undefined,
            true,
            ""
          )
        }
        if (this.XRState) {
      switch (name) {
        case "晕渲图":
          if (yunxuanLayer == null) {
            var urls = "https://tiles3.geovisearth.com/base/v1/ter"
            // 星图地球地形晕渲
            yunxuanLayer = sgworld.Creator.createUrlTemplateImageryProvider(
              "星图地球地形晕渲",
              {
                url:
                  urls +
                  "/{z}/{x}/{y}?format=webp&token=486dac3bec56d7d7c2a581c150be2bd937462f1e8f3bc9c78b5658b396122405",
              },
              "0",
              undefined,
              true,
              ""
            )
          }

          yunxuanLayer.item.show = true
        } else {
          yunxuanLayer.item.show = false
        }
        this.XRState = !this.XRState

          break
        case "影像图":
          Viewer.imageryLayers._layers[2].show = true

          break
        case "注记图":
          Viewer.imageryLayers._layers[1].show = true

          break
        default:
          break
      }
    },
    handleMenuClick(menu) {
@@ -369,6 +397,12 @@
      this.showTree = !this.showTree
      this.$bus.$emit("changeTree", this.showTree)
    },
    handleMouseOver() {
      this.isExpand = true
    },
    handleMouseOut() {
      this.isExpand = false
    }
  },
}
</script>
@@ -399,16 +433,83 @@
      align-items: center;
      justify-content: space-around;
    }

    .bottom13 {
      display: flex;
      flex-direction: row-reverse;
    }
    -webkit-transition-property: width;
    .expend {
      transition-property: width;
      -webkit-transition-duration: 0.5s;
      transition-duration: 0.5s;
      width: 320px !important;
    }
    .fold {
      -webkit-transition-property: width;
      transition-property: width;
      -webkit-transition-duration: 0.5s;
      transition-duration: 0.5s;
      width: 100px !important;
    }
    .bottom13-wrapper {
      height: 80px;
      width: 100px;
      -webkit-transition-property: width;
      transition-property: width;
      -webkit-transition-duration: 0.5s;
      transition-duration: 0.5s;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      position: relative;
      overflow: hidden;
      &:hover {
        .zhuji {
          right: 100px;
        }
        .yunxuan {
          right: 200px;
        }
      }

      .yingxiang,
      .zhuji,
      .yunxuan {
        margin-right: 10px;
        width: 92px;
        height: 61px;
        background: url(~@/assets/img/Screen/yximg.png);
        background-size: 100% 100%;
        background-position: 0 0;
        position: absolute;
        z-index: 3;
        right: 0;
        -webkit-transition-property: right;
        transition-property: right;
        -webkit-transition-duration: 0.5s;
        transition-duration: 0.5s;
      }
      .zhuji {
        z-index: 2;
        background-position: 0px -61px;
        right: 5px;
        background: url(~@/assets/img/Screen/bdimg.png);
        background-size: 100% 100%;
      }
      .yunxuan {
        z-index: 1;
        background-position: 0 -122px;
        right: 10px;
        background: url(~@/assets/img/Screen/geovisearth-ter.png);
        background-size: 100% 100%;
      }
      .active {
        border: 1px solid #409eff;
      }
      img {
        cursor: pointer;
        margin-right: 30px;
        margin-right: 10px;
        width: 92px;
        height: 61px;
      }