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

Maplat Advent Calendar 12일째입니다만, Maplat Core로 고지도 위에 깜박이는 버스를 달려 봅니다.
이제 무슨 말을 하고 싶은지 스스로도 잘 모르겠습니다만, 오늘의 움직이는 것은 여기에서 확인할 수 있습니다. => CodeSandBox Maplat Advent Calendar day 12

요컨대, app.updateMarker 로 정보 갱신할 수 있는 것은 경위도 뿐만이 아니고, 아이콘 화상 정보를 갱신하면 화상도 바뀐다, 라고 하는 샘플이군요.

어제의 변경은 빨간색 버스 아이콘 이미지 parts/red_bus.png 업데이트 내용에 추가하고 있다는 것뿐입니다.

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

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];
    var icon = index % 2 ? "parts/red_bus.png" : "parts/blue_bus.png";
    app.updateMarker("moveMarker", {
      lat: point[1],
      lng: point[0],
      icon: icon
    });
    index = index + 1;
    if (index > 19) index = 0;
    setTimeout(regularRun, 1000);
  };
  regularRun();
});

그래서 아래와 같이 빨간색과 파란색으로 깜박이는 버스가 오래된 지도 위를 달리게 됩니다.

1

덧붙여서 icon 의 동작입니다만, 제 1 인수는 갱신하는 POI 핀의 ID, 제 2 인수는 갱신하는 데이터입니다만, 제 3 인수에 데이터를 덧쓰기할지 어떨지를 boolean 로 지정할 수 있습니다.
세 번째 인수가 기본값 (app.updateMarker)이면 두 번째 인수로 지정된 객체가 가진 속성 만 바뀝니다. 를 지정하면 두 번째 인수로 지정된 객체가 POI 핀의 데이터를 덮어씁니다.

내일은 핀이 아닌 지도의 시점을 경로에 맞추어 움직여 봅시다.
중심점뿐만 아니라지도의 각도도 진행 방향에 맞게 회전시켜 보겠습니다.
이른바 헤드업 뷰라는 녀석이네요.



(c) Font Awesome