모든 좌표에서 높이 및 설정 방법을 얻으려면 "Cesium"을 사용합니다.

개시하다
Cesium에 GPS 경로 정보가 표시됐지만, Cesium의 지형 정보와 높이가 일치하지 않아 제대로 표시되지 않았다.
그래서 우리는 임의의 좌표에서 Cessium 지형 정보의 높이를 얻어 자동차의 높이를 설정해 보았다.높이를 얻으려면 clamToHeight() 방법을 사용합니다.
제공되는 높이는 타원체의 높이(Ellipsoid.WGS84)에 따라 타원체의 높이입니다.
이것은 결코 평균 해면의 높이에서 온 것이 아니다.따라서 바다에서 샘플을 채취하면 반드시 0.0은 아니다.
그리고 자동차의 방향이 자동으로 변하지 않기 때문에 자동차 위치의 차이에 따라 각도를 설정했다.각도 설정은 HeadingPitchRoll 클래스를 사용합니다.
사실'Cesium'의 사이트에서 거의 모든 3D 모델의 각도 설정은orientation의 unitQuaternion으로 설정되었지만 설정값이 명확하지 않아 순조롭게 진행되지 못했다.그래서 포기하고 헤딩피치롤 반을 사용했다.
이 클래스에서 각 축의 각도만 설정하면 설정 값을 간단하게 변경할 수 있다.heading, pitch, roll에서 각 축의 각도를 설정하면 3D 모델이 회전합니다.왜 Cesium의 샘플은 이 처리 없이 자동으로 방향을 바꿨습니까?
다음은 고급 획득 및 설정 프로그램입니다.이번에는 경로와 자동차의 위치에 따라 데이터를 구분한다.
※ czml에서는 clamp To Ground가 진짜이지만 높이 설정이 이루어지지 않았습니다.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>
다음은 화면 이미지입니다.

좋은 웹페이지 즐겨찾기