echart的地图设置roam后,geo和series,拖拽和放缩会造成不同步(移动端设备)

因为地图阴影是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)
  })
}

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容