echart 多个geo如何实现缩放移动同步?
题目描述
我在echart里用到了两个地图,一个省级和一个市级,省级地图可认为是背景地图,在市级地图上打点,当鼠标悬浮在地图上方进行缩放移动时,如何保证两个地图的同步?
题目来源及自己的思路
单独用市级地图感觉太单调,就把省级地图进行放大作为市级地图的背景,现在问题是怎么实现两个地图的同步缩放。
思路:
1.roam设置为false,了解echart内部地图缩放的函数,自定义鼠标滚动及移动方法,事件中同时调用多个地图的缩放移动方法
2.当任意地图缩放时,触发georoam事件,在事件内部分发给其他地图
3.地图的缩放针对的是鼠标悬浮着的地图,鼠标悬浮时,通过某种方式使echart选中多个地图
相关代码
// 请把代码文本粘贴到下方(请勿用图片代替代码)
let Option = {
geo: [
{
name: "hubei",
map: "hubei",
center: [114.2, 30.5],
layoutCenter: ["50%", "60%"],
layoutSize: "420%",
selectedMode: "single",
roam: true,
label: {
normal: {
show: true,
textStyle: {
color: "#2da1e2"
}
}
},
itemStyle: {
normal: {
borderColor: "#3fdaff",
color: "#032338"
}
},
silent: true
},
{
name: "wuhan",
map: "wuhan",
center: [114.2, 30.5],
layoutCenter: ["49.6%", "60.4%"],
layoutSize: "100%",
selectedMode: "single",
roam: true,
label: {
normal: {
show: false,
textStyle: {
color: "white"
}
}
},
itemStyle: {
normal: {
borderColor: "#3fdaff",
color: "#006497"
}
},
silent: true
}]
}
你期待的结果是什么?实际看到的错误信息又是什么?
希望在市级地图缩放移动时,省级地图同步缩放移动,实际上它们是分别移动的
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
请问题主后来解决这个问题了嘛,我最近也遇到这个问题了