OpenLayers 3：地图模糊

Question

有时候，当我将我的地图（相同的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, ...});

原来，如果你的浏览器缩放比例不是100%（例如缩小到90%），window.devicePixelRatio就会改变，从而导致地图模糊。但是，当你重新将浏览器缩放比例调整回100%时，地图仍然保持缩放状态，直到你刷新页面。

- Alan

---

你能否也展示一下地图代码？看起来你的地图在右侧那个被重新调整了大小。 - Ian Turton

Answer 1

这是一个众所周知的问题，目前还没有解决。
我建议检测浏览器是否已经缩放，并向用户发出警告，例如 - “嘿，如果您的浏览器缩放不到100％，地图将会很糟糕”。
另外，如果更改容器大小后地图变得模糊，只需调用map.updateSize()即可解决。

- Mike B