【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.

正好这个值与视口有关，既然你浏览器通过缩放将我的视口缩小了一定倍数，那我在这里再相对于视口放大回来那不就可以了？可惜，现实很骨感，在作者通过window.devicePixelRatio获取到浏览器缩放倍数，并通过1/window.devicePixelRatio的比例放大色斑图后，偏移的现象依然会发生。

错误的代码：

      canvasOption.canvasFunction = function (extent, resolution, pixelRatio, size, projection) {
        const canvasTest = document.createElement('canvas');
        canvasTest.width = size[0];
        canvasTest.height = size[1];
        const ctx = canvasTest.getContext('2d');
        canvasLayerHelp.onDrawLayer(
          canvasTest,
          ctx,
          canvasTest.width,
          canvasTest.height,
          type,
          datatype,
          params
        );
        return canvasTest;
      };
      canvasOption.ratio = 1 / window.devicePixelRatio;
      const imageCanvas = new ImageCanvas(canvasOption);

在这个方法失败后，作者还是觉得找和缩放倍率相关的配置这个思路是正确的，于是又经过一通查文档以及和代码的对比下，作者回到了梦开始的地方：

没错，就是地图初始化，起初作者认为既然发生了这种缩放引起的偏移问题，那应该是某个关于缩放的设置写为了固定值，没有根据浏览器缩放的值进行改变，才会发生这种不对称的偏移，但是作者前文重点标注了一句话：在非100%的缩放情况下，色斑图在地图移动时就会发生位置偏移。
阅读文档，可以发现地图初始化的配置项里有一个pixelRatio的配置，而文档中特别标注出来这个值(defaults to window.devicePixelRatio)默认为window.devicePixelRatio，而结合前面的那句话，作者福至心灵的将该值设置为1，啪的一下，很快啊，问题解决了。

附上初始化代码：

    map = new Map({
      target: elementId,
      layers: [...baseLayers],
      pixelRatio: 1, //设置地图缩放值为100%
      controls: [],
      view: new View({
        projection: 'EPSG:3857',
        center,
        zoom
      })
    })