快捷缩放

src/components/Map/index.vue

@@ -484,13 +484,13 @@ onUnmounted(() => {
   }
   .right-tool {
     position: absolute;
-    bottom: 160px;
-    right: 175px;
+    bottom: 90px;
+    right: 0px;
     z-index: 2;
   }
   .model-btn {
     background-color: #04327c;
-    font-size: 25.73px;
+    font-size: 12px;
     font-family: 'SourceHanSansCN';
     border: 1px solid #91cfff;
     color: #eaf3fc;
@@ -499,8 +499,8 @@ onUnmounted(() => {
     border-radius: 5px;
   }
   .ruler-icon {
-    width: 42px;
-    height: 42px;
+    width: 14px;
+    height: 14px;
     background: url('@/assets/images/map/ruler.png') no-repeat;
     background-size: 100% 100%;
     cursor: pointer;

src/components/Map/quickZoom.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="flex">
     <div class="plusIcon" @click="addStep"></div>
-    <div style="margin: 10px 0; position: relative">
-      <el-slider v-model="step" class="slider" :min="1" :max="4" vertical :show-tooltip="false" height="183px" @input="changeStep" />
+    <div style="margin: 2px 0; position: relative">
+      <el-slider v-model="step" class="slider" :min="1" :max="4" vertical :show-tooltip="false" height="59px" @input="changeStep" />
       <div v-show="step === 1" class="tooltip">市</div>
-      <div v-show="step === 2" class="tooltip" style="bottom: 36px">区/县</div>
-      <div v-show="step === 3" class="tooltip" style="bottom: 93px; left: -162px">镇/街道</div>
-      <div v-show="step === 4" class="tooltip" style="bottom: 160px; left: -162px">村/社区</div>
+      <div v-show="step === 2" class="tooltip" style="bottom: 14px; left: -30px">区/县</div>
+      <div v-show="step === 3" class="tooltip" style="bottom: 34px; left: -40px">镇/街道</div>
+      <div v-show="step === 4" class="tooltip" style="bottom: 53px; left: -40px">村/社区</div>
     </div>
     <div class="minusIcon" @click="reduceStep"></div>
   </div>
@@ -61,61 +61,64 @@ const reduceStep = () => {
   align-items: center;
 }
 .plusIcon {
-  width: 33px;
-  height: 33px;
+  width: 11px;
+  height: 11px;
   background-image: url('@/assets/images/map/plus.png');
   cursor: pointer;
   background-repeat: no-repeat;
+  background-size: 100% 100%;
 }
 .minusIcon {
-  width: 27px;
-  height: 27px;
+  width: 9px;
+  height: 9px;
   background-image: url('@/assets/images/map/minus.png');
   cursor: pointer;
   background-repeat: no-repeat;
+  background-size: 100% 100%;
 }
 .tooltip {
   position: absolute;
-  left: -126px;
-  bottom: -23px;
+  left: -20px;
+  bottom: -6px;
   color: #fff;
-  padding-left: 14px;
-  padding-top: 4px;
-  font-size: 32px;
-  min-width: 80px;
-  height: 63px;
-  line-height: 63px;
+  padding-left: 3px;
+  padding-top: 1px;
+  font-size: 12px;
+  min-width: 20px;
+  height: 16px;
+  line-height: 16px;
   background-color: #3b71eb;
   text-align: center;
   &::before {
     content: '';
     width: 0;
     height: 0;
-    border-bottom: 45px solid #3b71eb;
-    border-left: 45px solid transparent;
+    border-bottom: 12px solid #3b71eb;
+    border-left: 12px solid transparent;
     position: absolute;
-    top: 10px;
-    right: -20px;
+    top: 2px;
+    right: -5px;
     transform: rotate(-45deg);
   }
 }
 .slider {
   :deep(.el-slider__bar) {
+    width: 3px;
     background: #1876be;
   }
   :deep(.el-slider__runway) {
-    width: 9.66px;
+    width: 3px;
     background: #1876be;
-    border-radius: 4.5px 4.5px 4.5px 4.5px;
+    border-radius: 1.5px;
   }
   :deep(.el-slider__button-wrapper) {
-    width: 48px;
-    height: 48px;
-    left: -20px;
+    width: 15px;
+    height: 15px;
+    left: -5.5px;
   }
   :deep(.el-slider__button) {
-    width: 48px;
-    height: 48px;
+    width: 15px;
+    height: 15px;
     background: url('@/assets/images/map/dot.png') no-repeat;
     background-size: 100% 100%;
     border: none;

src/views/globalMap/index.vue

@@ -21,7 +21,7 @@
       <!--右侧菜单-->
       <RightMenu ref="rightMenuRef" :point-type="pointType" />
       <!--更换地图类型-->
-<!--      <SwitchMapTool :active-map="activeMap" class="tool-box" @switch-map="switchMap" />-->
+      <SwitchMapTool :active-map="activeMap" class="tool-box" @switch-map="switchMap" />
       <!--时间轴-->
       <TimeAxis />
       <DrawTools v-if="showDrawTools" @handle-analysis-data="handleAnalysisData" />
@@ -291,8 +291,8 @@ provide('getMarkers', getMarkers);
   //overflow: hidden;
   .tool-box {
     position: absolute;
-    right: 430px;
-    bottom: 180px;
+    right: 90px;
+    bottom: 90px;
     z-index: 10;
     color: #fff;
   }