cesium自定义材质-渐变面（从中间往外渐变）

效果如下：

1、创建渐变面自定义材质类文件（gradientPolygon.js）

import * as Cesium from 'cesium'
// 渐变面（从中间往外渐变）
class GradientPolygonMaterial {
  materialType = 'GradientPolygon'
  constructor(options) {
    // 默认参数设置
    this._definitionChanged = new Cesium.Event()
    this._color = undefined
    this._colorSubscription = undefined
    this.color = options.color || Cesium.Color.WHITE
    this.toColor = options.toColor || Cesium.Color.WHITE
    //添加自定义材质
    Cesium.Material._materialCache.addMaterial(this.materialType, {
      fabric: {
        type: this.materialType,
        uniforms: {
          color: this.color,
          toColor: this.toColor,
          time: -20
        },
        source: `czm_material czm_getMaterial(czm_materialInput materialInput){
            czm_material material = czm_getDefaultMaterial(materialInput);
            // 二维坐标
            vec2 st = materialInput.st;
            // 顶部
            vec2 top = vec2(0.5, 1);
            // 中心点
            vec2 center = vec2(0.5, 0.5);
            // 计算圆的半径
            float radius = distance(top, center);
            // 计算坐标点离中心点的距离
            float dist = distance(st, center);
            // 根据插值系数（离中心点距离与半径的占比），对起始色值和结束色值进行颜色插值计算
            vec4 ackColor = mix(color, toColor,dist/radius);
            // 给材质赋值颜色
            material.diffuse = ackColor.rgb;
            // 给材质赋值透明度
            material.alpha = ackColor.a;
            return material;
          }`
      },
      translucent: function () {
        return true
      }
    })
  }
  get isConstant() {
    return false
  }
  get definitionChanged() {
    return this._definitionChanged
  }
  // 获取当前的材质类型，因为是新自定义的材质
  getType() {
    return this.materialType
  }
  // 获取cesium中的时间，uniforms中的属性
  getValue(time, result) {
    if (!Cesium.defined(result)) {
      result = {}
    }
    result.color = this.color
    result.toColor = this.toColor
    return result
  }
  equals(other) {
    return (
      this === other ||
      (other instanceof GradientPolygonMaterial &&
        Cesium.Property.equals(this._color, other._color))
    )
  }
}
export default GradientPolygonMaterial

2、使用方法

参数说明：

• color：起始颜色
• toColor：结束颜色

import GradientPolygonMaterial from './gradientPolygon.js'
 
const viewer = new Cesium.Viewer('viewerDiv')
const coordinates = [[113.87157395088433,34.402381249754185],[113.87136474107587,34.404135755125886],[113.87074467762591,34.40582287053989],[113.86973756758825,34.40737775513752],[113.86838209917418,34.40874064665345],[113.86673035719016,34.409859159404256],[113.8648458222238,34.41069029904384],[113.86280093034958,34.41120211641551],[113.86067428725077,34.41137493669983],[113.85854764415197,34.41120211641551],[113.85650275227776,34.41069029904384],[113.85461821731138,34.409859159404256],[113.85296647532738,34.40874064665345],[113.8516110069133,34.40737775513752],[113.85060389687564,34.40582287053989],[113.84998383342568,34.404135755125886],[113.84977462361722,34.402381249754185],[113.84998428175038,34.40062678117215],[113.85060472527167,34.398939770526226],[113.85161208926489,34.39738504272512],[113.8529676468563,34.396022336163306],[113.85461929966299,34.39490400836663],[113.85650358067382,34.394073025523575],[113.8585480924767,34.39356131292],[113.86067428725077,34.393388529425344],[113.86280048202487,34.39356131292],[113.86484499382775,34.394073025523575],[113.86672927483858,34.39490400836663],[113.86838092764526,34.396022336163306],[113.86973648523666,34.39738504272512],[113.87074384922988,34.398939770526226],[113.87136429275117,34.40062678117215],[113.87157395088433,34.402381249754185]]

const hierarchy = coordinatesToCartesian3(coordinates)
const entity = {
  id: '唯一id值'
  name: 'name值',
  polygon: {
    hierarchy: new Cesium.PolygonHierarchy(hierarchy),
    material: new GradientPolygonMaterial({
      color: Cesium.Color.fromCssColorString('rgba(255, 167, 38, 0.9)'),
      toColor: Cesium.Color.fromCssColorString('rgba(172, 103, 2, 0.28)')
    })
  }
}
viewer.entities.add(entity)
 
//根据坐标值生成Cartesian3坐标对
function coordinatesToCartesian3(coordinates) {
  let isHeight = false //是否包含高度值
  let degreesArray = []
  coordinates.map((item) => {
    degreesArray.push(item[0])
    degreesArray.push(item[1])
    if (item.length > 1) {
      isHeight = true
      degreesArray.push(item[2])
    }
  })
  let result = isHeight
    ? Cesium.Cartesian3.fromDegreesArrayHeights(degreesArray)
    : Cesium.Cartesian3.fromDegreesArray(degreesArray)
  return result
}