cesium入门(五)设置材质

第一种方法Material

常见的材质类型API

第二种方法MaterialProperty

MaterialProperty有以下子类:
ColorMaterialProperty
ImageMaterialProperty
CheckerboardMaterialProperty
StripeMaterialProperty
GridMaterialProperty
PolylineGlowMaterialProperty
PolylineOutlineMaterialProperty

以Geometry为例来表现材质的变化:

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

//方法二,构造后赋材质
var ellipse = entity.ellipse;
ellipse.material = Cesium.Color.RED;

ImageMaterialProperty-图片

//完整的这么写
ellipse.material = new Cesium.ImageMaterialProperty({
    image:'../images/cats.jpg',
    color: Cesium.Color.BLUE,
    repeat : new Cesium.Cartesian2(4, 4)
});

//也可以简单的写成
ellipse.material = '../images/cats.jpg';

CheckerboardMaterialProperty-棋盘纹理

ellipse.material = new Cesium.CheckerboardMaterialProperty({
	evenColor : Cesium.Color.WHITE,
	oddColor : Cesium.Color.BLACK,
	repeat : new Cesium.Cartesian2(4,4)
});

StripeMaterialProperty-条纹纹理

ellipse.material = new Cesium.StripeMaterialProperty({
	evenColor : Cesium.Color.WHITE,
	oddColor : Cesium.Color.BLACK,
	repeat : 32,
	offset : 20,
	orientation:Cesium.StripeOrientation.VERTICAL
});

GridMaterialProperty-网格

ellipse.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)
});

创建一个Polyline
PolylineGlowMaterialProperty

polyline.material = new Cesium.PolylineGlowMaterialProperty({
    glowPower : 0.2,
    color : Cesium.Color.BLUE
});

PolylineOutlineMaterialProperty

polyline.material = new Cesium.PolylineOutlineMaterialProperty({
    color : Cesium.Color.ORANGE,
    outlineWidth : 3,
    outlineColor : Cesium.Color.BLACK
});

你可能感兴趣的:(前端,cesium)