はじめに

GPS経路情報をCesium上で表示させましたが、Cesiumの地形情報と高度があっていなかっため、うまく表示ができませんでした。

そこで、任意の座標から、Cesiumの地形情報からの高度を取得し、自動車の高度に設定してみました。高度の取得には、clampToHeight()メソッドを利用します。

提供される高度は準拠楕円体からの高さ（Ellipsoid.WGS84）楕円体高になります。
これは、平均海面からの高度である標高ではありません。なので、海でサンプリングした場合、必ずしも0.0になるとは限りません。

あと、自動車の方向が自動で変わらなかったので、自動車位置の差から角度を計算し、設定しました。角度設定には、HeadingPitchRollクラスを使いました。

実は、「Cesium」のデモサイトではほとんどか3Dモデルの角度設定にorientationのunitQuaternionを使って設定しているのですが、設定値が不明でうまくいきませんでした。そのため、あきらめて、HeadingPitchRollクラスを使いました。

このクラスではそれぞれの軸の角度を設定するだけなので、設定値が簡単に変更できました。heading,pitch,rollにそれぞれの軸の角度を設定すると、3Dモデルが回転します。Cesiumのサンプルには、なぜかこの処理がなく、自動で向きが変わっています。

以下、高度の取得及び設定プログラムです。今回は経路と自動車の位置でデータを分けています。
※czmlには、clampToGroundをtrueにしていましたが、高度の設定はされていませんでした。czmlの設定に問題があったのかもしれません。

以下参考ソースです。

index.html

<!DOCTYPE html>
<html lang="ja">`
  <head>
    <title>Hello World!</title>
    <link rel="stylesheet" href="../Build/CesiumUnminified/Widgets/widgets.css" />
    <script src="../Build/CesiumUnminified/Cesium.js"></script>
    <style>
      html,
      body,
      #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="cesiumContainer"></div>
    <script>
      var viewer = new Cesium.Viewer("cesiumContainer", {
        terrainProvider: Cesium.createWorldTerrain(),
      });
      var scene = viewer.scene;
      var clock = viewer.clock;
        
      var czmlOptions = {
          clampToGround: true
      };

      var entity;
      var positionProperty;
      var prePosition;
      
      viewer.dataSources.add(Cesium.CzmlDataSource.load('../Datas/clampToGround_load5.czml', czmlOptions)).then(function (ds) {
          entity = ds.entities.getById("Vehicle");
          viewer.trackedEntity = entity;
          positionProperty = entity.position;
          start();
      });
      
      viewer.dataSources.add(Cesium.CzmlDataSource.load('../Datas/clampToGround_load6.czml', czmlOptions));
      
       function start() {
          var objectsToExclude = [entity];
          scene.postRender.addEventListener(function () {
            var position = positionProperty.getValue(clock.currentTime);
            if (position === undefined) {
                return;
            };
            entity.position = scene.clampToHeight(position, objectsToExclude);
            if (prePosition !== undefined) {
                entity.orientation = calculateOrientation(prePosition, position);
            }
            prePosition = position;
          });
      } 
      function calculateOrientation(oldPosition, newPosition) {
            var dX = oldPosition.x - newPosition.x;
            var dY = oldPosition.y - newPosition.y;

            var offSet =  Cesium.Math.toRadians(135);
            var heading = Math.atan2(dX, dY) - offSet;
            if (heading > Cesium.Math.TWO_PI) {
                heading -= Cesium.Math.TWO_PI;
            }
            
            var pitch = 0;
            var roll = 0;

            var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
            var orientation = Cesium.Transforms.headingPitchRollQuaternion(oldPosition, hpr);
            return orientation;
      }
    </script>
  </body>
</html>

以下、画面イメージです。