echarts-gL和MaptalksMaptalks(1.0.
2022-06-25 本文已影响0人
polong
研究背景
最近看看echarts-gl发现有些效果挺好的,就是使用Echarts5和最近版Maptalks(1.0.0-rc.6)有些问题,地图居然不能进行缩放。
问题原因
研究一番,发现Maptalks(0.38.0)版本是可以,于是一个个版本来试,发现在(Maptalks0.47.5)更新之后就出现问题了,发现是滚轮事件监听修改了,当时为了修复火狐的滚轮事件异常(老的鼠标事件标准已经废弃)。
67906e4a6aa3459eb34ed96ab8ed6e2f_tplv-k3u1fbpfcp-watermark.pngceb0e52b8f7a4fe09d83b66e2bab9247_tplv-k3u1fbpfcp-watermark.png
9a967e28c4c9410a80554f0cd9d28155_tplv-k3u1fbpfcp-watermark.png
https://github.com/maptalks/maptalks.js/commit/f2ee04a8e87e07d1fed338bb53df9f1f7f915ee9
修复问题
修改以下代码发现恢复正常,但是在火狐上使用后又发现新问题,滚轮事件一触发那就会报illegal constror。
后来经过和广大-拖延症晚期的讨论发现,只要事件中加入'wheel'并且在滚轮事件使用WheelEvent就能搞定。
//增加鼠标事件
var EVENTS = ['mousedown', 'mouseup', 'click', 'dblclick', 'mousemove',
'mousewheel', 'DOMMouseScroll','wheel',
'touchstart', 'touchend', 'touchmove', 'touchcancel'
];
//创建鼠标事件
let newE=new WheelEvent(eName, obj);
echarts-gl 中maptalks案例图
18ddb9d3ad34417f913c7d029ecb671b_tplv-k3u1fbpfcp-watermark.png 4ae565881a184c7bbd50af1ee9b4bd33_tplv-k3u1fbpfcp-watermark.png参考资料:
https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/WheelEvent
https://github.com/maptalks/maptalks.js
https://github.com/ecomfe/echarts-gl