first commit

2025-12-24 18:19:05 +08:00
commit 78407f1cbd
283 changed files with 170690 additions and 0 deletions
--- a/src/components/Map/MapServer/index.vue
+++ b/src/components/Map/MapServer/index.vue
@@ -0,0 +1,130 @@
+<template>
+  <div :class="[{ 'expend-only': expend }, 'screen-map-server',toolBarStore.expand ? 'expand' : '']" @mouseenter="moveEnter" @mouseleave="moveLeave">
+
+    <img alt="ICON_MAP" class="icon-cover" :src="getAssetsFile(`icon-${active}-active.png`)">
+
+    <div v-for="(item, index) in list" class="screen-map-server-item" :key="index" :style="getStyle(item, index)"
+      @click="toggle(item, index)">
+
+      <img v-show="(!expend && !index) || expend" alt="ICON_MAP" class="icon-map"
+        :src="getAssetsFile(`icon-${item.prop}${item.prop == active ? '-active' : ''}.png`)">
+
+    </div>
+
+  </div>
+
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { getAssetsFile } from '@/utils/common'
+import useToolBarStore from '@/store/modules/toolbar'
+
+const toolBarStore = useToolBarStore()
+const emit = defineEmits([ 'toggle' ])
+
+const active = ref('satellite')
+const expend = ref(false)
+
+const list = [
+  {
+    label: '遥感',
+    prop: 'satellite'
+  },
+  {
+    label: '海图',
+    prop: 'sea'
+  },
+  {
+    label: '浅色',
+    prop: 'light'
+  }
+]
+
+/**
+ * 动态改变当前图例的定位
+ * @param e 当前图例信息
+ * @param index 当前图例下标
+ */
+const getStyle = (e, index) => ({
+  'background-color': !expend.value && e.color ? e.color : 'transparent', // 未展开样式
+  'border-radius': expend.value ? '0px' : '5px', // 未展开样式
+  right: expend.value ? `${index * 40 + (index + 1) * 4}px` : `${(index + 1) * 4}px`,
+  'transition-duration': expend.value ? `${index * 0.2}s` : '0s',
+  'z-index': e.index
+})
+
+const moveEnter = () => {
+  expend.value = true
+}
+
+const moveLeave = () => {
+  expend.value = false
+}
+
+/**
+ * 底图切换
+ * @param e 当前图例信息
+ */
+const toggle = (e) => {
+  active.value = e.prop
+  emit('toggle', 'toggle-base', e.prop)
+}
+</script>
+
+<style scoped lang="scss">
+.screen-map-server {
+  position: absolute;
+  right: 30px;
+  bottom: 112px;
+  width: 48px;
+  height: 48px;
+  padding: 4px;
+  border-radius: 5px;
+  box-sizing: border-box;
+  background-color: transparent;
+  transition-duration: .3s;
+  cursor: pointer;
+  pointer-events: auto;
+
+  &.expend-only {
+    height: 48px;
+    width: 135px;
+  }
+
+  &:hover {
+    background-color: rgba(77, 151, 255, 0.5);
+
+    .icon-cover {
+      display: none;
+    }
+  }
+
+  /* COVER */
+  .icon-cover {
+    display: block;
+    position: absolute;
+    right: 4px;
+    top: 4px;
+    z-index: 9;
+  }
+
+  /* ITEM */
+  .screen-map-server-item {
+    border-radius: 0;
+    height: 40px;
+    position: absolute;
+    top: 4px;
+    width: 40px;
+    z-index: 1;
+
+    .icon-map {
+      height: 100%;
+      width: 100%;
+    }
+  }
+}
+.expand{
+  right: 390px;
+}
+</style>