解决cesium锯齿和页面模糊问题

4 阅读1分钟

解决cesium锯齿和页面模糊问题

cesium中有个属性viewer.resolutionScale,默认值是1.0。
JavaScript中有个属性window.devicePixelRatio,属性返回的是当前显示设备的物理像素分辨率与CSS像素分辨率的比率,即一个CSS像素和一个物理像素的大小比值

cesium中viewer.resolutionScale默认值是1.0,也就是说无论在哪个屏幕上,cesium都把当前显示器的物理像素分辨率与CSS像素分辨率的比率(window.devicePixelRatio)当成是1.0来渲染,而实际上的比率可能是1.0或者1.25或者2.0(比如mac电脑Retina屏),所以造成锯齿和模糊。

想解决这个问题,显而易见,使viewer.resolutionScale的值等于window.devicePixelRatio值就好了。

if(Cesium.FeatureDetection.supportsImageRenderingPixelated()){//判断是否支持图像渲染像素化处理
  viewer.resolutionScale = window.devicePixelRatio;
}

如果这个时候地图远处还会有一点点锯齿,model边缘也还会有一点点锯齿,不用担心,官方文档给出的有个抗锯齿的属性: viewer.scene.fxaa,最新文档应该是viewer.scene.postProcessStages.fxaa.enabled,默认是false,改成true就可以了,一点点锯齿都看不见了,哈哈哈,直接说拜拜。

//是否开启抗锯齿
viewer.scene.fxaa = true;
viewer.scene.postProcessStages.fxaa.enabled = true;

但是开启后会造成字体的模糊(不是很明显),不用担心,设置字体的时候,字号设置大一些,然后比例缩小一倍,能够有效解决字体模糊。

label = {
  text: '测试',
  font: '24px Helvetica',
  scale: 0.5,
}

这样子基本就完美了~