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

项目场景:

大屏项目显示云南省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.rhkb.cn/news/17768.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

php编写年历流程图,使用PHP怎么编写一个万年历功能

使用PHP怎么编写一个万年历功能 发布时间:2020-12-25 14:27:13 来源:亿速云 阅读:94 作者:Leah 这篇文章将为大家详细讲解有关使用PHP怎么编写一个万年历功能,文章内容质量较高,因此小编分享给大家做个参考…

mysql审计audit插件_MySQL审计工具Audit插件使用

MySQL审计工具Audit插件使用一、介绍MySQL AUDIT MySQL AUDIT Plugin是一个 MySQL安全审计插件,由McAfee提供,设计强调安全性和审计能力。该插件可用作独立审计解决方案,或配置为数据传送给外部监测工具。支持版本为MySQL (5.1, 5.5, 5.6, 5.…

计算机小知识应用,电脑使用小知识

办公用品网平台正在火热招商中!!! 1.在我们使用软件时,大部分软件(如word,excel,PPT,等)会使用CTRL键加s键进行快捷保存。比如说,我们在写word文档时,写完一段&#xff0…

linux tree工具使用,Dutree–Linux上磁盘使用情况分析的免费开源命令行工具

Dutree是一款免费的开源,快速的命令列工具,用于分析磁碟使用情况。Dutree是Durep和Tree的组合。Durep用图表创建磁盘使用情况报告,这使我们能够确定哪些目录使用了最多的空间。尽管durep可以产生类似于du的文本输出,但其真正的功能…

直播预告 | 虹科Vuzix AR眼镜赋能汽车业“智慧眼”

就在今天20:00-21:00! 虹科行业AR解决方案直播课程《虹科AR汽车行业解决方案》,深刻透析汽车业诊断、维修、培训的“四大痛点”,介绍汽车行业AR创新解决方案、培训场景解决方案、数字化工作流解决方案、远程协助全场景解决方案! …

2023,智能硬件的AIGC“又一春”

​ 文|智能相对论 作者|佘凯文 消费电子产品风光不再,特别是自去年以来,电子消费市场经历了一整年的寒潮袭击,智能手机等产品达到10年消费谷底,PC出货量整体下降16%,不仅如此,包括平板、可穿戴设备也一改…

ChatGPT 速通手册——开始提问

开始提问 当我们完成注册后,页面自动会跳转到ChatGPT的主页面,在这里我们就可以开始进行对话了。 我们在页面下方的输入框中填写问题,然后回车或者点击小飞机,我们的问题和ChatGPT的答案就会在页面上方以一问一答的格式展现出来…

小牛情报APP最强攻略

下面博主就为您写一波小牛情报最强攻略。 首先,我们来介绍一下小牛情报,是国内专业的独立第三方区块链数据服务平台,一直致力于数据的深耕与数据价值的挖掘,从数据的采集、处理到数据的分析,再到数据的应用于咨询。它…

北京市小牛电动车选购指南

由于北京市对可上牌照的电动自行车的配置有要求:速度不能超过25km/s,必须带有脚踏板。本文写于2019年11 月,当前,小牛在北京可选的车型也就只有如下几种:U/U1、US、UM、U了,它们在《北京市电动自行车产品目…

小牛性能服务器图片,【N1S参数篇】性能与体验并肩,N1S参数配置介绍

​智能化时代已经来临,智能产品对于我们来说都已经不再陌生,硬件配置似乎永远是智能产品中恒古不变的主题。 和科技沾边的东西,似乎很难添加什么感性的包装。虽然如今我们看到不少强调梦想与情怀的产品层出不穷,但归根结底&#x…

MAC下查看JDK1.8中文文档CHM教程

下载JDK文档资源,本文结尾会提供资源链接。下载打开Mac,下载可以识别CHM的软件如CHM Reader,ReadCHM。 注意:升级Mac系统到10.15后我自己电脑的CHM Reader已经不能使用,应该是不兼容。重新找了其他的软件替代即可比如:…

大牛生小牛的问题

问题: 一只刚出生的小牛,4年后生一只小牛,以后每年生一只。现有一只刚出生的小牛,问20年后共有牛多少只? 思路: 这种子生孙,孙生子,子子孙孙的问题,循环里面还有循环的嵌…

小牛N1S改装60A大单体宁德时代

N1s是19年底动力版,目前行驶12000公里没有任何故障,也没做任何改装!由于电池26A续航55公里左右还是不能满足个人使用习惯,官方电池太贵,所以有了自己改装大单体的想法,目前采购电池等配件中,选择…

求母牛生小牛函数c语言,编程求解以下问题 若一头母小牛,从出生的第四个年头开始每年生一头小母牛,按此规律,第n年时有多少头母牛?(要求用两种方法)...

满意答案 zoav7 2015.10.15 采纳率&#xff1a;59% 等级&#xff1a;7 已帮助&#xff1a;962人 //第一种方法 int n 100; //假设n100 int[] Group new int[1]; //初设牛的数量 Group[0] 1; for (int i 1; i < n; i) {//循环经过的 时间/年 int count Group.Length;…

解决小牛电动自行车电池不能输出电压

前几天我买的小牛电动自行车的APP 后台不停的报告我的电池 “已接入”和已断开“”&#xff0c;如下所示 最开始以为是谁在偷电池&#xff0c;马上就去找小牛&#xff0c;此时按遥控器&#xff0c;车辆已无反应了&#xff0c;把电池的电源输出连接线拔掉&#xff0c;APP 最终停…

小牛问题

描述&#xff1a;农场有一头牛&#xff0c;每年生一头小牛。小牛四岁后会每年生一头小小牛。求20年后农场有多少头牛。 题目很短&#xff0c;但很有意思的题目&#xff0c;作为水平不是很高的我来说&#xff0c;我觉得起到了充分的锻炼。 思路&#xff1a; 第一年&#xff1a…

小牛马的编程

1 自我介绍 大家好我是来自甘肃兰州&#xff0c;大一的学生&#xff0c;要说我是怎么喜欢上编程的那就要从一部电影说起来了&#xff0c;《没有绝对安全的系统》我就感觉黑客都很厉害&#xff0c;随便就入侵别人的系统&#xff0c;各种攻击&#xff0c;然后我也看了一些关于黑…

递推算法3——顺推法之母牛生小牛问题

有一头母牛&#xff0c;每年年初生一头小母牛&#xff0c;每头小母牛从第3个年头起每年年初也可以生一头小母牛。求在第20年时有多少头母牛。 令x0_i&#xff0c;x1_i&#xff0c;x2_i&#xff0c;x3_i分别表示第i年后刚生下的母牛、满1岁的母牛、满2岁的母牛以及可生小母牛的…

递归算法10——复杂递归之大牛生小牛问题

一只刚出生的小牛&#xff0c;4年后生一只小牛&#xff0c;以后每年生一只&#xff0c;现有一只刚出生的小牛&#xff0c;问20年后共有多少只。 【分析】 问题可以分成两种情况处理&#xff1a;小于4年时&#xff0c;只有一只小牛&#xff1b;大于4年时&#xff0c;小牛长成大…

小牛485通讯原理_让你秒懂智能电表工作原理及抄表原理

一、智能电表的工作原理 1.智能电表主要是由电子元器件构成&#xff0c;其工作原理是先通过对用户供电电压和电流的实时采样&#xff0c;再采用专用的电能表集成电路&#xff0c;对采样电压和电流信号进行处理&#xff0c;并转换成与电能成正比的脉冲输出&#xff0c;最后通过单…