cesium 學習筆記(7)2018.7.9
阿新 • • 發佈:2018-11-09
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//線顏色
});