Echarts 地图开启缩放及拖动后中心点偏移的解决办法

已于 2024-01-24 15:36:03 修改
阅读量6.2k 收藏 10
点赞数 23
文章标签： echarts
于 2021-11-09 14:09:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42643612/article/details/121226757
版权 
// 切换地图的时候将 center 属性设置为 undefined

option.geo.center = undefined

ʎʍ
关注
  • 23
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
Android 多点触控，多张图片拖拽，缩放，旋转
05-27
在实际开发中，开发者还需要考虑边界条件，如防止图片缩放超出边界，以及保持图片的中心点不变等。此外，为了提供良好的用户体验，还需处理滑动手势等交互细节。 综上所述，Android平台提供了丰富的API来支持多点...
Android多点触控技术实战，对图片进行缩放和移动Demo
05-12
在处理ACTION_MOVE事件时，为了保持图片的中心点不变，我们需要计算当前触摸点相对于图片中心点的位置偏移，然后在缩放和平移时，将这个偏移量考虑进去。 此外，为了防止图片过度缩放，我们还需要设置最小和最大...
解决echarts散点值过多，跟随地图缩放位置不准的问题
hsany330的专栏
09-17 3515
//监听地图滚动缩放事件 myChart.on("geoRoam",function(params){ var option = myChart.getOption();//获得option对象 // if(params.zoom!=null&&params.zoom!=undefined){ //捕捉到缩放时 // option.geo[1].zoom=option.geo[0].zoom;//下层geo的缩放等级跟着上层的geo一起改变 .
Echart 地图开启缩放之后，中心点位置偏移
小白白的博客
11-11 1077
Echart 地图开启缩放之后，中心点位置偏移。
【解决方法】Echarts开启roam缩放和平移发生偏移
最新发布
weixin_43919327的博客
05-14 423
在使用 ECharts 进行地图可视化时，开启缩放和拖动功能后，有时会出现中心点偏移的问题。这通常是由于 ECharts 在处理地图缩放和拖动时，对中心点的计算方式导致的。此外，还可以通过监听缩放和拖动事件，然后根据当前的缩放级别和拖动距离来手动调整中心点，以达到更好的视觉效果。仅是解决中心点偏移问题的一种方法，具体的解决方案还需要根据实际的数据和需求来调整。这样设置后，当进行地图的缩放和拖动操作时，ECharts 会根据当前的缩放级别和用户的拖动操作自动调整中心点，从而减少或避免中心点偏移的问题。
解决Echarts图标在浏览器缩放后位置偏移
ChuChuChuZzz的博客
08-11 4254
解决Echarts图标在浏览器缩放后位置偏移欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如
解决Echarts地图在下钻时缩放了地图，到了下级地图时，出现错位
文龙刚的博客
01-11 864
【代码】解决Echarts地图在下钻时缩放了地图，到了下级地图时，出现错位。
echarts geo根据缩放动态加载effectScatter以及居中问题解决方案
星宇大前端
12-15 2474
echarts 画中国地图出现effectScatter标注点，但是由于点太密集，坐标太多，客户想实现地图一样根据缩放显示不同数据。 背景环境 框架： UMI/React Hooks echarts版本：4.9.0 react-for-echarts   实现思路 events 监听时间georoam（拖动和缩放） <ReactEcharts option={option} ref={instance} onEvents.
echarts地图首次进入坐标偏移，鼠标点击或拖拽后恢复问题
qq_41539461的博客
03-16 1346
尝试设置：animation:false 即可解决 let option = { animation: false, bmap: {} }
Echarts数据可视化地理坐标系geo，开发全解+完美注释
热门推荐
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
08-06 3万+
mytextStyle={ color:"#333",//文字颜色 fontStyle:"normal",//italic斜体 oblique倾斜 fontWeight:"normal", //文字粗细bold bolder lighter 100 | 200 | 300 | 400... fontFamily:"sans-serif", //字体系列
Echarts 地图基本使用
Hiroshi's
10-06 2985
1.基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>地图&.
九十一、前端可视化ECharts的使用
微信号：RunsenLiu
12-06 1343
学python的应该听过Pyecharts。那么就应该有ECharts
Android编程实现图片的浏览、缩放、拖动和自动居中效果
09-03
- `midPoint(mid, event)`函数计算两个触点的中间点，用于缩放中心点的计算。 6. **实现步骤**： - 初始化`Matrix`和`savedMatrix`，并设置`ImageView`的触摸监听。 - 在`onTouchEvent()`中处理不同类型的触摸...
图像以鼠标中心滚轮缩放-类模块
05-21
这个类模块的设计目标是提供一个可复用的组件，允许用户通过鼠标的滚轮操作来放大或缩小图像，且缩放的中心点位于鼠标当前位置。 首先，我们需要创建一个类（Class），在这个类中定义必要的属性和方法。关键的属性...
Echarts的地图实现拖拽缩放同步功能（解决多层geo缩放、拖动卡顿问题）
QC班长的博客
06-13 7575
大屏项目显示云南省3D的地图，可拖拽缩放、地图打点、点击图标弹框等等功能。
body缩放时echarts鼠标悬浮位置偏移
前端搬砖人的开发记录
12-20 470
body增加缩放时，echarts图表中的鼠标与实际位置不符。
Echarts 地图配置 拖动缩放/初始化缩放比例/不同地区显示不同颜色/地图和散点图结合
weixin_42448623的博客
10-10 6740
文章目录特点基本使用百度地图API矢量地图常用配置拖动缩放 roam名称显示初始化缩放比例设置地图中心点常见效果显示某个区域不同地区显示不同颜色地图和散点图结合 特点 基本使用 百度地图API 需要申请百度地图ak 矢量地图 资料 需要准备矢量地图数据 注册矢量地图数据 echarts.registerMap('map',data) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8
echarts 3d地图 实现多个geo层缩放拖拽同步且不卡顿
weixin_46408500的博客
12-12 4377
原理：监听捕获放大缩小动作，设置下层geo的zoom，center为顶层的zoom，center。 标记点大小是计算放大缩小倍数，重设值图标大小。 注意：最后所有层记得加上animationDurationUpdate:0, 不然或有同步延迟和卡顿
数据可视化-echarts地图
qq_49602467的博客
10-24 3984
准备中国的矢量地图json文件，放到json/map/的目录下。引入js文件，DOM容器，初始化对象，设置option。2.准备好散点数据，设置给新对象的data （坐标信息）3.将series下的数据和geo关联起来。2.城市的空气质量数据设置给series。使用Ajax获取china.json。1.给series下增加新的对象。4.让散点图使用地图坐标系统。地图中心点 center。3.配置新对象的type。5.让涟漪的效果增加明显。初始缩放比例 zoom。1.显示基本的中国地图。
echarts geo 地图 缩放时，散点经纬度位置偏移
06-06
在 `echarts` 的地图中，如果使用了 `geo` 组件进行地图展示，并且在地图上添加了散点图，当地图进行缩放时，散点图的位置可能会出现偏移。这是因为 `geo` 组件的缩放是通过控制 `zoom` 属性来实现的，而散点图的位置是通过经纬度来确定的，当缩放比例发生变化时，散点图的位置也需要进行相应的调整。可以通过以下的方式来解决这个问题： 1. 在 `geo` 组件中设置 `label` 属性，并将 `label` 的 `offset` 属性设为 `[-10, -10]`，这样可以让地图上的标签位置发生偏移，避免与散点图重叠。 ``` geo: { map: 'world', label: { show: true, position: 'right', formatter: '{b}', offset: [-10, -10] // 地图标签偏移 }, ... } ``` 2. 在散点图的 `data` 中，使用 `geo` 组件的 `pointToData` 方法将经纬度坐标转换为像素坐标，并将像素坐标保存在散点图的 `coord` 属性中。 ``` series: [{ type: 'scatter', coordinateSystem: 'geo', data: [ { name: '北京', value: geoCoordToPixel([116.46, 39.92]) // 将经纬度坐标转换为像素坐标 }, ... ] }] function geoCoordToPixel(coord) { return chart.getModel().getComponent('geo').coordinateSystem.dataToPoint(coord); } ``` 3. 在散点图的 `symbolOffset` 属性中，使用 `coord` 属性来设置散点的位置，这样散点图就可以根据地图缩放比例自动调整位置。 ``` series: [{ type: 'scatter', coordinateSystem: 'geo', data: [ { name: '北京', value: geoCoordToPixel([116.46, 39.92]), coord: [116.46, 39.92] // 经纬度坐标 }, ... ], symbolSize: 10, symbolOffset: [0, 0], // 不需要偏移 ... }] ``` 通过以上的设置，就可以实现在地图缩放时，散点图的位置自动跟随调整。需要注意的是，散点图的 `symbolOffset` 属性不需要再设置偏移量了，因为散点图的位置已经通过 `coord` 属性确定了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值