Cesium 直线/折线 抗锯齿材质

有些时候，我们在Cesium使用线条绘制的时候会出现线条不圆润有锯齿效果，例如：下图是geojson渲染的部分截图

有些时候我们通过下面代码是可以解决的

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

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

点击查看解决效果

但是也有时候是解决不了的，本文就是通过渲染材质的方式解决线条锯齿问题

材质代码

const shader = `
    czm_material czm_getMaterial(czm_materialInput materialInput) { \n
      czm_material material = czm_getDefaultMaterial(materialInput); \n
      vec2 st = materialInput.st; \n
      material.diffuse = color.rgb; \n
      float dis = 1.0 - abs(0.5 - st.t) * 2.0;
      material.alpha = dis * color.a; \n
      return material; \n
    }
    `
class PolylineAntialiasingMaterialProperty {
    
    
    constructor(opt = {
     
     }) {
    
    
        this._definitionChanged = new Cesium.Event();
        this._color = undefined;
        this.color = opt.color;
    }
    get isConstant() {
    
    
        return true;
    }
    get definitionChanged() {
    
    
        return this._definitionChanged;
    }
    getType() {
    
    
        return PolylineAntialiasingMaterialProperty.materialType;
    }
    getValue(time, result = {
     
     }) {
    
    
        result.color = this.color || Cesium.Color.RED;
        return result;
    }
    equals(other) {
    
    
        return this === other || (
            other instanceof PolylineAntialiasingMaterialProperty &&
            other.color === this.color
        );
    }
    static materialType = 'PolylineAntialiasing'
}
Cesium.Material._materialCache.addMaterial(PolylineAntialiasingMaterialProperty.materialType, {
    
    
    fabric: {
    
    
        type: PolylineAntialiasingMaterialProperty.materialType,
        uniforms: {
    
    
            color: new Cesium.Color(1, 1, 1, 1)
        },
        source: shader
    },
    translucent: true
})

使用方式：

1. 将上面代码复制粘贴到自己的代码中
2. 通过 new PolylineAntialiasingMaterialProperty 创建材质
3. 将创建的材质赋值给 material 参数

例如：

// 创建材质（参数是个对象，里面传颜色）
let geojsonPolylineMaterial = new PolylineAntialiasingMaterialProperty({
    
    color: Cesium.Color.fromCssColorString("#27E31E")});
// 修改对应的 entity 的 polyline.material（折线的材质）
gvEarth.entities.getById('xxx').polyline.material = geojsonPolylineMaterial;

修改后的效果