feat: 增加缩放

.env

@@ -3,9 +3,9 @@ VITE_DEV_PORT = '8080'
 
 # development path
 # VITE_DEV_PATH = 'http://192.168.0.34:11887'
-VITE_DEV_PATH = 'http://114.115.222.135:9015/'
+VITE_DEV_PATH = 'http://192.168.0.34:8102/'
 # VITE_DEV_PATH = 'http://192.168.0.120:3001'
-VITE_DEV_TOKEN = '2a6c435a-1b8f-43b6-938c-ab6b73f96801'
+VITE_DEV_TOKEN = 'dd23c593-c823-4eb3-86d0-54ec77c99880'
 
 # production path
 VITE_PRO_PATH = 'http://192.168.0.235:8177'

src/packages/components/Charts/Maps/MapBase/config.ts

@@ -8,6 +8,8 @@ import dataJson from './data.json'
 export const includes = []
 
 export const option = {
+  canScroll: true,
+  canDrag: true,
   dataset: dataJson,
   mapRegion: {
     adcode: 'china',

src/packages/components/Charts/Maps/MapBase/config.vue

@@ -2,6 +2,16 @@
   <!-- Echarts 全局设置 -->
   <global-setting :optionData="optionData"></global-setting>
   <CollapseItem name="地图" :expanded="true">
+    <SettingItemBox name="允许缩放">
+      <n-space>
+        <n-switch v-model:value="optionData.canScroll" size="small"/>
+      </n-space>
+    </SettingItemBox>
+    <SettingItemBox name="允许拖拽">
+      <n-space>
+        <n-switch v-model:value="optionData.canDrag" size="small"/>
+      </n-space>
+    </SettingItemBox>
     <SettingItemBox name="地图区域">
       <SettingItem name="默认中国">
         <n-select

src/packages/components/Charts/Maps/MapBase/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div ref="box" :style="{scale}" style="position: absolute">
     <div class="back-icon" v-if="(enter && levelHistory.length !== 0) || (enter && !isPreview())" @click="backLevel">
       <n-icon :color="backColor" :size="backSize * 1.1">
         <ArrowBackIcon />
@@ -306,6 +306,113 @@ watch(() => customData.value.dataMap, () => {
   immediate: true
 })
 
+let scale = ref(1)
+const handleWheel = (event: any) => {
+  // 阻止默认行为（例如页面滚动）
+  event.preventDefault();
+  if(!option.value.canScroll) return
+  // 检查滚动方向
+  if (event.deltaY < 0) {
+    scale.value = Math.min(3, scale.value + 0.1)
+  }
+  else {
+    scale.value = Math.max(0.1, scale.value - 0.1)
+  }
+}
+
+// 查找父元素，确保父元素的类名为 .go-preview-scale
+function findParentWithClass(element: any, className: string) {
+  // 当前元素的父元素
+  let parent = element.parentElement;
+  // 遍历父元素链，直到找到匹配的类名或到达文档根元素
+  while (parent && !parent.classList.contains(className)) {
+    parent = parent.parentElement;
+  }
+  // 返回找到的父元素，或者 null 如果没有匹配的父元素
+  return parent;
+}
+
+const getScaleXY = (v: string) => {
+  // 定义正则表达式来匹配 scale 函数中的两个数字
+  const regex = /scale\((\d*\.?\d+),\s*(\d*\.?\d+)\)/;
+
+  // 使用正则表达式匹配并提取数字
+  const matches = v.match(regex);
+
+  if (matches) {
+    const scaleX = parseFloat(matches[1]);
+    const scaleY = parseFloat(matches[2]);
+    return [scaleX, scaleY]
+  } else {
+    return [1, 1]
+  }
+}
+
+let offsetX:number, offsetY:number
+let left:number, top:number
+let isDragging = ref(false)
+const box = ref()
+const handleMousedown = (event: any) => {
+  if(box.value) {
+    let el = box.value
+    isDragging.value = true;
+
+    offsetX = event.clientX
+    offsetY = event.clientY
+    left = el.style.left.replace('px', '') * 1 || 0
+    top = el.style.top.replace('px', '') * 1 || 0
+
+    // 添加鼠标移动和松开事件监听器
+    document.addEventListener('mousemove', handleMousemove)
+    document.addEventListener('mouseup', handleMouseup)
+  }
+}
+
+// 当鼠标移动时触发
+const handleMousemove = (event: any) => {
+  if(!option.value.canDrag) return
+  if (!isDragging.value) return;
+  if(box.value){
+    let parent = findParentWithClass(box.value, 'go-preview-scale')
+    let [scaleX, scaleY] = getScaleXY(parent.style.transform)
+    let el = box.value
+
+
+    // 计算元素的新位置
+    const x = left + (event.clientX - offsetX) / scaleX
+    const y = top + (event.clientY - offsetY) / scaleY
+    // 更新元素的位置
+    el.style.left = `${x}px`;
+    el.style.top = `${y}px`;
+  }
+}
+
+// 当鼠标松开时触发
+const handleMouseup = (event: any) => {
+  if(!option.value.canDrag) return
+  isDragging.value = false;
+
+  // 移除鼠标移动和松开事件监听器
+  document.removeEventListener('mousemove', handleMousemove);
+  document.removeEventListener('mouseup', handleMouseup);
+}
+
+onMounted(() => {
+  nextTick(() => {
+    if(vChartRef.value) {
+      vChartRef.value.$el.addEventListener('wheel', handleWheel, { passive: false })
+    }
+    if(box.value) {
+      box.value.addEventListener('mousedown', handleMousedown)
+    }
+  })
+})
+
+onUnmounted(() => {
+  vChartRef?.value?.$el?.removeEventListener('wheel', handleWheel, { passive: false })
+  box?.value?.removeEventListener('mousedown', handleMousedown)
+})
+
 // //监听 dataset 数据发生变化
 // watch(
 //   () => props.chartConfig.option.dataset,