search

unvt / pm

UNVT Project Management
Creative Commons Zero v1.0 Universal
0 stars 2 forks source link

More rapid style editing / もっと速いスタイル編集 #13

Open hfu opened 4 years ago

hfu commented 4 years ago

This issue is about how we can edit the style more rapidly.

国連ベクトルタイルツールキットの現状

国連ベクトルタイルツールキットでは、style.json を記述するにあたり、エディタでレイヤ単位に HOCON ファイルを書いて、それを parse-hocon を使って JSON に組み上げるということをしています。

HOCON ファイル群の最良のサンプルは https://github.com/unvt/naru/tree/master/hocon にあり、HOCON ファイルを style.json に組み上げる Rake タスクは、次の通りです（permalink）。Tippecanoe が生成した中心経緯度を持ってくるようにしているので、少しだけややこしくなっていますが、基本は parse-hocon hocon/style.conf > docs/style.json です。

desc 'build style.json from HOCON descriptions'
task :style do
  require 'json'
  sh "parse-hocon hocon/style.conf > docs/style.json"
  center = JSON.parse(File.read('docs/zxy/metadata.json'))['center'].split(',')
    .map{|v| v.to_f }.slice(0, 2)
  style = JSON.parse(File.read('docs/style.json'))
  style['center'] = center
  File.write('docs/style.json', JSON.pretty_generate(style))
  sh "gl-style-validate docs/style.json"
end

スタイルを編集するための他の技術

ウェブベースの GUI エディタ

Mapbox Studio

Mapbox さんによる、優れた有償プロダクトであると認識しています。Mapbox でホストされているベクトルタイルに対してのみ使用可能なように設計されていると認識しています。　

Maputnik

Maputnik はウェブベースの style.json の GUI エディタです。長らく Mapbox Expressions に対応していませんでしたが、最近対応しました。

ウェブベースのテキストベースエディタ

MVT Styler

MVT Styler は style.json をテキストで書くタイプのウェブベースのエディタです。FOSS4G での発表 によれば、One compath さんでの使用実績があるもようです。

miya0001 commented 4 years ago

以下のようなコマンド体系でスタイルを作り始められるといいかもですね。 gl-style の部分はダミーです。

$ gi-style init tile.json // タイルJSONを読み込んでデフォルトのスタイルを生成
$ gl-style start // ローカルサーバーを起動して地図を表示
$ gl-style build // スタイルをビルド

コマンドの名前は unvt っぽい名前がいいかもですね。 あわよくば unvt という総合的なコマンドをつくって、そのなかにこのコマンドをいれるといいかもです。 たとえば unvt style init みたいな。僕がコミッターをしていた wp-cli はそういう構造で、サブコマンドごとにリポジトリを分けてメンテしやすくしています。

miya0001 commented 4 years ago

あと、作業用のスタイルのファイルは、YAML が記述が少なくていいかなと思いました。 僕たちがよく使うツールで Serverless Framework というツールがあるのですが、それは独自実装で YAML に外部ファイルをインクルードする機能や変数内に YAML を定義して再利用できるようにする機能があります。

version: 8
name: UNVT
sources:
  - unvt
      type: vector
      url: https://example.com/tiles.json
-- 中略 --
layers
  - id: background
    type: background
    paint:
      background-color: ${custom-background-color}

環境変数から値と取れるようにとかするとさらに再利用がさらに便利かもしれませんね。 たとえば direnv の.envrc に

export backgroudColor="#000000"

としておいて、スタイル内には ${env.backgroundColor} と記述するなど。

miya0001 commented 4 years ago

まとめると以下のようなツールがあるといいなと思っています。

miya0001 commented 4 years ago
miya0001 commented 4 years ago
hfu commented 4 years ago

ありがとうございます。HOCON は良いのですがややマイナーだったので、Serverless Framework で使われているような拡張を使って YAML ベースでできるというアイディアには魅力を感じています。

hfu commented 4 years ago

本件、コメント現在では hocon を用いた方法を継続しています。

サンプル