高分辨率下cesium场景模糊的问题解决

原创

已于 2023-03-31 11:03:21 修改 · 2.6k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #javascript

于 2023-03-31 10:56:33 首次发布

在使用cesium开发大屏三维场景时，若页面比例为11520x3420并在25%缩放下调试，会遇到页面刷新后模糊的状况。这可能与window.devicePixelRatio（设备像素比）有关。通过设置cesiumviewer的useBrowserRecommendedResolution为true，可强制浏览器以建议分辨率渲染，忽略缩放比例，从而解决模糊问题。

问题背景

使用cesium开发大屏的三位场景，大屏整个页面未11520x3420的比例，在开发模式下是将浏览器缩放到25%来进行效果的调试，但是发现在普通pc上面在浏览器缩放25%下直接刷新页面，会出现整个场景模糊的问题，但是如果先让浏览器在100%刷新完页面，再将页面缩小到25%，看着就正常一些。

出现模糊的情况：浏览器缩放25%下直接刷新页面

先让浏览器在100%刷新完页面，再将页面缩小到25%，看着正常：
正常显示

问题解决

经过往上查找，应该是涉及到window.devicePixelRatio(设备像素比)相关的问题，再去找cesium的官方API，发现提供了一个viewer的参数useBrowserRecommendedResolution可以强行让浏览器以其建议的分辨率进行渲染，并忽略 window.devicePixelRatio（浏览器缩放比例）。
在这里插入图片描述

// 解决浏览器缩放后场景变形模糊的问题 useBrowserRecommendedResolution如果为true，
// 则以浏览器建议的分辨率进行渲染，并忽略 window.d

最低0.47元/天解锁文章