Echarts的地图实现拖拽缩放同步功能(解决多层geo缩放、拖动卡顿问题)

news2025/2/12 16:07:57

项目场景:

大屏项目显示云南省3D的地图,可拖拽缩放、地图打点、点击图标弹框等等功能


 

问题描述

多图层拖拽时会上下层会分离,延迟卡顿


原因分析:

1、拖拽时不同图层的中心坐标没有保持一致,

2、卡顿是数据更新动画时长过长。


解决方案:

1、监听捕捉图层的roam事件,使下层的图层和上层的图层中心坐标保持一致

2、添加减少延迟的属性animationDurationUpdate:0

核心代码部分:

animationDurationUpdate:0,//实现缩放、拖动同步且不卡顿
roam: true,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启

 

//捕捉geo roam事件,使下层的geo随着上层的geo一起实现缩放拖曳
    chartController.current.on('georoam',(params:any)=>{
      const option = chartController.current.getOption();//获得option对象
      if(params.zoom != null){ //捕捉到缩放时
        option.geo[0].zoom=option.series[0].zoom;//下层geo的缩放等级跟着上层的geo一起改变
        option.geo[0].center=option.series[0].center;//下层的geo的中心位置随着上层geo一起改变
      }else{//捕捉到拖曳时
        option.geo[0].center=option.series[0].center;//下层的geo的中心位置随着上层geo一起改变
      }
      chartController.current.setOption(option);//设置option
    })

 画框的这两块代码就是核心部分了。完整案例代码:详见https://download.csdn.net/download/qq_35624642/87905189

参考文献:

0、Documentation - Apache ECharts

1、Echarts多层geo实现缩放、拖动同步且不卡顿!!和不同窗口尺寸始终保持立体效果_echarts同步缩放怎么做_就深咖啡色的博客-CSDN博客

2、echarts 设置地图外边框以及多个geo实现缩放拖曳同步_echarts地图外轮廓描边_铃兰丶物语的博客-CSDN博客 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/645739.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

玩业余无线电时,突然听到有人呼救,该怎么办?

不管是在玩业余无线电还是在其他活动当中,突然遇到有人求救,都是一件非常重要的事情,因为救援行动的效率快慢和是否及时,都有可能影响到别人的生命安全。 下面是河南宝蓝小编给出的一些思考和建议,希望对大家会有一些帮…

软件测试-测试用例

目录 测试用例的四个要素 测试用例设计方法 基于需求进行测试用例的设计 等价类 边界值 判定表 正交表 通过allpirs画正交表 场景设计法 错误猜测法 面试题 如何模拟弱网 接口如何测试 zip命令测试 测试用例万能公式 水杯测试用例 微信发朋友圈 测试用例的四个…

Java实现的五子棋游戏 ~java.awtjava.swing

文章目录 Java实现的五子棋游戏1.实现效果2.实现源码2.1运行主函数main.java2.2 棋盘布局Chessboard.java3.Algorithm算法 点击下载链接:Java实现的五子棋游戏源码下载 Java实现的五子棋游戏 作业要求: (1)课题代号: …

老Mac电脑安装macOS Ventura实战

前提说明:此实战适用于老旧Mac电脑(2015年之前的,无法在系统设置中升级macOS Ventura系统的电脑)安装macOS Ventura系统! 软件:OpenCore-Patcher-GUI.app.zip 工具:16G U盘、或者移动硬盘&a…

Spring MVC拦截器Interceptor使用(判断用户登录)

文章目录 一 概念二 3步使用三 HandlerInterceptor接口四 代码实现 一 概念 Spring MVC中的拦截器(Interceptor)类似于Servlet中的过滤器(Filter),它主要用于拦截用户请求并作相应的处理。例如通过拦截器可以进行权限验…

superset链接本地数据库

打开图中 选择database 先解释SQLlite的格式 如下 SQLALCHEMY_DATABASE_URI mysql://username:password127.0.0.1:3306/gmall_report’ 请将 username 和 password 替换为实际的 MySQL 数据库的用户名和密码。 mysql则为如下

我有过密接的9个博士

