前端js： 地图拖拽echarts地图多geo 实现缩放拖拽同步-对父级元素监听事件

前端js 地图拖拽echarts地图多geo 实现缩放拖拽同步-对父级元素监听事件

 前言：在使用 ECharts 进行地图的拖拽和缩放功能时，可以通过设置geo/ series 下的 roam 属性实现。roam 属性允许你控制地图的漫游（拖拽和缩放）行为。如果你想在一个 ECharts 实例中启用多个地图的拖拽和缩放功能，你可以为每个地图单独设置 roam 属性。

 如果直接设置属性  roam: true ， 每个地图层相互独立， 不能同步拖拽缩放

 geo: [

            {

                roam: true, // 开启地图拖拽和缩放功能 //'move'表示只开启拖拽功能，'scale'表示只开启缩放功能，

                map: 'topMap_', 

                zIndex: 1,  

                itemStyle: {

                    borderColor: 'rgba(255,255,255,0.51)', 

                },

                emphasis: {

                    disabled: true

                }

            },

            {

                roam: true, // 开启地图拖拽和缩放功能 //'move'表示只开启拖拽功能，'scale'表示只开启缩放功能，

                map: 'topMap_',

                zIndex:2,  

         },

]

 

 

 

 

 

 

 

 

地图（echarts地图多个 GEO） - 功能：拖拽地图整体的功能，拖拽 echarts 地图外层的 div，从而达到拖拽整体的效果

• vue2： html 代码

  <div class="echartBox"  @wheel="handleWheel"  :style="{ transform: `scale(${DragDatas.scale || 1})`,  }"  >

    <Echart ref="chart" :options="options"      ></Echart>

</div>

• vue2：js 代码

  data() {
    return {
       DragDatas: {
        scale:1,
        dragging:  false,
        setDragg: 1,
        startX:  0,
        startY:  0,
        dragTop:  0,
        dragLeft:   0,
      }
    };
  },
 methods: {
 startDrag: debounce(function (event) {
    this.DragDatas.dragging = true;
    this.DragDatas. setDragg='2'
    this.DragDatas. startX = event.clientX;
    this.DragDatas.  startY = event.clientY;
  }),
   doDrag(event) {
      if (this.DragDatas.   dragging) {
        const deltaX = event.clientX - this.DragDatas. startX;
        const deltaY = event.clientY - this.DragDatas. startY;
        this.DragDatas. dragTop += deltaY /this.DragDatas.scale;
        this.DragDatas. dragLeft += deltaX /this.DragDatas. scale;
        this.DragDatas. startX = event.clientX;
        this.DragDatas. startY = event.clientY;
        if(this.DragDatas.dragTop!==0){
          this.DragDatas. setDragg='3'
        }
      }
  },
 endDrag() {
   if(this.DragDatas. setDragg=='3'){
    this.DragDatas.  setDragg='4'
   }else{
    this.DragDatas.setDragg='1'
   }
   console.log( this.DragDatas. setDragg,'endDrag')
   this.DragDatas. dragging=false
},
  },

地图（echarts地图多个 GEO） - 功能：缩放地图,缩放 echarts 地图外层的 div,监听@wheel 事件

• vue2： html 代码

  <div class="echartBox"  @wheel="handleWheel"   >
    <Echart ref="chart" :options="options"      ></Echart>
</div>

• vue2：js 代码

  data() {
    return {
      DragDatas: {
        scale:1
      }
    };
  },
 methods: {
  handleWheel: debounce(function (event) {
     // 判断滚轮方向
     const delta = event.wheelDelta ? event.wheelDelta : -event.deltaY;
    console.log(delta)
    if (delta  >  0) {
      // 向上滚动（向着放大）
      this.DragDatas.  scale *= 1.05; // 增加5%
    } else {
      // 向下滚动（向着缩小）
      this.DragDatas. scale /= 1.05; // 减少5%
    }
  }),
  }

 

 

参考文章： 

最后一只小白

https://blog.csdn.net/weixin_48091030/article/details/140922822

歌贼王

https://blog.csdn.net/songth1ef/article/details/144058620