html5-canvas - 使 Mapbox GL JS 画布以更高的 dpi 渲染，或缩放而不损失质量

Question

我有一个正在生产的 mapbox 项目，其中用户自定义的街道地图（位置、缩放和文本）最终将打印在尺寸相当小的表面上（3.5" x 2.25"，600dpi。请记住，缩放级别影响不同街道类型的可见性，我遇到的问题是：

由于 canvas 元素以 72dpi 呈现，这意味着为了获得地图如何打印的准确表示，我实际上必须使地图的 div 容器实际大小@ 72dpi (252px x 162px) 这当然很小而且远不如以 600dpi 打印时的地图详细程度

为了让人们在屏幕上以合理的尺寸与地图进行交互，廉价的解决方案当然是使用 css 变换放大画布：即#mapContainer {transform: scale(2.5)}. 然而，这导致了一个非常像素化的地图，因为与 svg 矢量图形（如下图的文本和图形叠加中所示）不同，浏览器在放大时不会重新渲染画布。

未缩放的画布

缩放画布

我花了很多时间寻找这个问题的解决方案，而且充其量看起来我可能不得不使用一种方法，将 mapbox 数据拉入像 nextzen 这样的平铺服务中，使用像 D3.js 这样的数据可视化库，但 id 像做最后的努力，看看是否有任何方法可以诱使浏览器在不更改地图边界或缩放的情况下以更高尺寸的 dpi 呈现此元素。

我怀疑这个问题的答案类似于这个堆栈溢出问题更高的DPI图形与HTML5画布但是当我尝试它时，我得到一个空值，var ctx = canvas.getContext('2d')因为mapbox画布是“webgl”而不是“2d”......看在此处进入为更高 dpi 调整画布大小的“webgl”方法：https ://www.khronos.org/webgl/wiki/HandlingHighDPI但我真的很难理解如何在调整大小后重新绘制画布。

标签： html5-canvasmapboxmapbox-gl-js