cesium編程入門(八)設置材質

Cesium中為幾何形狀設置材質有多種方法

第一種方法 Material

直接構建Cesium.Material對象，通過設置Material的屬性來進行控制，官方示例和API描述的比較清楚，

API說明

材質示例

第二種方法 MaterialProperty

今天介紹通過MaterialProperty設置：

Cesium 材質相關的類為 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;

以下依次來介紹

ColorMaterialProperty--顏色材質

顏色是最常見的材質，可以將幾何形狀修改為不同的純色，達到區分的目的，也可以完成比如鼠標移動到某個建築，建築變色之類;使用比較簡單,只需要賦值顏色就行了，例如：
ellipse.material = Cesium.Color.BLUE.withAlpha(0.5)

ImageMaterialProperty--圖片

圖片紋理功能比較豐富，主要有下面屬性：

• image 值可以是URL，Canvas,或者Video
• repeat 值為一個二位數，分別表示X,y方向的重復次數，例如new Cartesian2(2.0, 1.0)表示x方向重復2次,y方向重復1次
• color 設置顏色之后，會在圖片上覆蓋一層設置的顏色
• transparent 是否透明，紋理為png圖片的時候可以設置

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

//也可以簡單的寫成
ellipse.material = '../images/cats.jpg';

注意 在http網址中調用https網址圖片，肯能會調用失敗

CheckerboardMaterialProperty--棋盤紋理

共有三個屬性，

• evenColor 默認白色，棋盤的第一個顏色
• oddColor 默認黑色，第二個顏色
• repeat 重復次數

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

StripeMaterialProperty--條紋紋理

屬性說明如下：

• evenColor 默認白色，棋盤的第一個顏色
• oddColor 默認黑色，第二個顏色
• repeat 條紋重復次數
• offset 偏移量
• orientation 水平或者垂直,默認水平

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

GridMaterialProperty--網格

屬性說明如下：

• color 網格顏色
• cellAlpha 單元格透明度
• lineCount 行列個數
• lineThickness 線粗細
• lineOffset 線偏移

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，先來添加一個Polyline

var entity = viewer.entities.add({
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray([-77, 35,
                                                        -77.1, 35]),
    width : 5,
    material : Cesium.Color.RED
}});
viewer.zoomTo(viewer.entities);

PolylineGlowMaterialProperty

屬性說明如下：

• color 發光的顏色(中心顏色為白色)
• glowPower 發光的長度，值為線寬的百分比(0~1.0)

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

PolylineOutlineMaterialProperty

屬性說明如下：

• color 線的顏色
• outlineWidth 線紋理寬度
• outlineColor 線紋理顏色

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