LoginSignup
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@snowdrops89(雪乃 雫)

Maplatを使ってみたよ！

Last updated at Posted at 2021-03-26

Maplatとは？

　現代の地図と古地図を重ねて表示の出来るライブラリです。

　私の知恵では技術的なご説明はカケラも分からず、真のすごさを十分には分かってないものと思われますが、とにかくこれは良い物です。遊べそう！

　Qiitaに、作者さまによる使い方説明記事があったので、それを見ながらやってみます！！
（記事は2019年のアドベントカレンダーで書かれており、現在は状況が異なる部分もあったので、私自身の記録も兼ねて、そうゆうことも補記していきます）

とりあえず地図作る

　記事とは順番が違いますけど、とりあえず表示する地図がなきゃ始まりませんからね。
　やっぱ、こうゆうのは、自前の地図でやるのが楽しいよね！
　現代の地図との対応点をマウスで編集出来て、タイルにして保存してくれるエディタが用意されています。素晴らしい☆
　折角なので、最新版をダウンロードしてきます。現在のパッケージ版の最新は0.4.1でした。
　MaplatEditor関連の記事は三部作になっていましたが、使用に難しいところはありませんでした。

MaplatEditorで不正確な古地図をマッピングする（１）インストール
MaplatEditorで不正確な古地図をマッピングする（２）画像登録
MaplatEditorで不正確な古地図をマッピングする（３）マッピング作業

　というわけで、超簡単なやつをマッピングしてみます！
　古地図側がかなり正確で、ふつーに重ねても重なるので、Maplatのしゅごさが全く伝わらないかもしれずスミマセンが、なんかこんな感じ？
Maplatスクショ.jpg

とりあえず重ねる

とりあえずcore

　ではでは、ここでようやく最初に戻って、ここのとうりにやっていきますです。

Maplat Core（UIなし版）をCDNから設定

　ふんふん。HTMLもCSSも、じゃばすくりぷとすら簡単ですね＾＾

マッピングした地図を使う

MaplatEditorでマッピングした地図をMaplat Coreに取り込む

  • まず、MaplatEditorで作成されたcompiledフォルダの中身のJSONさんをindex.html直下のmapsフォルダに入れる。（ややこしいけど、mapsの中身でも動くけどcompiledのやつのほうが早いんだそうです）
  • ローカルでやるなら、tilesフォルダをそのままindex.htmlと同じ所へコピーするだけでいいっぽい。

画像パーツの罠

　・・・と、楽勝な感じでしたが・・・最後のpartsです。
　おそらく当時と現在とでは、フォルダ構成が変わったっぽく、ダウンロードしてきたdistribution.zipの中にpartsとゆうフォルダはなく、代わりにあったimagesの中のファイル名も違っており、フォルダ名をリネームしただけでは出来ませんでした。
　捜索の結果、当時の0.6.2をダウンロードしてきて、記事の通りで出来ました！
　・・・が、いやいや、むしろ取り込むスクリプトの方を新しくしろって話ですよねｗ

折角なので最新版を使う

　リリースとなっているMaplat Coreの最新が0.8.4なので、そこだけ変えて、こんな感じ？

<script src="https://unpkg.com/@maplat/core@0.8.4/dist/maplat_core.js"></script>

　これで、imagesをindex.htmlと同じトコに置けば良くなりました。
　でも、本当の最新は、0.9.0なんだよねー。でもでも、普通にバージョンの部分だけ変えても動かないよ・・・と思っていたら、こうでした。

<script src="https://unpkg.com/@maplat/core@0.9.0/dist/assets/maplat_core.js"></script>

　「assets」というフォルダが追加されています。
　これにより、パーツ画像置き場は、index.htmlと同じ所にassetsを置き、その中にimagesを入れる、ということになっていました。

できました！

　というわけで、最新版を取り込むHTML。
　maplat_core.cssの方のURLも変えるのを忘れず。

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Maplat coreのテスト</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/@maplat/core@0.9.0/dist/assets/maplat_core.css"
    />
    <link rel="stylesheet" href="app.css" />
  </head>
  <body>
    <div class="mainview">
      <div id="map_div"></div>
    </div>
  </body>
  <script src="https://unpkg.com/@maplat/core@0.9.0/dist/assets/maplat_core.js"></script>
  <script src="app.js"></script>
</html>

　「app.css」の中身は変わらず。無ければ無いで普通に全画面表示になります。
　そして、設定のJSONさんは外出しにしたので、Javascriptは超短くなってよきー♪

Maplat Coreの設定を設定ファイルから行う

apps/Maplat_test_core.json
{
  "home_position": [140.75680304835672, 41.79692727057318],
  "default_zoom": 17,
  "start_from": "goryokaku",
  "sources": [
    {
      "mapID": "goryokaku",
      "label": "五稜郭三分十間図"
    },
    "osm"
  ]
}
app.js
var option = {
  appid: "Maplat_test_core",
};
Maplat.createObject(option).then(function(app) {
});

