Question

我创建了两个具有不同OpenLayers-Versions的相同小提琴：

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

这一切都很好，直到新版本（我认为直到4.x版本）。

如果您的窗口中的DPI设置为100％，则两个小提琴都会相同 - 但如果您将DPI设置更改为125％，则后者不会更新文本某些文本！它变得非常小，位于错误的地方。

地图保持这样，直到我点击它（或我拨打map.updateSize()）。所以我想，我在map.updateSize()的末尾添加precompose - 但无论我在哪里，导出的图片都是错误的，因为updateSize()似乎是异步并且正在发生之后后期撰写。

我没有发现有关此问题的重大变化。我忽略了什么或者它是一个错误？有关解决方法的任何建议吗？

Answer 1

感谢issue I opened on github我想出了以下解决方案。最有趣的部分是创建具有所需ol.Map的第二个pixelRatio：

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();
};

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

1 个答案: