低性能PCによるIllustratorからの地図タイル出力ガイド

2019/06/30修正
2019/08/02重要追記

(2019/08/02重要追記)この記事に記載した方法にうんざりしたので、後日自作しました。Illustratorから地図タイルを出力する際に、下記のIllustrator拡張機能もぜひ利用してください。
https://github.com/busroutemap/illustrator-to-MapTiles

前日談

leaflet.jsを使い、バスマップと地理院地図を重ね合わせようとしていました。Adobe Illustratorで地図タイルに対応したバスマップを作り、「あとはleaflet.js向けに地図タイル画像を一斉出力すれば完成だ！」と軽く考えていた所、非常に苦労しました。

何に苦労したのか、ポイントにまとめるとこうなります。

• 出力する地図タイルの量がエグい
  • 最終的に約18000個出力した
• Illustratorからの出力では上書き保存される
  • 出力名称(66).pngとかには出力しない
• PC性能が低い
  • 力技による問題回避が困難

以上を踏まえつつ、この記事ではAdobe Illustratorから地図タイルを出力する際の流れを触れます。ざっくりとした雑な説明なので、もし分からなければ気軽に聞いて下さい。

実際に用いた、外部ツール使用ルート

さんざん検討した結果、Illustratorやbridgeのみで頼る方法は、結局断念。外部ツールを用いることにしました。正直これくらいのことはAdobeで済ませられそうな気もするのだけれど、自分が知らないだけなのかな？

ルート方針

1枚または少数枚の特大画像を切り分け、切り分け時の命名規則に基づいて振り分ける。

(2019/03/15 17:23追記)画像にするとこんな感じです。

使用ツール

• Adobe Illustrator
  • 高機能デザインソフト、現在はサブスクリプション制
  • 学生プランの値上げは回避された
• E-cutter
  • E-cutter
  • 画像分割を行うフリーソフト
  • 高機能で動作も快適
• Flexible Renamer
  • Flexible Renamer v8.4
  • flexrena84などと検索すれば出てくる
  • 骨董品だが高機能なフリーソフト
• movefiles
  • movefiles
  • 国宝埋蔵文化財級の、ファイル振り分けフリーソフト
  • 使用方法がシンプル
  • xlsに基づき振り分けを行う
  • 2006年製なのでwindowsVersionが上がれば使えなくなる可能性も？

手順詳細

1. Illustratorで地図全体を1枚の画像として書き出す

   • この時、zoomLevelに基づき出力する
     • 256px*地図タイル個数が1辺
   • 複数サイズを出力し、zoomLevelの違う地図タイルを作ることも可能
     • その際はここで、スクリーン用に書き出しの0.5xや2xを用いると良い
     • zoomLevelを1上げるならば、縦横2倍のpxで出力すれば良い
   • zoomLevelが大きく、PC性能上書き出せないなら複数枚で
     • 自分のPCだと10000*20000が限度でした
     • zoomLevel16だけは2枚に分割して出力しています
     • その際は、1枚を以降の手順の最後まで進めてから、別の1枚を進める

2. E-cutterで画像を分割する

   • ソフトの設定で256px*256pxで分割することを指定
   • 分割先のフォルダもここで指定
   • 縦_横という番号を命名規則に
     • 縦の数字に基づいて、後に分割した画像を振り分ける為
     • 未だにどちらが列でどちらが行か把握していない
     • map16z.pngが分割されて、map16z_26_43.pngなどになる
     • _26や_43は分割画像の縦横座標
     • この時点ではサイズのみzxyに対応
     • xy座標には対応していない

3. flexrenaで空のフォルダを一括生成する

   • movefilesは埋蔵文化財なので、フォルダがないと振り分けない
   • flexrenaの1つの、連番オブジェクト生成を使う
     • 自分の場合は80個フォルダが必要で、手作業は厳しかった
     • ステップ数1で開始番号を、自作マップが持つ左上x座標に
   • フォルダ名称は該当ズームレベルの該当{x}を記載
     • zxy方式だとz/x/y.png
     • 自作マップとzxy座標の対応の把握が必要
     • 自分は座標左上を基準に算出した
     • zが1増えると、自作マップ左上の対応座標x,yがそれぞれ2倍になる
     • zが1増えると、必要なフォルダ数も2倍になる

