Cesium抗锯齿处理

效果前：

效果后：

关键代码：

bash 复制代码

const GLOBAL_ANTIALIASING_MSAA_SAMPLES = 8

class CesiumUtils {
  constructor() {
    this.viewer = null
    // ...
  }

  initViewer(containerId, options = {}) {
    Cesium.Ion.defaultAccessToken = CURRENT_CONFIG.cesiumToken;
    const { globalAntialiasing, ...viewerOptions } = options

    const defaultOptions = {
      msaaSamples: 4,
      // ...
    }

    const finalOptions = {
      ...defaultOptions,
      ...viewerOptions,
      ...this.getGlobalAntialiasingViewerOptions(globalAntialiasing, viewerOptions.msaaSamples),
    }
    this.viewer = new Cesium.Viewer(containerId, finalOptions)
    
    this.setGlobalAntialiasing(globalAntialiasing)
    
    return this.viewer
  }

  getGlobalAntialiasingViewerOptions(enabled, msaaSamples) {
    if (enabled === false) return {}
    const configuredSamples = Number(msaaSamples)
    return {
      msaaSamples: Math.max(
        Number.isFinite(configuredSamples) ? configuredSamples : 1,
        GLOBAL_ANTIALIASING_MSAA_SAMPLES,
      ),
      useBrowserRecommendedResolution: false,
    }
  }

  setGlobalAntialiasing(enabled = true) {
    if (!this.viewer) return

    this.viewer.useBrowserRecommendedResolution = enabled === false
    this.viewer.scene.msaaSamples =
      enabled === false
        ? this.viewer.scene.msaaSamples
        : Math.max(this.viewer.scene.msaaSamples || 1, GLOBAL_ANTIALIASING_MSAA_SAMPLES)

    if (this.viewer.scene.postProcessStages?.fxaa) {
      this.viewer.scene.postProcessStages.fxaa.enabled = enabled !== false
    }
  }
  
}

bash 复制代码

onMounted(async () => {
  await nextTick()
  
  cesiumUtils.destroy()
  
  cesiumUtils.initViewer(CONTAINER_ID, {
    globalAntialiasing: true,  //开启全局抗锯齿
    terrain: { url: DEFAULT_TERRAIN_URL },
    tianditu: 2,
  })
})

注意：

msaaSamples初始值设了4，但实际上只是全局应用fxaa，该处理方法除了给抗锯齿处理加一个开关控制外，还禁止了fxaa全局应用，保留msaa，以部分性能为代价开启高渲染模式。

如果你初始值直接设为8，而不做我上述的处理，则会得到：

如图所示，并没有明显的改变。

据我多年经验，地图的渲染本身就是一个比较吃性能的点，浏览器如果能带起来，那么开启抗锯齿相比地图渲染本身所耗费的性能就比较低微，你可以放心开启。

如果浏览器带起来比较吃力，那么请检查电脑是否具备独显，或是常规模式下不应用独显，请查看我之前的文章 Cesium加载大量点数据卡顿处理办法，检查一下浏览器是否开启独显渲染。