Maplat Coreで古地図上を進行方向に視点を変えながら走り回ってみる

Maplat Advent Calendar 13日目ですが、Maplat Coreで古地図上を進行方向に視点を変えながら走り回ってみます。
今日の動くものはここで確認できます。 => CodeSandBox Maplat Advent Calendar day 13

昨日までは設定した経路の上をPOIピンを走らせてみましたが、今回は地図の中心点を経路の上を辿らせつつ、その進行方向が常に地図の上方向になるように視点を動かす（いわゆる「ヘッドアップ」というやつです）ことを実現してみます。

今回は経路に沿った方角を計算しないといけないということで、turf.jsの@turf/bearingというモジュールを依存に加えます。
それを使って、@turf/line-chunkで細切りにした線分の第一ノードと第二ノードの間の方角（北を0度として時計回りの度数表示）を、@turf/bearingで計算しています。
それの逆回転をdirection引数でapp.setViewpointに与えることで、ヘッドアップを実現しています。
現在位置の移動は、app.setViewpointに一緒に経緯度をlatitude、longitude引数で与えてやることで、移動を実現しています。

app.js

import "@maplat/core/dist/maplat_core.css";
import { MaplatApp } from "@maplat/core";
import { lineString } from "@turf/helpers";
import length from "@turf/length";
import lineChunk from "@turf/line-chunk";
import explode from "@turf/explode";
import bearing from "@turf/bearing";

var option = {
  appid: "maplat_ac_day13"
};

var app = new MaplatApp(option);
app.waitReady.then(function() {
  var ring = [
    [139.53184, 36.251013],
    [139.534322, 36.249581],
    [139.533853, 36.24814],
    [139.530729, 36.248649],
    [139.53184, 36.251013]
  ];
  app.addLine({
    lnglats: ring,
    stroke: {
      color: "#ffcc33",
      width: 2
    }
  });
  document.getElementById("gsi").addEventListener("click", function(e) {
    app.changeMap("gsi");
  });
  document.getElementById("osm").addEventListener("click", function(e) {
    app.changeMap("osm");
  });
  document.getElementById("ojo").addEventListener("click", function(e) {
    app.changeMap("tatebayashi_ojozu");
  });
  document.getElementById("aki").addEventListener("click", function(e) {
    app.changeMap("tatebayashi_castle_akimoto");
  });

  var ringFeature = lineString(ring);
  var ringLength = length(ringFeature, { units: "meters" });
  var divLength = ringLength / 20;
  var chunk = lineChunk(ringFeature, divLength, { units: "meters" });
  var points = chunk.features.map(function(line) {
    var nodes = explode(line);
    var start = nodes.features[0];
    var startPoint = start.geometry.coordinates;
    var end = nodes.features[1];
    var direction = bearing(start, end);
    return [startPoint[0], startPoint[1], direction];
  });
  app.setViewpoint({
    latitude: points[0][1],
    longitude: points[0][0],
    direction: -points[0][2]
  });
  console.log(points);
  var index = 0;
  var regularRun = function() {
    var point = points[index];
    app.setViewpoint({
      latitude: point[1],
      longitude: point[0],
      direction: -point[2]
    });
    index = index + 1;
    if (index > 19) index = 0;
    setTimeout(regularRun, 1000);
  };
  regularRun();
});

動作している状況は以下のような感じになります。

このAdvent Calendar連載記事、Maplatだけでなく何気にturf.jsの活用法紹介記事にもなってますね...

さて、明日もネタがない...何にしようか。