Terrain elevation queries¶

Make client side terrain elevation queries.

query_terrain_elevation.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Terrain elevation queries</title>
  <meta property="og:description" content="Make client side terrain elevation queries." />
  <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 QueryViewer extends maprayui.StandardUIViewer {
    constructor(container, apikey, options) {
      super(container, apikey, options);
      this.updater = null;
      this.total_time = 0.0;
    }

    setUpdater( updater ) {
      this.updater = updater;
    }

    onUpdateFrame(delta_time) {
      super.onUpdateFrame(delta_time);

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

  var apikey= "<YOUR_MAPRAY_API_KEY>";
  const uiviewer = new QueryViewer( "mapray-container", apikey, {
    atmosphere: new mapray.Atmosphere()
  } );

  uiviewer.viewer.atmosphere.setRayleigh(0.003);
  uiviewer.viewer.atmosphere.setMie(0.001);

  // Shinbashi Station in Tokyo JP,
  uiviewer.setCameraPosition({
    longitude: 138.175627,
    latitude: 35.535621,
    height: 15000
  });

  uiviewer.setLookAtPosition({
    longitude: 138.72736527,
    latitude: 35.36062805,
    height: 200
  });


  (async () => {

    // Start downloading the route data, and wait for map load to occur in parallel
    const response = await fetch('../data/log/tracks.geojson');
    const geojson = await response.json();

    // feature0 is route in the data
    const pinRoute = geojson.features[0].geometry.coordinates;
    // route`s array structure is [longitude, latitude, height]
    const route = pinRoute[0].flatMap( lon_lat => {
      return lon_lat.concat(0.0);
    })
    let length = [];
    for (let i=0; i < route.length/3; i++) {
      length.push( i );
    }

    // Create Pin Entity
    const pinEntity = new mapray.PinEntity(uiviewer.viewer.scene);
    pinEntity.addMakiIconPin("pitch-15", new mapray.GeoPoint(route[0], route[1], route[2]), { id: 0, size: 30, bg_color: [255/255, 198/255, 191/255], fg_color: [249/255, 247/255, 241/255] });
    pinEntity.altitude_mode = mapray.AltitudeMode.CLAMP;
    uiviewer.viewer.scene.addEntity(pinEntity);
    const pinEntry = pinEntity.getEntry(0);

    // Create Path Entity
    const pathEntity = new mapray.PathEntity(uiviewer.viewer.scene);
    pathEntity.altitude_mode = mapray.AltitudeMode.CLAMP;
    pathEntity.addPoints(route, length);
    pathEntity.setLineWidth(5);
    pathEntity.setColor(mapray.GeoMath.createVector3([255/255, 128/255, 174/255]));
    pathEntity.setUpperLength(0);
    uiviewer.viewer.scene.addEntity(pathEntity);

    // Create Text Entity
    const textEntity = new mapray.TextEntity(uiviewer.viewer.scene);
    textEntity.addText(uiviewer.viewer.getElevation(route[0], route[1]), new mapray.GeoPoint(route[0], route[1], route[2]), { id: 0, color: [131/255, 51/255, 235/255], font_size: 30 });
    // エンティティをシーンに追加
    uiviewer.viewer.scene.addEntity(textEntity);
    const textEntry = textEntity.getEntry(0);

    // Generate an animation block of the number type associated with the "log" entry.
    const number = mapray.animation.Type.find( "number" );
    let block = new mapray.animation.EasyBindingBlock();
    block.addEntry( "log", [number], null, value => {
      const position_value = Math.floor(value);
      if(route.length > position_value*3) {
        var altitude = uiviewer.viewer.getElevation(route[position_value*3+1], route[position_value*3+0]);
        const pin_position = new mapray.GeoPoint(route[position_value*3+0], route[position_value*3+1], altitude);
        const text_position = new mapray.GeoPoint(pin_position.longitude, pin_position.latitude, pin_position.altitude + 1000);
        pinEntry.setPosition(pin_position);
        textEntry.setPosition(text_position);
        textEntry.setText('Altitude:' + Math.floor(altitude) + 'm');
      }
      pathEntity.setUpperLength(value);
    } );

    // Generate Keyframe animation
    let keyframes = [];
    keyframes.push(mapray.animation.Time.fromNumber(0));
    keyframes.push(0);
    keyframes.push(mapray.animation.Time.fromNumber(120));
    keyframes.push(route.length/3);

    let curve = new mapray.animation.KFLinearCurve( number );
    curve.setKeyFrames(keyframes);
    let updater = new mapray.animation.Updater();

    // When the updater is called, it invokes the value according to the curve for that time.
    block.bind("log", updater, curve);
    uiviewer.setUpdater(updater);
  })();





</script>

Info

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