「Cesium」を利用して、任意の座標から高度の取得２

はじめに

前回は、GPS経路情報の高度があっていたなかったため、czmlに設定する方法をとりましたが、毎回設定するのは面倒なので、Cesiumから動的に高度の取得し、自動車の高度に設定してみました。

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

あと、自動車の方向が自動で変わらなかったので、自動車位置の差から角度を計算し、設定しました。角度設定には、前回自宅の3Dもモデル表示時に使用した、HeadingPitchRollクラスを使いました。

Cesiumのサンプルには、なぜかこの処理がなく、自動で向きが変わっています。

htmlファイル(抜粋)

<html lang="ja">
  <head>
    <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>
    <div id="toolbar-left2">
      <button onclick="showLog()">log</button>
    </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>

<head>

<style>

html,

body,

#cesiumContainer {

width: 100%;

height: 100%;

margin: 0;

padding: 0;

overflow: hidden;

}

</style>

</head>

<body>

</div>

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>

以下、使用時の動画です。

月	火	水	木	金	土	日
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

はじめに

htmlファイル(抜粋)

共有:

関連