1. 程式人生 > >cesium 學習筆記(7)2018.7.9

cesium 學習筆記(7)2018.7.9

1.材質

可以在建立時賦值材質,也可以構造後賦值材質

//方法一,構造時賦材質
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;

(1)顏色材質:

 Cesium.Color.BLUE.withAlpha(0.5)

(2)圖片材質

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

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

image的值可以使url或者video或者canvas

repeat的值為兩個數,分別代表x和y方向圖片重複次數

color設定的話會在圖片上加一層顏色

transparent是否透明,png的話可以設定

(3)棋盤

ellipse.material = new Cesium.CheckerboardMaterialProperty({
  evenColor : Cesium.Color.WHITE,//第一個顏色
  oddColor : Cesium.Color.BLACK,//第二個顏色
  repeat : new Cesium.Cartesian2(4, 4)//重複次數
});

(4)條紋

ellipse.material = new Cesium.StripeMaterialProperty({
  evenColor : Cesium.Color.WHITE,//第一個顏色
  oddColor : Cesium.Color.BLACK,//第二個顏色
  repeat : 32,//重複次數
  offset:20,//偏移量
  orientation:Cesium.StripeOrientation.VERTICAL //水平還是垂直,預設水平
});

(5)網格

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)//線的粗細
});

還有一個lineOffset線的偏移量

 

(6)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);





polyline.material = new Cesium.PolylineGlowMaterialProperty({
    glowPower : 0.2,//發光的長度,值為現款的百分比(0~1)
    color : Cesium.Color.BLUE//發光的顏色(中心為白色)
});

polyline.material = new Cesium.PolylineOutlineMaterialProperty({
    color : Cesium.Color.ORANGE,//線的顏色
    outlineWidth : 3,//線文理寬度
    outlineColor : Cesium.Color.BLACK//線顏色
});