cesiumjs entity实体创建后，我们可以通过材质来实现我们想要的效果，今天要实现的效果是关于线相关的材质设置。

实例演示地址

esiumjs entity折线材质设置

绘制一条红线

const redLine = viewer.entities.add({
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray(
          [-75, 35, -125, 35]
      ),
      width: 5,
      // 设置实体entity的材质
      material: Cesium.Color.RED
    }
})

绘制虚线

// 设置虚线材质
  let material = new Cesium.PolylineDashMaterialProperty({
    dashLength: 16,
    color: Cesium.Color.RED
  })
  const redLine = viewer.entities.add({
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray(
          [-75, 35, -125, 35]
      ),
      width: 5,
      // 设置实体entity的材质
      material: material
    }
  })

箭头材质

// 箭头材质
  let material = new Cesium.PolylineArrowMaterialProperty(Cesium.Color.RED)
  const redLine = viewer.entities.add({
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray(
          [-75, 35, -125, 35]
      ),
      width: 5,
      // 设置实体entity的材质
      material: material
    }
  })

发光飞线效果

// 发光飞线
  let material = new Cesium.PolylineGlowMaterialProperty({
    glowPower: 0.5, //设置发光强度
    taperPower: 0.5,  //设置尾椎缩小程度
    color: Cesium.Color.RED
  })
  const redLine = viewer.entities.add({
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray(
          [-75, 35, -125, 35]
      ),
      width: 20,
      // 设置实体entity的材质
      material: material
    }
  })

当前内容为观看threejs视频 Three.js可视化企业实战WEBGL课 课程-cesiumjs entity折线材质设置-实践的学习笔记

笔记汇总

Cesium学习笔记汇总

cesiumjs entity折线材质设置代码下载

代码运行环境：vue3 + vite + js nodejs 14