Maplat Core에서 옛지도 위에 버스를 달려보세요

Maplat Advent Calendar 11일째입니다만, Maplat Core로 고지도 위에 버스를 달려 봅니다.
오늘 움직이는 것은 여기에서 확인할 수 있습니다. => CodeSandBox Maplat Advent Calendar day 11

달리는 것은 어제의 라인 위의 경로이므로, 베이스는 어제의 코드를 바탕으로 개조합시다.
버스를 달리기 때문에 버스 아이콘 이미지 parts/blue_bus.png 1도 추가해 둡니다.

「버스를 달리게 한다」의 정의입니다만, 경로를 20분할해, 그 선상의 점을 1초마다 이동해, 20초로 경로를 일주하도록(듯이), 버스 아이콘을 이동시키는 것으로 합시다.
경로를 20분할해, 그 선상의 점을 취한다, 라고 하는 처리를 실시하기 위해서 필요한 Javascript 모듈을 도입해 둡니다.
구체적으로는 @turf/helpers , @turf/length , @turf/line-chunk , @turf/explode 당을 로드해 둡니다.

그런 다음 아래와 같이 코드를 변경합니다.

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";

var option = {
  appid: "maplat_ac_day11"
};

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);
    return nodes.features[0].geometry.coordinates;
  });
  app.addMarker({
    id: "moveMarker",
    lat: points[0][1],
    lng: points[0][0],
    icon: "parts/blue_bus.png"
  });
  console.log(points);
  var index = 0;
  var regularRun = function() {
    var point = points[index];
    app.updateMarker("moveMarker", {
      lat: point[1],
      lng: point[0]
    });
    index = index + 1;
    if (index > 19) index = 0;
    setTimeout(regularRun, 1000);
  };
  regularRun();
});

var ringFeature = ... 근처부터 뒤가 추가 부분으로, 뭐 이 변은 Maplat의 사용법이 아니고 Turf.js 의 사용법이 됩니다만, lineString 로 경로의 좌표열을 LineStirng의 GeoJson 객체로 해, length 길이를 측정합니다.
그런 다음 길이를 20으로 나누고 lineChunk부딪힌 각 라인에 대해 루프를 돌려, explode 로 각 선분의 선두의 점을 취득해, 그 좌표를 취득해 버스를 움직이기 위한 좌표열을 생성하고 있습니다.

그 후, setTimeout 로 1초마다의 처리를 실행해, 그 때마다 다음의 좌표로 마커의 속성을 app.updateMarker 하고, 버스의 위치를 ​​이동하고 있습니다.

실행한 모습은 이런 느낌이 됩니다.



좀 재미 없어?

이전, 호리에몬 박람회라는 이벤트에서 공식 쪽이 Stroly라는 Maplat 라이크한 서비스를 사용해 공식 지도를 전달하고 있었을 때에 홀리에몬의 현재 위치를지도에 표시하기 위해 수동으로 위치를 변경했다는 트윗을 보았습니다만,

Maplat라면, 홀리에몬에 GPS 디바이스에서도 갖게 해 현재지를 상시 클라우드에 업시켜 두면, API로 자동으로 홀리에몬 현재지를 갱신할 수 있으므로, 운영 씨는 무척 편해지네요. 그리고, Maplat는 홀리에몬 박람회의 도메인상에서 동작시킬 수도 있고, 오픈 소스이므로 무료로 이용할 수도 있고. 내일은, 조금 더 비틀어 「고지도 위에, 깜박이는 버스를 달리게 해」합시다.

---

(c) Font Awesome  ↩