OpenLayers 3：地图模糊答案

【问题标题】：OpenLayers 3: Map is blurryOpenLayers 3：地图模糊
【发布时间】：2015-03-05 14:24:06
【问题描述】：

当我将地图（相同的 html、css、js）添加到不同的页面时，有时地图会变得模糊。不同的页面可能包含其他的 html、css 和 js。左侧的清晰图片位于添加了第三方 CSS 的页面内。右边是没有别人的html、css、js的。

我该如何解决这个问题？

我在检查他们的细节时注意到的一件事是第二个示例的画布尺寸要小得多。

编辑[已修复！]：

我在查看 ol.js 源代码时发现了问题。在控制台上，模糊图像具有 map.frameState_.pixelRatio = 0.89（默认为 window.devicePixelRatio），而清晰图像具有 map.frameState_.pixelRatio = 1。如果我在初始化地图时设置 pixelRatio = 1，它会修复问题：

var map = new ol.Map({pixelRatio: 1, ...});

事实证明，如果您的互联网浏览器被放大（例如，到 90%），window.devicePixelRatio 会发生变化，从而导致模糊。但是，当您缩放回 100% 时，地图仍会缩放，直到您刷新页面。

【问题讨论】：

你能不能也给我们看看地图代码 - 看起来你的地图在右边的地图中被调整了大小

标签： openlayers-3

【解决方案1】：

这是一个尚未修复的well known issue。
如果浏览器已被缩放，我建议detecting 并向用户发布警报，例如“嘿。如果您没有将浏览器缩放到 100%，地图会很糟糕”。
还有一点离题 - 如果您更改容器大小和模糊的地图，只需致电 map.updateSize() 修复它。

【讨论】：