关于cesium的entity设置outlinewidth不成功的问题

最近写代码的时候发现,viewer.entities.add方法添加entity的时候添加outlinewidth不管是写多少好像都不生效只能默认是1,

例如:

const entity = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-95.0, 40.0),
  ellipse: {
    semiMajorAxis: 50000,  
    semiMinorAxis: 50000,  
    material: Cesium.Color.RED.withAlpha(0.5),
    outline: true,
    outlineColor: Cesium.Color.WHITE,
    outlineWidth: 20,       
    height: 0,
    classificationType: Cesium.ClassificationType.TERRAIN
  }
});

虽然写了20但是实际显示的还是1,发现原因是由于 WebGL 的线宽限制,可以用一下方法验证一下你的浏览器支不支持

const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl');
console.log(gl.getParameter(gl.ALIASED_LINE_WIDTH_RANGE)); 
// 输出示例：[1, 1]，表示仅支持1像素

解决方法:
使用线在polygon外围包一圈

    polygon: {
      hierarchy: Cesium.Cartesian3.fromDegreesArray(coordinates),
      material: Cesium.Color.RED,
      outline: true,
      outlineColor: Cesium.Color.WHITE,
      outlineWidth: 10,
      fill: false
},
polyline:{
positions:Cesium.Cartesian3.fromDegreesArray(coordinates),
 material: Cesium.Color.RED,
}

或者叠加法(适合没有加透明度的):

// 外圆（作为“边”）
let circle=viewer.entities.add({
  position: center,
  ellipse: {
    semiMajorAxis: radius + outlineWidth,
    semiMinorAxis: radius + outlineWidth,
    material: Cesium.Color.BLUE,
    height: 0
  }
});

// 内圆（作为“填充”）
viewer.entities.add({
  position: center,
  ellipse: {
    semiMajorAxis: radius,
    semiMinorAxis: radius,
    material: Cesium.Color.RED,
    height: 0,
    fill: true,
    height: 1
  }
});