当我将 map (相同的html,css,js)添加到其他页面时,有时 map 模糊。不同的页面中可能包含其他html,css和js。左侧的清晰图片位于页面中,其中包含来自第三方的CSS。右边的没有其他人的html,css和js。

如何解决此问题?

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


编辑[固定!]:

我在ol.js源代码中发现了问题。在控制台上,模糊图像的map.frameState_.pixelRatio = 0.89(默认为window.devicePixelRatio),而清晰图像的map.frameState_.pixelRatio =1。如果在初始化 map 时将pixelRatio设置为1,它将修复问题:

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

事实证明,如果您的Internet浏览器放大了(例如,放大到90%),则window.devicePixelRatio将更改,这将导致模糊。但是,当您缩放回100%时, map 仍然会缩放,直到刷新页面为止。

最佳答案

这是一个尚未修复的well known issue
如果浏览器已经缩放,我建议detecting并向用户发布警报,例如-“嘿。如果您没有将浏览器缩放到100%, map 将很烂”。
还有一点点题外话-如果更改容器大小,并且如果 map 模糊,则只需调用map.updateSize()对其进行修复。

关于openlayers-3 - OpenLayers 3 : Map is blurry,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28880093/

10-11 12:22
查看更多