From 2364c314288f26a4d29b7d22e9baa1e45f43aaeb Mon Sep 17 00:00:00 2001 From: 584911253@qq.com <584911253@qq.com> Date: 星期日, 26 二月 2023 17:44:45 +0800 Subject: [PATCH] 综合展示样式修改 --- src/components/mapol.vue | 89 +++++++++++++++++++++++++++++++++++++++----- 1 files changed, 78 insertions(+), 11 deletions(-) diff --git a/src/components/mapol.vue b/src/components/mapol.vue index a23bc3d..093ac52 100644 --- a/src/components/mapol.vue +++ b/src/components/mapol.vue @@ -1,16 +1,32 @@ <template> <div id="mapol"> - <div - @click="changeMenulayer" - class="center CenDiv" - :class="{ center1: centerFlag }" - > + <div style="display: flex"> <div - id="cenBg" - v-bind:class="{ active: isActive, menuLayer: isMenuLayer }" - ></div> + @click="changeMenulayer" + class="center CenDiv" + :class="{ center1: centerFlag }" + > + <div + id="cenBg" + v-bind:class="{ active: isActive, menuLayer: isMenuLayer }" + ></div> + </div> + <div @click="changeMapType" class="changeMapType"> + <div id="cenBg" :class="show2DMap ? 'mapTypeTwo' : 'mapTypeThree'"></div> + </div> </div> +<!-- <div--> +<!-- @click="changeMenulayer"--> +<!-- class="center CenDiv"--> +<!-- :class="{ center1: centerFlag }"--> +<!-- >--> +<!-- <div--> +<!-- id="cenBg"--> +<!-- v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"--> +<!-- ></div>--> + +<!-- </div>--> <div v-show="$store.state.isNaviget" class="sindagis-map-compass"> <span class="left" @@ -57,11 +73,15 @@ isActive: true, isMenuLayer: false, rotate: 0, - currentDir: '' + currentDir: '', + show2DMap:false, } }, mounted() { - this.init2DMap() + this.init2DMap(); + this.$bus.$on('changemapType', (e) => { + this.show2DMap = e; + }); }, methods: { init2DMap() { @@ -85,7 +105,7 @@ }), controls: defaultControls().extend([ new FullScreen(), - + ]), interactions: defaultInteractions().extend([new DragRotateAndZoom()]), }) @@ -99,6 +119,21 @@ // $(".ol-scale-line").css("left", ($(window).width() - $(".ol-scale-line").width() - 25) + "px"); }); + }, + + //浜岀淮/涓夌淮鍦板浘鍒囨崲 + changeMapType(){ + // debugger + this.show2DMap = !this.show2DMap; + //浜岀淮 + if (this.show2DMap){ + this.$bus.$emit("changemap", 2); + } + //涓夌淮 + else { + this.$bus.$emit("changemap", 3); + } + this.$bus.$emit("changemapType", this.show2DMap); }, changeMenulayer() { @@ -281,4 +316,36 @@ background: url("../assets/img/compass.png") -89px -5px / 266px no-repeat; } +.changeMapType{ + position: absolute; + bottom: 1%; + left: calc(1% + 75px); + height: 40px; + width: 60px; + z-index: 101; + display: flex; + justify-content: center; + align-items: center; + box-shadow: 3px 3px 6px #666; + border-radius: 5px; + background: #fff; + cursor: pointer; +} +.mapTypeTwo{ + width: 100%; + height: 100%; + margin-left: 10px; + background-image: url("../assets/img/3dmap.png"); + background-repeat: no-repeat; + background-size: contain; +} +.mapTypeThree{ + width: 100%; + height: 100%; + margin-left: 10px; + background-image: url("../assets/img/2dmap.png"); + background-repeat: no-repeat; + background-size: contain; +} + </style> -- Gitblit v1.9.3