『Cesium 基礎』Entity 樣式設置

關注公衆號"seeling_GIS"，回覆『前端視頻』，領取前端學習視頻資料

material 材質

• 顏色 通過給 material 賦值 color 對象值既可以

  //內置顏色
  polygon.material: Cesium.Color.RED.withAlpha(0.5),
  //css顏色 
  //cssColor:值可以是 #ffccdd, rgb(255，255，255)，rgb(255，0，255，0.5)
  polygon.material: Cesium.Color.fromCssColorString(cssColor, result) 
  
  

• 通過 ColorMaterialProperty設置動態的顏色
  

  // 創建 colorProperty
  var colorProperty = new Cesium.SampledProperty(Cesium.Color);
  
    	colorProperty.addSample(startTime.clone(), 
    		new Cesium.Color.fromCssColorString("rgba(0,0,255,.5)"));
  
      colorProperty.addSample(endTime.clone(), 
    		new Cesium.Color.fromCssColorString("rgba(255,0,255,.5)"));	
  
  
  polygon.material: new Cesium.ColorMaterialProperty(colorProperty),
  
  

• 貼圖：直接設置貼圖圖片路徑即可

  polygon.material:'../img/cesium/c1_3.jpg'
  

填充和邊框

fill:false,//默認true
outline:true,//默認false，如果需要設置邊框顏色需要開啓設置爲true
outlineColor: Cesium.Color.fromCssColorString("rgba(0,0,255,.5)"),
outlineWidth:100 

高度和實體垂直拉伸

  height: 200000.0,//離地高度
  extrudedHeight: 400000.0, //實體高度 = extrudedHeight - height

完整代碼

var entity = viewer.entities.add({ 
  			position: Cesium.Cartesian3.fromDegrees(...lnglat),
  			polygon: {
  				hierarchy:{
  					positions:Cesium.Cartesian3.fromDegreesArray([103.842575,30.795808,104.394638,30.728545,104.394638,30.728545,103.626969,30.584419]),
  				},
  				material: Cesium.Color.RED.withAlpha(0.5),
  				// material: new Cesium.ColorMaterialProperty(colorProperty),
  				// material:'../img/cesium/c1_3.jpg',
  				height: 2000.0,//離地高度
				extrudedHeight: 4000.0, //實體高度 = extrudedHeight - height
  				// fill:false,
  				// outline:true,
  				// outlineColor: Cesium.Color.fromCssColorString("rgba(0,0,255,.5)"),
  				// outlineWidth:100
  			}
  		});

---

設置初始化範圍

  //Rectangle(west, south, east, north)
  //設置初始化中國範圍
  Cesium.Camera.DEFAULT_VIEW_RECTANGLE =
              Cesium.Rectangle.fromDegrees(...[100, 10, 120, 70]);

---

更多內容，歡迎關注公衆號