轮廓设置

直接设置outline的相关属性

• 此种方式设置，outlineWidth尽管设置的值很大也只会显示为1单位宽

• 注意：贴地时，必须显式设置height=0，轮廓线才会显示

  不设置,轮廓线不会显示并会报错：geometry outlines are unsupported on terrain. Outlines will be disabled. To enable outlines, disable geometry terrain clamping by explicitly setting height to 0.翻译为：几何轮廓在地形上不受支持。轮廓线将被禁用。要启用轮廓，请通过将高度显式设置为 0 来禁用几何地形夹紧。

// 加面
function addPolygon(viewer: Cesium.Viewer, coordinates: number[]) {
  const polygon = new Cesium.Entity({
    id: "polygon",
    name: "面",
    show: true,
    polygon: {
      hierarchy: Cesium.Cartesian3.fromDegreesArray(coordinates),
	  //如果需要贴地，必须显式设置height=0，轮廓线才会显示
	  height:0,
	  //1.画时即设置轮廓属性
      outline: true,
      outlineColor:Cesium.Color.YELLOW,
      outlineWidth:1,
      material: Cesium.Color.RED,
      // 设置贴地，另外Cesium.ClassificationType.TERRAIN表示仅贴合地形
      classificationType: Cesium.ClassificationType.BOTH, //既可以贴合地形也可以贴合 3D Tiles
    }
  });
  viewer.entities.add(polygon);
  return polygon;
}
const polygon=addPolygon(viewer, [117, 30, 117, 32, 116, 32, 116, 30,117, 30]);

//2.也可以画完后设置或修改轮廓属性
//polygon.polygon!.outline = new Cesium.ConstantProperty(true); 
//polygon.polygon!.outlineColor = new Cesium.ConstantProperty(Cesium.Color.YELLOW); 
//polygon.polygon!.outlineWidth = new Cesium.ConstantProperty(10); 

加载polygon时同时加载polyline

• 此种方式设置，可以通过设置polyline的width属性来加粗轮廓

function addPolygon(viewer: Cesium.Viewer, coordinates: number[]) {
  const polygon = new Cesium.Entity({
    id: "polygon",
    name: "面",
    show: true,
    polygon: {
      hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(coordinates),
      material: Cesium.Color.RED,
      // 设置贴地，另外Cesium.ClassificationType.TERRAIN表示仅贴合地形
      classificationType: Cesium.ClassificationType.BOTH, //既可以贴合地形也可以贴合 3D Tiles
    },
    polyline:{
      positions: Cesium.Cartesian3.fromDegreesArray(coordinates),
      width: 10, //线条宽度
      material: Cesium.Color.GREENYELLOW, //线条材质
         // 设置贴地
      clampToGround: true,
    }
  });
  viewer.entities.add(polygon);
  return polygon;
}

Entity多边形其他属性的修改

1. 修改颜色

   const polygon=addPolygon(viewer, [117, 30, 117, 32, 116, 32, 116, 30,117, 30]);
   //修改颜色
   polygon.polygon!.material = new Cesium.ColorMaterialProperty(Cesium.Color.GREEN.withAlpha(0.6));
   

2. 添加条纹

   const polygon=addPolygon(viewer, [117, 30, 117, 32, 116, 32, 116, 30,117, 30]);
   //添加条纹
   const stripeMaterial = new Cesium.StripeMaterialProperty({ 
     //定义条纹方向为垂直
     orientation: Cesium.StripeOrientation.VERTICAL, 
     //用于指定第一个条纹颜色
     evenColor: Cesium.Color.WHITE, 
     //用于指定第二个条纹颜色
     oddColor: Cesium.Color.BLACK, 
     //用于指定重复次数
     repeat: 16, 
   }); 
   polygon.polygon!.material = stripeMaterial;
   

3. 添加拉伸-多边形向上拉伸后成为几何体

   const polygon=addPolygon(viewer, [117, 30, 117, 32, 116, 32, 116, 30,117, 30]);
   polygon.polygon.extrudedHeight = 100000; 
   

4. 贴图

   const polygon=addPolygon(viewer, [117, 30, 117, 32, 116, 32, 116, 30,117, 30]);
   polygon.polygon!.material=new Cesium.ImageMaterialProperty({
     image:'../../../src/assets/imgs/wall.jpg',
     repeat:new Cesium.Cartesian2(1, 1),
   })
   

5. 显隐

   //显示
   polygon.show=true
   //隐藏
   polygon.show=false
   

6. 移除

   //直接移除实体
   viewer.entities.remove(addEllipsoid); 
   //根据实体的 id 移除实体
   viewer.entities.removeById("polygon"); 
   //移除集合中全部实体
   viewer.entities.removeAll();