露天层3:自v4.x以来，带有125％DPI的文本缩放画布

Question

我已经创建了两个相同的带有不同openlayers的小提琴：

openlayers v3.18.0和openlayers 4.1.1

目的是在高分辨率中导出PNG。我没有包括文件的实际导出。如果有兴趣，请在这里解释。

这一切都很好地到了较新的版本(我认为直到4.x版本(。

如果您在100％的Windows中设置了DPI设置，则两个提琴都可以做到这一点 - 但是如果将DPI设置更改为125％，则后一个小提琴不会更新文本一些文本！它变得很小，位于错误的地方。

地图一直保持下去，直到我单击它(或者我致电map.updateSize()(。所以我想，我在 precompose末尾添加了 map.updateSize()-但是无论我在哪里做，导出的映像都是错误的，因为 updateSize()似乎是异步的，并且在 postcompose之后发生。

。

我没有发现这个问题的破坏变化。我是在忽略某些东西还是一个错误？对解决方法有任何建议吗？

Answer 1

多亏了我在github上打开的问题，我提出了以下解决方案。最有趣的部分是创建具有所需pixelRatio的第二个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();
};