问题背景
使用cesium开发大屏的三位场景,大屏整个页面未11520x3420的比例,在开发模式下是将浏览器缩放到25%来进行效果的调试,但是发现在普通pc上面在浏览器缩放25%下直接刷新页面,会出现整个场景模糊的问题,但是如果先让浏览器在100%刷新完页面,再将页面缩小到25%,看着就正常一些。
出现模糊的情况:浏览器缩放25%下直接刷新页面
先让浏览器在100%刷新完页面,再将页面缩小到25%,看着正常:
问题解决
经过往上查找,应该是涉及到window.devicePixelRatio(设备像素比)相关的问题,再去找cesium的官方API,发现提供了一个viewer的参数useBrowserRecommendedResolution可以强行让浏览器以其建议的分辨率进行渲染,并忽略 window.devicePixelRatio(浏览器缩放比例)。
// 解决浏览器缩放后场景变形模糊的问题 useBrowserRecommendedResolution如果为true,
// 则以浏览器建议的分辨率进行渲染,并忽略 window.devicePixelRatio(浏览器缩放比例)
viewer.useBrowserRecommendedResolution = true;
参考文章:
cesium 在浏览器分辨率的问题
Window.devicePixelRatio(设备像素比)
cesium API文档