　フォルダ構成はこんな感じです。

test_core
 |  app.css
 |  app.js
 |  index.html
 +--apps
 |    Maplat_test_core.json
 \--assets
    +--images
    |    0beac2cb41dfab43ddfd9df80b32b85d.png
    |     (略)パーツ画像
 +--maps
 |   goryokaku.json
 \--tiles
    \--goryokaku
       +---0
      (略)地図のタイル画像

　サーバーにアップロードしないでお試しするにはlocalhostです。
　できました！

APIを使う

Maplat CoreでAPIから地図表示を切り替える

　まあ、地図はまだ一枚しか作っていませんが、古地図とOSMを切り替えることに関しては、記事のとうりですぐ出来ました☆
　が！
　前章で重ね合わせの表示、できました！　て思ったんですけれどね、どうしても、古地図が一番小さく縮小された状態からスタートしてしまうのでした。マウスで拡大出来るけど、ちょっと見栄えがよろしくない。

　設定ファイルのdefault_zoomの価は、start_fromで現代の地図を指定した際には有効ですが、古地図を指定した際には無効となってしまうようで、一体どうしたら・・・？（＠＿＠）
　と、なにぶんJavascriptにもJSONさんにも明るくないので、恐る恐る質問させて頂いたところ、すぐに丁寧なご回答を頂き、今のところ設定項目はまだ無いけど、APIから制御できますとのことで、setViewpointのAPIと、ついでに半透明の重ね合わせができるsetTransparencyのAPIを教えていただけたので、ここに書き残しておきます。

app.jp
var option = {
  appid: "Maplat_test_core",
};

Maplat.createObject(option).then(function(app) {
  const viewpoint = {
    zoom: 3  //古地図倍率
  }
  const ratio = 20;  //透明度(うっすらベース地図が透けるくらい)

  window.setTimeout(function(){
    app.setViewpoint(viewpoint);
    app.setTransparency(ratio);
  }, 1);

//ボタンで地図を切り替え
  document.getElementById("osm").addEventListener("click", function(e) {
    app.changeMap("osm");
  });
  document.getElementById("kochizu").addEventListener("click", function(e) {
    app.changeMap("goryokaku");
  });
});

　注意点としては、ボタンのイベントのような場合はいいんですが、マップを開いた時に反映させたいやつは、setTimeoutを噛ませないと、うまく作動しないようでした。価は１とかで大丈夫☆　動作上は全く問題ありません。

API

● setViewpoint(viewpoint)
引数viewpointはオブジェクト
x, y: 古地図の座標上でのx, y座標に移動します。左上が0,0原点の、元画像サイズでのピクセル座標です。
longitude, latitude: 地球上での経緯度(WGS84)です。
zoom: 古地図の座標上でのズームです。ズーム0は、古地図全体が256x256ピクセル以内に収まる大きさです。ズーム1はズーム0の縦横2倍（面積4倍）の大きさ、ズーム2はズーム0の縦横4倍（面積16倍）の大きさ...と倍々の大きさになっていって、元画像サイズになるズームサイズまで存在します。
mercZoom: メルカトル座標上でのズームです。世界全体が256x256ピクセルに収まるのをズーム0、ズームが2上がるごとに倍々になる、Googleマップのズームと同じです。
rotation: 古地図の正位置を角度0としての、回転量を指定します。
direction: 北が上になるのを角度0としての、回転量(方角)を指定します。
● setTransparency(ratio)
引数ratioは数値(0-100)
・価はベースの地図側の透明度（100で古地図が不可視となり、ベース地図のみの表示となる）
　色々お試しした結果、表示状態の地図を何％透過させて表示するかということでした。コレを設定した状態でベース側の地図を表示したら、単に薄く表示されます。
● changeMap(mapID)
引数mapIDは文字列
・設定のsourcesのmapIDで指定したもの。

動作確認

https://snowdrops89.github.io/Maplat_test/test_core/index.html

　できました！　やったね！！

つづきます

　今回は、とりあえずUIのないMaplatCoreでお試ししましたが、やっぱりかっこいいUIありを試したいよね☆
　地図も増やして、マーカー表示させたりして、色々遊ぼう♪
　そして・・・
　やっぱり、じゃばすくりぷとはツラいから、なでしこさんで使えるようにしたいなぁ。
　プログラムが出来れば、coreはcoreで、UIに縛られずに面白い使い方が出来るんじゃないかという気もしている。
　というわけで・・・プラグインを作ることにしよう、そうしよう。
　今回、なでしこのなの字もないのにタグ付けてましたが、そうゆうわけです。がんばる！

2
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?