Maplat Core에서 라인을 지도에 표시

무엇을 쓸지 고민한 Maplat Advent Calendar 10일째입니다만, Maplat Core로 라인을 지도상에 표시하는 방법에 했습니다.
오늘 움직이는 것은 여기에서 확인할 수 있습니다. => CodeSandBox Maplat Advent Calendar day 10

어쨌든지도에 추가 한 라인이 정확한지도와 오래된지도에서 어떻게 달라 보이는지 보이는 것이 더 재미 있기 때문에지도 전환이있는 5 일째 코드를 기반으로 개조를 추가합니다. 합니다.
자바스크립트 파일만 변경하면 됩니다.

app.js

import "@maplat/core/dist/maplat_core.css";
import { MaplatApp } from "@maplat/core";

var option = {
  appid: "maplat_ac_day10"
};

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

5일째의 전환 버튼 누름시의 처리 부분의 전에, 선의 정의와 선을 draw 하는 처리를 더하고 있습니다.ring 변수에 경위도의 열을 설정해, 그것을 addLine 메소드를 사용해, draw 하는 선분의 ​​외형등도 stroke 로 지정하면서, 묘화 하고 있습니다.

실행한 느낌의 외형은 아래와 같은 느낌이 됩니다.



내일은 이 그린 라인 위에 버스를 달려 보자.