From 80f2898c87c89352099337397b6b264437e4a037 Mon Sep 17 00:00:00 2001
From: TreeWish <1131093754@qq.com>
Date: 星期二, 14 三月 2023 10:58:42 +0800
Subject: [PATCH] 地图影像切换
---
src/components/Screen/bottom.vue | 183 +++++++++++++++++++++++++++++++++++----------
1 files changed, 142 insertions(+), 41 deletions(-)
diff --git a/src/components/Screen/bottom.vue b/src/components/Screen/bottom.vue
index 216c9db..96a8db5 100644
--- a/src/components/Screen/bottom.vue
+++ b/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;
}
--
Gitblit v1.9.3