cesium自定义材质-发光线

效果如下：

1、创建发光线自定义材质类文件（glowLine.js）

import * as Cesium from 'cesium'
// 发光线
class GlowLineMaterial {
  materialType = 'GlowLine'
  constructor(options) {
    // 默认参数设置
    this._definitionChanged = new Cesium.Event()
    this._color = undefined
    this._colorSubscription = undefined
    this._power = undefined
    this.color = options.color || Cesium.Color.WHITE
    this.glowColor = options.glowColor || Cesium.Color.BLUE
    this.power = options.power || 0.25
    //添加自定义材质
    Cesium.Material._materialCache.addMaterial(this.materialType, {
      fabric: {
        type: this.materialType,
        uniforms: {
          glowColor: this.glowColor,
          color: this.color,
          power: this.power
        },
        source: `
        czm_material czm_getMaterial(czm_materialInput materialInput)
        { 
          czm_material material = czm_getDefaultMaterial(materialInput);
          vec2 st = materialInput.st;
          float glow = (0.5 - abs(st.t - 0.5)) * 2.0/ power;
          material.alpha = clamp(0.0, 1.0, glow);
          material.diffuse = material.alpha > power? color.rgb: glowColor.rgb;
          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.glowColor = this.glowColor
    result.power = this.power
    return result
  }
  equals(other) {
    return (
      this === other ||
      (other instanceof GlowLineMaterial && Cesium.Property.equals(this._color, other._color))
    )
  }
}
export default GlowLineMaterial
import * as Cesium from 'cesium'
// 发光线
class GlowLineMaterial {
  materialType = 'GlowLine'
  constructor(options) {
    // 默认参数设置
    this._definitionChanged = new Cesium.Event()
    this._color = undefined
    this._colorSubscription = undefined
    this._power = undefined
    this.color = options.color || Cesium.Color.WHITE
    this.glowColor = options.glowColor || Cesium.Color.BLUE
    this.power = options.power || 0.25
    //添加自定义材质
    Cesium.Material._materialCache.addMaterial(this.materialType, {
      fabric: {
        type: this.materialType,
        uniforms: {
          glowColor: this.glowColor,
          color: this.color,
          power: this.power
        },
        source: `
        czm_material czm_getMaterial(czm_materialInput materialInput)
        { 
          czm_material material = czm_getDefaultMaterial(materialInput);
          vec2 st = materialInput.st;
          float glow = (0.5 - abs(st.t - 0.5)) * 2.0/ power;
          material.alpha = clamp(0.0, 1.0, glow);
          material.diffuse = material.alpha > power? color.rgb: glowColor.rgb;
          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.glowColor = this.glowColor
    result.power = this.power
    return result
  }
  equals(other) {
    return (
      this === other ||
      (other instanceof GlowLineMaterial && Cesium.Property.equals(this._color, other._color))
    )
  }
}
export default GlowLineMaterial

2、使用方法

参数说明：

• color：线颜色
• glowColor：发光颜色
• power：发光强度

import GlowLineMaterial from './glowLine.js'
 
const viewer = new Cesium.Viewer('viewerDiv')
const coordinates = [[113.85, 34.75],[113.95, 34.75]]
const entity = {
  id: '唯一id值'
  name: 'name值',
  polyline: {
    positions: coordinatesToCartesian3(coordinates),
    width:20,
    material: new GlowLineMaterial({
      color: Cesium.Color.fromCssColorString('rgba(255, 248, 189,1)'),
      glowColor: Cesium.Color.fromCssColorString('rgba(255, 158, 0,1)'),
      power: 0.9,
    }),
    clampToGround: false
  }
}
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
}