有些时候,我们在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
})
使用方式:
- 将上面代码复制粘贴到自己的代码中
- 通过
new PolylineAntialiasingMaterialProperty
创建材质 - 将创建的材质赋值给
material
参数
例如:
// 创建材质(参数是个对象,里面传颜色)
let geojsonPolylineMaterial = new PolylineAntialiasingMaterialProperty({
color: Cesium.Color.fromCssColorString("#27E31E")});
// 修改对应的 entity 的 polyline.material(折线的材质)
gvEarth.entities.getById('xxx').polyline.material = geojsonPolylineMaterial;
修改后的效果