Html5 canvas OpenLayers 3：自v4.x以来，使用125%DPI的文本缩放画布

我用不同的OpenLayers版本创建了两个相同的小提琴：

及

目标是以高分辨率导出PNG。我没有包括文件的实际导出。如果有兴趣，可以解释

在更新版本之前（我认为在4.x版本之前）一切都很好

如果windows中的DPI设置为100%，则两个提琴都会执行相同的操作-但如果将DPI设置更改为125%，则后一个提琴不会更新某些文本！它变得非常小，并且位于错误的位置

该映射保持不变，直到我点击它（或者调用

map.updateSize（）

）。所以我想，我在

precompose

的末尾添加了

map.updateSize（）

——但无论我在哪里做，导出的图像都是错误的，因为

updateSize（）

似乎是异步的，并且发生在后期压缩之后

关于这个问题，我没有发现突破性的变化。我是忽略了什么还是一只虫子？有什么解决办法的建议吗？

多亏了我提出了以下解决方案。最有趣的部分是创建第二个

ol.Map

，它具有所需的

像素比率

：

saveToFile = function (fileName, opt_ChangeSize, opt_PixelRatio, opt_DelayRenderPromise) {
  var newMapComponent,
      originalSize = mapComponent.getSize();

  opt_ChangeSize = opt_ChangeSize || { width: originalSize[0], height: originalSize[1] };

  var div = $(document.createElement("div"));
  div.attr('id', 'DIV_SaveToFile_Renderer_' + (new Date()).getTime());
  div.css('position', 'absolute');
  div.css('top', '0');
  div.css('left', '0');
  div.css('visibility', 'hidden');
  div.css('width', opt_ChangeSize.width + 'px');
  div.css('height', opt_ChangeSize.height + 'px');
  $('body').append(div);

  newMapComponent = new ol.Map({
      target: div[0].id,
      layers: mapComponent.getLayers(),
      pixelRatio: opt_PixelRatio,
      view: mapComponent.getView()
  });

  // opt_DelayRenderPromise in this case returns when loading of some features has completed. It could also be postrender of map or whatever.
  $q.when(opt_DelayRenderPromise).then(function () {
      $timeout(function () {
          var data,
              canvas = div.find('canvas')[0];

          data = canvas.toDataURL('image/png');
          data = data.replace(/^data:image\/(png);base64,/, "");
          MyUtilities.SaveBlobFromBase64(data, fileName);

          div.remove();

          mapComponent.setSize(originalSize);
          mapComponent.renderSync();
      });
  });

  mapComponent.setSize([opt_ChangeSize.width, opt_ChangeSize.height]);
  mapComponent.renderSync();
};

我创造了一个问题：