BUG - heatmap zoom and drag is very slow #2455

<!-- Thank you for reporting an issue. 1. It's RECOMMENDED to submit PR for typo or tiny bug fix. 2. If this's a FEATURE request, please provide: details, pseudo codes if necessary. 3. If this's a BUG, please provide: course repetition, error log and configuration. Fill in as much of the template below as you're able. 4. It will be nice to use to provide a CodePen Link which can reproduce the issue, we provide a CodePen template g2-github-issue. 感谢您向我们反馈问题。 1. 提交问题前，请先阅读 https://antv.alipay.com/zh-cn/g2/3.x/index.html 上的文档。 2. 我们推荐如果是小问题（错别字修改，小的 bug fix）直接提交 PR。 3. 如果是一个新需求，请提供：详细需求描述，最好是有伪代码实现。 4. 如果是一个 BUG，请提供：复现步骤，错误日志以及相关配置，并尽量填写下面的模板中的条目。 5. 如果可以，请提供尽可能精简的 CodePen 链接，可使用 CodePen 模板 https://codepen.io/leungwensen/pen/WXJgox，方便我们排查问题。 6. 扩展阅读：如何向开源项目提交无法解答的问题 -->

• G2 Version: 4.0.7
• Platform: MacOS Chrome
• Mini Showcase(like screenshots):

• CodePen Link:

  import { Chart } from '@antv/g2';
  

fetch('https://g2.antv.vision/en/examples/data/heatmap.json') .then(res => res.json()) .then(data => { const chart = new Chart({ container: 'container', autoFit: true, height: 500, padding: [0, 30, 60, 30] }); chart.data(data); chart.scale({ tmp: { nice: true } }); chart.tooltip({ showTitle: false }); chart.axis(false); chart.legend({ offset: 10 }); chart.heatmap() .position('g*l') .color('tmp', '#F51D27-#FA541C-#FF8C12-#FFC838-#FAFFA8-#80FF73-#12CCCC-#1890FF-#6E32C2'); chart.annotation().image({ start: ['min', 'max'], end: ['max', 'min'], src: 'https://gw.alipayobjects.com/zos/rmsportal/NeUTMwKtPcPxIFNTWZOZ.png', }); chart.render(); });

```

When you add the code chart.interaction('view-zoom'); to a heat map, the zoom and drag become very very slow. This doesn't happen with other charts such as the line chart or bar chart.

@simaQ How can I fix this?