feat: added map scaling component

zaigie · Oct 8, 2024 · bb834e3 · bb834e3
1 parent 0a02c67
commit bb834e3
Showing 1 changed file with 46 additions and 0 deletions.
diff --git a/web/src/views/PcHome/component/MapView.vue b/web/src/views/PcHome/component/MapView.vue
@@ -10,6 +10,7 @@ import {
   LTileLayer,
   LTooltip,
 } from "@vue-leaflet/vue-leaflet";
+import { AddCircle20Filled, SubtractCircle20Filled } from "@vicons/fluent";
 import ApiService from "@/service/api.js";
 import IconBase from "@/assets/map/base.webp";
 import IconPlayer from "@/assets/map/player.webp";
@@ -92,6 +93,18 @@ const onMapMouseMove = (event) => {
   ];
 };
 
+// 左下角控件
+const onAddZoom = () => {
+  if (zoom.value !== 6) {
+    zoom.value += 1;
+  }
+};
+const onSubtractZoom = () => {
+  if (zoom.value !== 0) {
+    zoom.value -= 1;
+  }
+};
+
 onMounted(async () => {
   let res = await api.getPlayerList({});
   playerList.value = res.data.value;
@@ -187,6 +200,39 @@ onUnmounted(async () => {
         </template>
       </template>
     </l-map>
+    <div
+      class="min-h-50 p-2 fixed bottom-2 left-2 z-999 flex flex-col justify-end"
+    >
+      <div class="h-40 flex flex-col justify-between items-center">
+        <n-icon
+          class="cursor-pointer"
+          size="24"
+          color="#fff"
+          @click="onAddZoom"
+        >
+          <AddCircle20Filled />
+        </n-icon>
+        <n-slider
+          style="height: 100px"
+          class="border border-solid border-#fff rounded-full"
+          v-model:value="zoom"
+          :tooltip="false"
+          :height="4"
+          :step="1"
+          :min="0"
+          :max="6"
+          vertical
+        />
+        <n-icon
+          class="cursor-pointer"
+          size="24"
+          color="#fff"
+          @click="onSubtractZoom"
+        >
+          <SubtractCircle20Filled />
+        </n-icon>
+      </div>
+    </div>
     <div class="control">
       <div>
         <span>{{ $t("map.showFastTravel") }}</span>