4. movefilesを用いて振り分ける

   • xlsに振り分け基準を記載する
     • 例えば、切り分けた画像の縦列00が57154フォルダ、01が57177フォルダ……とコピーする必要があるとする
     • map16z_00*と条件を記載し、コピー先57154フォルダを指定する
     • 縦は43個に切りわけ、map16z_00からmap16z_42まであるとすれば、43個の条件を記す
     • ただしxlsなので、連番生成は簡単、選択範囲を下に引っ張る
     • 連番生成を知らない方は「excel 連番」などと検索
   • 実行ボタンを押すと、他の画面は操作できない。大人しく待つ

5. flexrenaで名称を変更する

   • この時点ではまだ_26や_43といった画像座標が残っている
     • 例えば57190フォルダにはmap16z_26_00.pngからmap16z_26_43.pngまであるかもしれない
   • 既に各フォルダに正しい画像は振り分けられているのでmap16z_26_は消す
     • 例えば文字列置換で、置換前をmap16z_\d\d_と指定すれば、43.pngのみになる
   • 文字列を消した後、画像の連番番号を調整する
   • y座標に対応させるには、数字調整で全ての画像に一定の数値を足し算する
     • 例えば自分はzoom16で25824を足した。
     • これは自作バスマップの左上の座標25824が、切り分けの横座標00と対応しているから

これで地図タイル生成が完了です。

手順採用理由

1. 手順が多そうに見えて実は少ない
2. 長方形であればどんなサイズでも対応可能
3. ただし初回のpng出力がグラボか何かに依存？
   • 自分は10000*20000程度が限度でした

手順が少ないものの、数個以上のzoomLevelだとしんどくなってしまうのも確か。この辺りは自動化しにくく、外部ツールの限界を感じました。

---

その他注意点

354バイトの透明pngは、無理に消さない方が良いかも。というのも、1度KBサイズを基準に消そうとしたら、390バイトなど、他の微妙なサイズのpngも消してしまって。ゴミ箱から戻したり、手順をやり直すなど大変でした。最終的に、354バイトの透明画像pngを捨てるのは、処理に時間もかかるので、自分は割り切って残しました。
(2019/06/30追記)ここはadobeBridgeの出番！サイズの小さい順にサブフォルダ含めて並べ、354バイトのもののみ消すことが可能です。自分の作ったデータは7割方が空pngでした、笑えない。

その他tips

どうやらフォルダ生成は下のようなことでも可能

ASCIIの記事
にこんなものが。

makefolder.bat

for /f %%a in (%1) do md %%a

と書き込んだ.batに、生成したいフォルダを記したlist.txtを載せると、その場所にフォルダを作ってくれるというもの。Adobe共有フォルダ内だと失敗するので注意。

もしかしたら、.batをいじることで、作業を大幅に省力化できるかも？などと思ったり思わなかったり。機会があれば次に試してみます。

タイル座標が分からないので確認したい

地理院のサイトで見ることが可能、自作バスマップの対応zxyを参照するのに非常に役立ちました。

アートボード名称一括変更jsx

今回は使わなかった"高性能PCの力技ルート"などで役立ちそうです。

maptiler

基本有料だが、今回のしんどい出力をワンクリック程度で全部してくれるスグレモノソフト。今回自分が取り上げた出力作業をしたくないなら、このソフトの無料プランで試用する価値あり！散々悩んで結局自分は使用しないことにしたものの、複数zoomLevel出力なども同時に出してくれるので、本格的にやりたい方はmaptilerが良さそう。

終わりに

まさか10年以上前のツールを使うことになるとは思わなかった、というのが本音です。Adobeで簡単に出来そうなことも、穴があって何故か躓くなど、試行錯誤に時間がかかってしまいました。もっと賢い方法があるような気もするので、ご存知ならぜひ教えてほしいです。

それと宣伝を。上記方法で18000個の画像を出力した、自作バスマップと地理院地図を重ねたものが公開されています。ぜひ覗いて下さい。