WebGL に対応した Google Maps でマップの表示を 3D 対応する

投稿日: 投稿者: 管理者

参考：https://developers.google.com/maps/documentation/javascript/examples

Google Maps は徳治の WebGL 実装を行なっているが、Three.js でも任意の3Dオブジェクトを配置したりなど、とても柔軟に 3D アニメーションを実装できる。

下記はオープニングアニメーションを実装する例。

<!DOCTYPE html>
<html>
  <head>
    <title>Move Camera Easing</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./index.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=beta"
      async
    ></script>
  </body>
</html>

// index.js
import { Tween, update, Easing } from "@tweenjs/tween.js";
let map;
const cameraOptions = {
  tilt: 0,
  heading: 0,
  zoom: 3,
  center: { lat: 35.6594945, lng: 139.6999859 },
};
const mapOptions = {
  ...cameraOptions,
  mapId: "15431d2b469f209e",
};

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), mapOptions);
  // install Tweenjs with npm i @tweenjs/tween.js
  new Tween(cameraOptions) // Create a new tween that modifies 'cameraOptions'.
    .to({ tilt: 65, heading: 90, zoom: 18 }, 15000) // Move to destination in 15 second.
    .easing(Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
    .onUpdate(() => {
      map.moveCamera(cameraOptions);
    })
    .start(); // Start the tween immediately.

  // Setup the animation loop.
  function animate(time) {
    requestAnimationFrame(animate);
    update(time);
  }
  requestAnimationFrame(animate);
}