【Cesium学习（八）】Cesium设置材质

Cesium设置材质

在【Cesium学习（七）】Cesium对模型各种属性设置和修改 这篇文章上，学会了对模型设置各种属性，今天我们将学习Cesium对entity实体设置材质，在Cesium中为实体及几何行状设置材质有多个方法。

第一种方法 采用Material

我们可以在创建实体的时候直接构件Cesium.Material对象，再通过设置Material的属性来进行各种材质的控制，具有实例和API我们可以看官网的描述。
官网的Demo地址：deom实例
API说明文档地址：
官方API
中文API
这里是官方文档示例的用法:

// 利用fromType来创建一个带有颜色的材质
polygon.material = Cesium.Material.fromType('Color');
polygon.material.uniforms.color = new Cesium.Color(1.0, 1.0, 0.0, 1.0);

// 创建默认材质
polygon.material = new Cesium.Material();

// 创建一个具有完整织物符号的颜色材质
polygon.material = new Cesium.Material({
  fabric: {
    type: 'Color',
    uniforms: {
      color: new Cesium.Color(1.0, 1.0, 0.0, 1.0)
    }
  }
});

第二种方法 MaterialProperty

这次主要以这种方法来仔细深入学习讲解！
这里也有官方文档：MaterialProperty官方API

官方文档上我们可以看到，Cesium材质相关的类为MaterialProperty。它有一下几个子类：
ColorMaterialProperty
CompositeMaterialProperty
GridMaterialProperty
ImageMaterialProperty
PolylineGlowMaterialProperty
PolylineOutlineMaterialProperty
StripeMaterialProperty
而这每一个子类都是一个材质类型，下面将分别学习讲解这几个用法。

首先我们先来初始化和创建一个实体

1、初始化地球
这里不演示，可以通过查看前面的文章来初始化地球
【Cesium学习（四）】Cesium初始化map的简单封装
2、创建实体
这里可以查看【Cesium学习（五）】绘制基础形状
3、给实体添加材质
这里有两个方式，一是构造时设置材质，二是构造后设置材质

//方法一，构造时设置材质
var entity = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
  ellipse : {
    semiMinorAxis : 400000.0,
    semiMajorAxis : 400000.0,
    material : Cesium.Color.RED.withAlpha(0.5)//可设置不同的MaterialProperty
  }
});

//方法二，构造后设置材质
var ellipse = entity.ellipse;
ellipse.material = Cesium.Color.RED;

创建成功后就可以看到这样：

下面将依次讲解几种材质子类

1、ColorMaterialProperty --颜色材质
颜色材质是我们最常用到的材质，他可以将实体设置成不同的颜色，以到达实体醒目的作用及其他作用，通常和鼠标移动或者点击事件来联动展示。
设置颜色材质也非常简单，只需要给Material属性赋值一个颜色类就好了，例如上面创建的实体类的时候就设置了一个红色的材质：

ellipse.material = Cesium.Color.RED;

2、ImageMaterialProperty --图片材质

从文档上可以看出图片材质有很多属性，主要有一下属性：
image：获取或设置指定要使用的图像，URL，画布或视频的属性。
repeat：获取或设置 Cartesian2 属性，该属性指定图像在每个方向上重复的次数。
color：获取或设置Color属性，该属性指定应用于图像的所需颜色。
transparent：获取或设置布尔属性，该布尔属性指定图像是否具有透明度

//> ImageMaterialProperty 图片
ellipse.material = new Cesium.ImageMaterialProperty({
	image: '../../assets/logo.png',
	color: Cesium.Color.WHITE,
	repeat: new Cesium.Cartesian2(4, 4),
});

3、CheckerboardMaterialProperty --棋盘纹理材质

棋盘纹理也有几个属性：
evenColor：获取或设置指定第一个 Color 的属性，默认白色
oddColor：获取或设置指定第二个 Color 的属性，默认黑色
repeat:获取或设置 Cartesian2 属性，该属性指定图块在每个方向上重复多少次。

//> CheckerboardMaterialProperty 棋盘纹理
ellipse.material = new Cesium.CheckerboardMaterialProperty({
    evenColor: Cesium.Color.WHITE,
    oddColor: Cesium.Color.RED,
    repeat: new Cesium.Cartesian2(4, 4),
});

4、StripeMaterialProperty --条纹纹理材质

条纹纹理的属性也有很多，除了和棋盘纹理一样的evenColor，oddColor，repeat，还有几个属性：
offset：获取或设置数字属性，该属性指定模式中的点开始绘画；以0.0为偶数颜色的开始，以1.0为开始的奇数颜色，2.0再次为偶数颜色，以及任何倍数或分数值在两者之间。
orientation ：获取或设置指定 StripeOrientation 的属性，主要是水平还是垂直，默认水平

//> StripeMaterialProperty 条纹纹理
ellipse.material = new Cesium.StripeMaterialProperty({
    evenColor: Cesium.Color.WHITE,
    oddColor: Cesium.Color.RED,
    repeat: 32,
    offset: 20,
    orientation: Cesium.StripeOrientation.VERTICAL,
});

5、GridMaterialProperty --网格纹理材质

网格纹理材质有一下几个属性：
color：获取或设置指定网格 Color 的属性。
cellAlpha :获取或设置数字属性，该属性指定单元格alpha值。
lineCount :获取或设置 Cartesian2 属性，该属性指定沿每个轴的网格线数。
lineOffset :该属性指定沿每个轴的网格线的起始偏移量。
lineThickness :该属性指定沿每个轴的网格线的粗细。

//> GridMaterialProperty 网格纹理
ellipse.material = new Cesium.GridMaterialProperty({
    color: Cesium.Color.GREEN,
    cellAlpha: 0.2,
    lineCount: new Cesium.Cartesian2(8, 8),
    lineThickness: new Cesium.Cartesian2(2.0, 2.0),
});