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 의 활용법 소개 기사도 되고 있네요

글쎄, 내일도 자료가 없다 ... 무엇을 할까.