【openlayers】解决浏览器缩放后色斑图在移动地图时发生偏移的问题

一、问题描述

最近在进行项目开发时，收到客户反馈，在使用openlayers框架的地图上绘制的色斑图在客户移动、缩放地图时发生了偏移，如下图：
缩放前：

缩放后：

从缩放前后的图片对比，可以看出来色斑图发生了明显的偏移，这肯定是一个需要进行修复的BUG，但是这个时候奇怪的事情发生了，在我开发所使用的电脑上，这个问题完全无法复现，无论是开发环境还是生产环境，只要是在我的电脑上打开的网页，都无法复现这个问题，而在客户的电脑和我另一个后端同事的电脑上反而都可以稳定复现这个BUG。做过开发的朋友应该能理解这件事情迷惑或是恐怖程度，当然注意到标题的读者肯定已经知道作者经过满头大汗排查出来的结果：浏览器缩放。没错，就是浏览器设置里面的这个缩放设置：

作者这里由于是前端开发，所以这个数值是设置为100%来看标准的开发效果，但是客户以及同事的电脑是设置为80%/90%的，在非100%的缩放情况下，色斑图在地图移动时就会发生位置偏移。

二、解决方法

一开始作者想到既然问题出在色斑图，而撒点或是其他图层都没有出现问题，那就从绘制色斑图的代码下手，那么刚好openlayers的ImageCanvasSource的传参options中有一个ratio的配置：

Ratio. 1 means canvases are the size of the map viewport, 2 means twice the width and height of the map viewport, and so on. Must be 1 or higher.

正好这个值与视口有关，既然你浏览器通过缩放将我的视口缩小了一定倍数，那我在这里再相对于视口放大回来那不就可以了？可惜，现实很骨感，在作者通过windo