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

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

我的主頁 http://cesium.xin