有时候,当我将我的地图(相同的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,则可以解决问题:
如何解决这个问题?
检查它们的详细信息时,我注意到一个问题,即第二个示例的画布尺寸要小得多。
编辑【已修复!】:
我在查看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%时,地图仍然保持缩放状态,直到你刷新页面。