Basic animation with UI Viewer¶

Basic animation sample utilizing Mapray animation engine through UIViewer

basic_animation_with_uiviewer.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Basic animation with UI Viewer</title>
  <meta property="og:description" content="Basic animation sample utilizing Mapray animation engine through UIViewer" />
  <script src="https://resource.mapray.com/mapray-js/v0.9.6/mapray.min.js"></script>
  <script src="https://resource.mapray.com/ui/v0.9.6/maprayui.min.js"></script>
  <link rel="stylesheet" href="https://resource.mapray.com/styles/v1/mapray.css">
  <style>
    body {margin: 0; padding: 0;}
    html, body, div#mapray-container { height: 100%; }
  </style>
</head>

<body>
<div id="mapray-container"></div>
</body>
</html>

<script>
  class AnimationView extends maprayui.StandardUIViewer {
    constructor(container, apikey, options) {
      super(container, apikey, options);

      // Create keyframes
      let curve = new mapray.animation.KFLinearCurve(mapray.animation.Type.find("number"));

      let keyframes = [];
      keyframes.push(mapray.animation.Time.fromNumber(0));
      keyframes.push(5.0);
      keyframes.push(mapray.animation.Time.fromNumber(10));
      keyframes.push(40.0);
      curve.setKeyFrames(keyframes);

      // Create Entity
      let pin_entity = new mapray.PinEntity(this.viewer.scene);
      let pin_point = new mapray.GeoPoint(138.238888, 35.674444, 3200);
      pin_entity.addPin(pin_point, { id: 0, size: 40, bg_color: [1, 0, 0] });
      this.viewer.scene.addEntity(pin_entity);

      // Get default animation entry.
      let pin = this.viewer.scene.getEntity(0).getEntry(0);

      // Setting up a function to update animations for an Entity
      this.updater = new mapray.animation.Updater();
      pin.animation.bind("size", this.updater, curve);

      this.total_time = 0.0;
    }

    onUpdateFrame(delta_time) {
      super.onUpdateFrame(delta_time);
      this.total_time += delta_time;
      // calculate the frame
      this.updater.update(mapray.animation.Time.fromNumber(this.total_time));
      if (this.total_time > 10.0) {
        this.total_time = 0.0;
      }
    }
  }

  // Set up your access token, which can be created in Mapray Cloud.
  var apikey= "<YOUR_MAPRAY_API_KEY>";

  // The StandardUIView in the ui package includes mouse-based camera manipulation.
  var uiviewer = new AnimationView( "mapray-container", apikey);

  uiviewer.setCameraPosition({
    longitude: 138.368549,
    latitude: 35.658995,
    height: 10000
  });

  uiviewer.setLookAtPosition({
    longitude: 138.238888,
    latitude:  35.674444,
    height: 2800
  });


</script>

Info

このサンプルコードは、<YOUR_MAPRAY_API_KEY>を、あなたのMapray CloudアカウントのAPI Keyに置き換えるまで、期待通りに動作しません。