原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Resolution%20Scaling.html&label=All

启用浏览器建议的分辨率后，Cesium 使用 CSS 像素分辨率（通常为 96 DPI），忽略设备像素比率（window.devicePixelRatio）。Cesium 使用设备的原生分辨率（考虑 devicePixelRatio，如 Retina 屏幕的 2x 或更高）。

分辨率缩放(Resolution scale)会对 WebGL 画布应用额外的缩放因子。例如，如果 Cesium 容器 div 为 500x500 像素，window.devicePixelRatio 为 2.0，useBrowserRecommendedResolution 为 false，则 WebGL 画布将为 1000x1000 像素。如果 resolutionScale 为 0.25，则画布将缩小为 250x250 像素。

用途：通过调整分辨率，平衡渲染质量和性能（低分辨率减少计算开销，适合低端设备）。

效果如下图所示：

示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style>
  @import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay">
  <h1>加载中...</h1>
</div>
<div id="toolbar">
  <table>
    <tbody>
      <tr>
        <td>使用浏览器推荐的分辨率</td>
        <td>
          <input type="checkbox" data-bind="checked: useBrowserRecommendedResolution">
        </td>
      </tr>
      <tr>
        <td>Resolution Scale</td>
        <td>
          <input type="range" min="0.1" max="2.0" step="0.1" data-bind="value: resolutionScale, valueUpdate: 'input'">
          <input type="text" size="5" data-bind="value: resolutionScale">
        </td>
      </tr>
    </tbody>
  </table>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  homeButton: false,
  sceneModePicker: false,
  navigationHelpButton: false,
  navigationInstructionsInitiallyVisible: false,
  animation: false,
  timeline: false,
  fullscreenButton: false,
  skyBox: false,
  shouldAnimate: true,
  baseLayerPicker: false,
});
viewer.cesiumWidget.creditContainer.style.display = "none";

const viewModel = {
  useBrowserRecommendedResolution: false,//最开始使用设备原生分辨率，此时会考虑 devicePixelRatio
  resolutionScale: 0.25,//初始分辨率缩放因子为 0.25,低分辨率渲染，优化性能
};

Cesium.knockout.track(viewModel);
const toolbar = document.getElementById("toolbar");
Cesium.knockout.applyBindings(viewModel, toolbar);
for (const name in viewModel) {
  if (viewModel.hasOwnProperty(name)) {
    Cesium.knockout.getObservable(viewModel, name).subscribe(update);
  }
}

function update() {
  viewer.useBrowserRecommendedResolution =
    viewModel.useBrowserRecommendedResolution;

  let resolutionScale = Number(viewModel.resolutionScale);
  // !isNaN：表示如果转换结果不是数字，则使用默认值1.0
  resolutionScale = !isNaN(resolutionScale) ? resolutionScale : 1.0;
  // 限制 resolutionScale 在 0.1 到 2.0 之间，避免极端值（如过低导致模糊，或过高导致性能问题）
  resolutionScale = Cesium.Math.clamp(resolutionScale, 0.1, 2.0);
  viewer.resolutionScale = resolutionScale;
}
update();