我有过密接的9个博士 是我人生中留下的印迹和谈资 其中一个是中科大少年班的学神 趣讲大白话:多点谈资 【趣讲信息科技196期】 **************************** 我密接过的哪些博士们: 1、科大少年班刘雪峰博士。1998年,创智公司(当…

Banana Pi BPI-R3 Mini:2.5GbE 嵌入式路由器板,MTK7986方案

香蕉派 BPI-R3 Mini Banana Pi BPI-R3 Mini 是一款功能强大的 SBC 路由器板,专为需要高速网络功能的个人和企业而设计。这款路由器是广受欢迎的 Banana Pi R3 路由器板的小兄弟,配备了先进的功能,旨在提供可靠的性能,是需要可靠网…

元宇宙游戏:新瓶换新酒

当你打游戏时,你在打什么? 抛出这个问题,便也抛出了游戏背后的组成——设计、技术、应用。 在元宇宙产业链中最有感知度的,是场景和内容,作为现实世界的模拟与延伸,游戏和社交领域是最先具备实现基础的元…

存储基础知识及相关术语

存储基础知识 前置:存储基本概念 我们现在处于信息时代,每天都在和电脑、手、平板机打交道。我们的工作和生活,已经完全离不开视频、音乐、图片、文本、表格这样的数据文件。 而所有这些数据文件,都需要通过电子设备进行保存&…

Windows控制关机锁屏

原文链接 设置永不关机 新建一个vbs文件,内容如下: Set WshShell WScript.CreateObject("WScript.Shell") do WScript.sleep 60000 WshShell.SendKeys "{ScrollLock}" loop该程序的作用相当于每隔一分钟(60000毫秒&a…

了解MVC、MVP、MVVM模式

前言 在Android开发中,当你梳理完需求后,你要做的并不是马上写下你的第一行代码,而是需先设计好整个项目的技术框架今天,我将全面介绍Android开发中主流的技术框架MVC、MVP 与 MVVM模式,并实例讲解MVP模式&#xff0c…

Android启动优化实践

作者:95分技术 启动优化是Android优化老生常谈的问题了。众所周知,android的启动是指用户从点击 icon 到看到首帧可交互的流程。 而启动流程 粗略的可以分为以下几个阶段 fork创建出一个新的进程创建初始化Application类、创建四大组件等 走Applicatio…

uni-app配置Vant Weapp

uni-app配置vant-------浏览器运行环境下不兼容 1.创建uni-app项目2.创建wxcomponents目录3. 安装vant需要的模块包3.1找一个空文件cmd 进入执行3.1.1通过 npm 安装3.1.2通过 npm 安装 3.2.1获取dist文件 4.将dist内容复制到wxcomponents目录下5.1 使用vant5.1使用button按钮5.…

Qt扫盲-QKeyEvent 键盘事件

QKeyEvent 键盘事件 一、概述二、事件传播三、常用属性1. key()2. modifiers()3. isAutoRepeat()4. text() 四、简单组合键代码 一、概述 QKeyEvent 是Qt 里面描述键盘事件的一个属性类,所有的事件本质上来说其实就是一个信息包,而这个包里面就是有这个…

探索Redis内部数据结构

Redis支持多种数据结构,每种数据结构都有其特定的用途。下面对Redis支持的主要数据结构进行详细阐述: 一、字符串(String) 字符串是Redis最基本的数据结构,可以存储一个字符串或者二进制数据,例如图片、序…

Echarts—词云库(echarts-wordcloud)配置详解和使用(可自定义形状)

词云库的详解 前言安装基本配置详解具体使用步骤(Vue为例)自定义展示形状 前言 我们经常会看到一些网站或者页面有一堆五颜六色的词汇的聚在一块,有大有小的散落着,看着挺好看的; 也许项目中也会涉及到显示一些关键词…

【Linux脚本篇】Linux循环语句-while

目录 🍁while的语法格式 🍁while循环案例 🍃案例一:输出10-1的降序 🍃案例二:输出10的升序和降序 🍃案例三:批量创建用户 🍁内置跳出循环 🍃案例一&#xff1…

火山引擎 DataLeap:一个易用、高效的数据目录,是如何搭建的?

更多技术交流、求职机会,欢迎关注字节跳动数据平台微信公众号,回复【1】进入官方交流群 企业如何找到数据、了解数据以及使用数据? 这离不开数据目录的能力。数据目录有着类似于“字典”的作用,能够帮助数据生产者和使用者快速定位…

ESXI 环境搭建和配置

ESXI 环境搭建和配置 ESXI简介 ESXi专为运行虚拟机、最大限度降低配置要求和简化部署而设计。只需几分钟时间,客户便可完成从安装到运行虚拟机的全过程,特别是在下载并安装预配置虚拟设备的时候。 在VMware Virtual Appliance Marketplace 上有800多款…