Cesium 入门系列教程（六）：不同的材质设置示例（10个示例）

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；优快云知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

在Cesium中，材质（Material）用于定义几何图形的外观属性，比如颜色、纹理等。材质可以应用于多种几何体和实体上，以改变它们的视觉效果。Cesium支持多种类型的材质，包括纯色、网格、图像、条纹、棋盘格等。

一， 设置不同类型的材质

1. 颜色材质 ColorMaterialProperty

示例地址：https://dajianshi.blog.youkuaiyun.com/article/details/130740125

核心代码：

this.viewer.entities.add({
  rectangle: {
    coordinates: Cesium.Rectangle.fromDegrees(-100, 30, -90, 40),
    material: Cesium.Color.BLUE.withAlpha(0.5)
  }
});

2. 图片材质 ImageMaterialProperty

示例地址：https://dajianshi.blog.youkuaiyun.com/article/details/130740198

核心代码：

this.viewer.entities.add({
  rectangle: {
    coordinates: Cesium.Rectangle.fromDegrees(-100, 30, -90, 40),
    material: new Cesium.ImageMaterialProperty({
      image: 'path/to/your/image.jpg',
      repeat: new Cesium.Cartesian2(2, 2),
      color: Cesium.Color.WHITE.withAlpha(0.9)
    })
  }
});

3. 条纹材质 StripeMaterialProperty

示例代码：https://dajianshi.blog.youkuaiyun.com/article/details/130740257

核心代码：

this.viewer.entities.add({
  rectangle: {
    coordinates: Cesium.Rectangle.fromDegrees(-100, 30, -90, 40),
    material: new Cesium.StripeMaterialProperty({
      evenColor: Cesium.Color.WHITE,
      oddColor: Cesium.Color.BLACK,
      orientation: Cesium.StripeOrientation.HORIZONTAL,
      repeat: 10
    })
  }
});

4. 网格材质 GridMaterialProperty

示例代码：https://dajianshi.blog.youkuaiyun.com/article/details/130740314

核心代码：

this.viewer.entities.add({
  rectangle: {
    coordinates: Cesium.Rectangle.fromDegrees(-100, 30, -90, 40),
    material: new Cesium.GridMaterialProperty({
      color: Cesium.Color.YELLOW,
      cellAlpha: 0.2,
      lineCount: new Cesium.Cartesian2(8, 8),
      lineThickness: new Cesium.Cartesian2(2.0, 2.0)
    })
  }
});

5. 棋盘材质 CheckerboardMaterialProperty

示例代码：https://dajianshi.blog.youkuaiyun.com/article/details/130764939

核心代码：

this.viewer.entities.add({
  rectangle: {
    coordinates: Cesium.Rectangle.fromDegrees(-100, 30, -90, 40),
    material: new Cesium.CheckerboardMaterialProperty({
      evenColor: Cesium.Color.WHITE,
      oddColor: Cesium.Color.BLACK,
      repeat: new Cesium.Cartesian2(4, 4)
    })
  }
});

6. 泛光折线材质 PolylineGlowMaterialProperty

示例代码：https://dajianshi.blog.youkuaiyun.com/article/details/130764970

核心代码：

this.viewer.entities.add({
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
    width: 10,
    material: new Cesium.PolylineGlowMaterialProperty({
      glowPower: 0.1,
      color: Cesium.Color.ORANGE
    })
  }
});

7. 带箭头折线材质 PolylineArrowMaterialProperty

示例代码：https://dajianshi.blog.youkuaiyun.com/article/details/130765815

核心代码：

this.viewer.entities.add({
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
    width: 10,
    material: Cesium.PolylineArrowMaterialProperty()
  }
});

8. 带边界折线材质 PolylineOutlineMaterialProperty

示例代码：https://dajianshi.blog.youkuaiyun.com/article/details/130764995

核心代码：

this.viewer.entities.add({
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
    width: 5,
    material: new Cesium.PolylineOutlineMaterialProperty({
      color: Cesium.Color.RED,
      outlineWidth: 2,
      outlineColor: Cesium.Color.BLACK
    })
  }
});

9. 点划线材质 PolylineDashMaterialProperty

示例代码：https://dajianshi.blog.youkuaiyun.com/article/details/130765699

核心代码：

this.viewer.entities.add({
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
    width: 5,
    material: new Cesium.PolylineDashMaterialProperty({
      color: Cesium.Color.GREEN
    })
  }
});

10. 利用 canvas 设置线性渐变色材质

对于更复杂的材质需求，比如线性渐变，你可以创建一个 canvas 元素，并将其作为图像材质的基础。

示例代码：https://dajianshi.blog.youkuaiyun.com/article/details/136045947

核心代码：

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
// 设置 canvas 尺寸等操作
// 使用 context 创建渐变效果

const entity = this.viewer.entities.add({
  rectangle: {
    coordinates: Cesium.Rectangle.fromDegrees(-100, 30, -90, 40),
    material: new Cesium.ImageMaterialProperty({
      image: canvas,
      repeat: new Cesium.Cartesian2(1, 1)
    })
  }
});

二、Cesium 入门教程 -系列文章列表

• Cesium 入门教程（一）：应该如何学习Cesium
• Cesium 入门教程（二）：界面的基础配置
• Cesium 入门教程（三）：加载不同的地图底图
• Cesium 入门教程（四）：利用entity显示图形
• Cesium 入门教程（五）：利用Primitive生成图形
• Cesium 入门教程（六）：不同的材质设置
• Cesium 入门教程（七）：加载、导出2D文件数据
• Cesium 入门教程（八）：加载3D瓦片及模型
• Cesium 入门教程（九）：通过鼠标绘制图形
• Cesium 入门教程（十）：利用shader、后处理重构图形
• Cesium 入门教程（十一）：camera相机功能展示
• Cesium 入门教程（十二）：时间动画实例
• Cesium 入门教程（十三）：粒子系统实例
• Cesium 入门教程（十四）：鼠标键盘交互
• Cesium 入门教程（十五）：插件与扩展