echars地图 另类版拖拽与放大缩小

1：首先echars地图是有自己的拖拽功能的也就是option内的geo中的roam属性

 roam: true,

但是此处不能使用该功能，为什么呢？

因为在上一篇文章内写了echars地图的点击下钻 返回上一级（主要是因为地图为了做伪3D，将2张echars地图叠到一块了，导致使用自带的功能，会拖拽一个，而底层的会留在原地）

基于这种情况，我们写一个拖拽整体的功能，也就是拖拽echars地图外层的div，从而达到拖拽整体的效果

那么基于这种情况我们开始我们的代码：

<div   style="height: 100%; width: 100%;"  @wheel="handleWheel"   class="draggable-container"   @mousedown.capture="startDrag"
@mousemove.capture="doDrag"
@mouseup.capture="endDrag"  :style="{ transform: `scale(${scale})` }">
<div  

:style="{ top: dragTop + 'px', left: dragLeft + 'px' }"
class="draggable-item"
  ref="mapChartRef" style="height: 100%; width: 100%;"></div>

</div>

首先我们是写了一个echars地图（mapChartRef）让他的style根据你手势能移动 给到了top和left属性，在外层有一个div主要是为了包裹它同时给到的style属性中的transform是为了缩放它

缩放比较简单，我们先讲缩放，wheel是监听鼠标滚轮的

 handleWheel(event) {
    // 判断滚轮方向
    const delta = event.wheelDelta ? event.wheelDelta : -event.deltaY;
    console.log(delta)
    if (delta < 0) {
      // 向上滚动（向着放大）
      scale.value *= 1.05; // 增加5%
    } else {
      // 向下滚动（向着缩小）
      scale.value /= 1.05; // 减少5%
    }
  }

套入代码，即可实现 我们的缩放功能，内有注释 可以根据需要 自行更改

接下来是拖动

function doDrag(event) {

  if (dragging.value) {

    const deltaX = event.clientX - startX.value;
    const deltaY = event.clientY - startY.value;
    dragTop.value += deltaY / scale.value;
    dragLeft.value += deltaX / scale.value;
    startX.value = event.clientX;
    startY.value = event.clientY;
    if(dragTop.value!==0){
      setDragg.value='3'
    }

  }
}
 

const startDrag=(event)=>{
  dragging.value = true;

  startX.value = event.clientX;
  startY.value = event.clientY;
}
 
function endDrag() {

    if(setDragg.value=='3'){
      setDragg.value='4'
    }else{
      setDragg.value='1'
    }
    console.log(setDragg.value,'endDrag')
    dragging.value=false
}

拖动的所有代码在此，

此处要注意，因为是接上篇文章中的下钻功能，会出现一个bug也就是拖拽是一个点击前 点击中 点击后的过程，那么click是会被这个过程所影响的，所以我们此处加入了一个setDragg 当点击了以后 dragging.value会产生值那么  如果触发点击中（dodrag）会将这个值改为3（也就是拖拽否则就是点击  让其进入点击事件）