cesium实体姿态控制其一，雷达动态监测卫星

最近有点时间，就想回顾一下cesium的代码案例，在姿态控制这块自己也是比较欠缺的，最终选择从控制实体姿态方面开始，本次以二个案例的编写开发过程作为主要结构来学习实体的控制，

实体姿态控制其一，雷达动态监测卫星

先看效果图

卫星的加载

卫星模型和轨道加载使用czml数据，然后使用dataSource里的CzmlDataSource加载，并根据时间，动态获取卫星的实时位置坐标。具体实现如下图：czml数据下载

 c3d_sdk.viewer.dataSources.add(Cesium.CzmlDataSource.load(MEO9ECI)).then((dataSource) => {
          const satellite = dataSource.entities.getById("Satellite-MEO9");
          c3d_sdk.viewer.clock.onTick.addEventListener((tick) => {
            targetPosition = satellite._position.getValue(tick.currentTime)
            if(!targetPosition) {
              return
            }
          })
});

模拟雷达站加载 

采用雷达控制中心点，使用点代替雷达位置，

c3d_sdk.viewer.scene.globe.depthTestAgainstTerrain = true;
        c3d_sdk.remover.removeById(c3d_sdk.viewer, 'mklfjmgvaseoirvnoas');
        const ent = c3d_sdk.viewer.entities.add({
          id: 'mklfjmgvaseoirvnoas',
          position: Cesium.Cartesian3.fromDegrees(4.110693, 36.0994841, 1160),
          point: {
            color: Cesium.Color.SKYBLUE,
            pixelSize: 4,
            outlineColor: Cesium.Color.YELLOW,
            outlineWidth: 2,
          }
        })

姿态控制

使用cylinder承载监听扫描效果，这里需要注意修改orientation 修改代码如下

方位计算代码

//求方位角和朝向
    getHeadingPitchRoll(m) {
    var m1 = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Matrix4.getTranslation(m, new Cesium.Cartesian3()), Cesium.Ellipsoid.WGS84, new Cesium.Matrix4());
    var m3 = Cesium.Matrix4.multiply(Cesium.Matrix4.inverse(m1, new Cesium.Matrix4()), m, new Cesium.Matrix4());
    var mat3 = Cesium.Matrix4.getMatrix3(m3, new Cesium.Matrix3());
    var q = Cesium.Quaternion.fromRotationMatrix(mat3);
    var hpr = Cesium.HeadingPitchRoll.fromQuaternion(q);
    var heading = Cesium.Math.toDegrees(hpr.heading);
    var pitch = Cesium.Math.toDegrees(hpr.pitch);
    var roll = Cesium.Math.toDegrees(hpr.roll);
    return hpr
    },
    //模型矩阵
    getModelMatrix(pointA, pointB) {
      const vector2 = Cesium.Cartesian3.subtract(pointB, pointA, new Cesium.Cartesian3());
      //归一化
      const normal = Cesium.Cartesian3.normalize(vector2, new Cesium.Cartesian3());
      const rotationMatrix3 = Cesium.Transforms.rotationMatrixFromPositionVelocity(pointA, normal, Cesium.Ellipsoid.WGS84);
      const orientation = Cesium.Quaternion.fromRotationMatrix(rotationMatrix3);
      const modelMatrix4 = Cesium.Matrix4.fromRotationTranslation(rotationMatrix3, pointA);
      const hpr = Cesium.HeadingPitchRoll.fromQuaternion(orientation);
      return modelMatrix4;
    }

材质修改代码

 readyCanvas(convasid, radius) {
        var canvas = document.getElementById(convasid);
        let cwidth = 400;
        let cheight = 400;
        var ctx = canvas.getContext("2d");
        ctx.clearRect(0, 0, cwidth, cheight);
        ctx.fillStyle = 'rgba(255, 255, 255, 0)';
        ctx.fillRect(0, 0, cwidth, cheight);
        for (let ii = 0; radius <= 200; ii++) {
          ctx.lineWidth = 2;
          //开始一个新的绘制路径
          ctx.beginPath();
          //设置弧线的颜色
          var trans = 1.0 - (radius / 255);
          ctx.strokeStyle = "rgba(255, 0, 255, " + trans + ")";
          var circle = {
            x: 200, //圆心的x轴坐标值
            y: 200, //圆心的y轴坐标值
            r: radius //圆的半径
          };
          //以canvas中的坐标点(200,200)为圆心，绘制一个半径为50px的圆形
          ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, true);
          //按照指定的路径绘制弧线
          ctx.stroke();
          radius += 10;
        }
    },

下一节讲Matrix的控制