Cesium——实体（Entity）中EllipseGraphics和ModelGraphics

在Cesium中，Entity 中的图形属性（graphics）允许你定义实体的外观和形状。两个常见的图形属性是 EllipseGraphics 和 ModelGraphics。

EllipseGraphics属性用于定义实体的椭圆形状

ModelGraphics属性用于在实体上加载3D模型，主要用于创建模型图形，加载的gltf模型数据。

var viewer = new Cesium.Viewer('cesiumContainer');

var entityWithModel = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 500000.0),
    model: {
        uri: 'path/to/your/model.gltf',
        scale: 200.0
    }
});

viewer.zoomTo(entityWithModel);

以下介绍一下ModelGraphics中的常用属性

属性	类型	描述
uri		资源地址
show		是否显示模型
scale		模型指定缩放比例
minimumPixelSize		模型的最小缩放度，指定模型缩小到多少像素后，不再能被缩小，默认值是0，就是能被无限缩小。
maximumScale		同上相反，最大比例尺
runAnimations		是否应该启动模型中指定的gltf动画（没用过）
shadows		是否开启模型的阴影，开启后增加立体感
heightReference		相对于地面的高度，高度模式（1、Cesium.HeightReference.NONE(绝对高度)，2、Cesium.HeightReference.RELATIVE_TO_GROUND（相对地面）、3，Cesium.HeightReference.CLAMP_TO_GROUND（贴地））
silhouetteColor		轮廓颜色（Cesium.Color.RED）
silhouetteSize		轮廓宽度
color		模型的渲染颜色

添加一个gltf模型并让其自动旋转

/**
    * @description: 立体旋转
    * @return {*}
    */  
   const handelThreeRotate = ()=>{ 
    let heading = Cesium.Math.toRadians(0); 
    const position = Cesium.Cartesian3.fromDegrees(104.1, 30.6,500); 
    const pitch = 0;
    const roll = 0;
    let hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
    let orientation = Cesium.Transforms.headingPitchRollQuaternion(
      position,
      hpr
    );
    const addModeEntity = window.viewer.entities.add({
        name: '测试1',
        id:"cs1",
        position: position,
        orientation: orientation,
        model: {
          uri: '/static/SampleData/gltf/客机模型/客机模型.gltf',
          scale:0.1,
          minimumPixelSize:0.1,
          maximumScale: 20,
          shadows:true,
          color:Cesium.Color.RED,
          colorBlendMode:Cesium.ColorBlendMode.MIX// Cesium.ColorBlendMode.REPLACE//
        },
      });
    window.viewer.trackedEntity = addModeEntity;
    window.viewer.flyTo(window.viewer.entities.getById("cs1")) 
    const rotateMaterial = (instance, _stRotation, _amount)=> {
      console.log(instance.orientation, _stRotation, _amount);
        instance.orientation = new Cesium.CallbackProperty(function() {
          _stRotation += _amount;
          if (_stRotation >= 360 || _stRotation <= -360) {
              _stRotation = 0;
          }
          let heading = Cesium.Math.toRadians(_stRotation); 
          const pitch = 0;
          const roll = 0;
          let hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
          let orientation = Cesium.Transforms.headingPitchRollQuaternion(
            position,
            hpr
          );
          return orientation
      }, false)
    }
    rotateMaterial(addModeEntity,0,1)
    
   }