美文网首页
echart的地图设置roam后,geo和series,拖拽和放

echart的地图设置roam后,geo和series,拖拽和放

作者: cooqi | 来源:发表于2024-03-06 15:44 被阅读0次

    因为地图阴影是geo,地图色块区域是series,拖拽和放缩会造成不同步,要设置到同步

      //因为地图阴影是geo,地图色块区域是series,拖拽和放缩会造成不同步,要设置到同步
      let lastZoom = 1 // 初始缩放比例
      let lastCenter = [0, 0] // 初始中心点
      myChart.value.on('georoam', (params: any) => {
        let myOption: any = myChart.value!.getOption()
        if (params.zoom != null) {
          //捕捉到缩放时
          myOption.geo.zoom = lastZoom = params.zoom
          myOption.geo.center = lastCenter = params.origin
        } else if (params.action === 'drag') {
          //捕捉到拖曳时
          let newCenter = [
            lastCenter[0] - params.dx / 2 / lastZoom, // 根据拖拽位移和缩放比例计算新的中心点
            lastCenter[1] + params.dy / 2 / lastZoom
          ]
          myOption.geo.center = newCenter
        }
        myChart.value!.setOption(myOption)
      })
    }
    
    

    相关文章

      网友评论

          本文标题:echart的地图设置roam后,geo和series,拖拽和放

          本文链接:https://www.haomeiwen.com/subject/fkvjzdtx.html