国土地理院ベクトルタイルをモダンにする gsi-style-maniawase の設計と実装

国土地理院が公開している地理院地図Vectorのデータは、極めて高精度かつ詳細な地理空間情報を含んでいる。 これがオープンなデータとして利用できる意義は大きい。

しかし、スタイル定義におけるレイヤー数が膨大であるという課題がある。標準のスタイル（std）をベースに微調整を加えようとしても、大量のレイヤー間の整合性を保ちながら派生編集を行うのは非常に困難である。

そこで、カスタマイズのしやすさを最優先し、自分なりの「間に合わせ」として設計したのが gsi-style-maniawase である。本稿では、このスタイル（カートグラフィ）のの設計思想と、実装における技術的なアプローチを整理したい。

cat-in-136/gsi-style-maniawase

使用方法

サンプル

const map = new maplibregl.Map({
  container: 'map',
  style: 'https://cat-in-136.github.io/gsi-style-maniawase/gsi-style-maniawase.json',
  //style: 'https://cat-in-136.github.io/gsi-style-maniawase/gsi-style-maniawase-dark.json',//dark theme
  center: [139.767, 35.681],
  zoom: 13
});

技術的特徴とアプローチ

「間に合わせ」のデザインと簡略化の思想

本スタイルは「間に合わせ」という名の通り、表示デザインを大胆に簡略化している。 地形図としての厳密な様式よりも、Web地図としての視認性と実装の簡潔さを優先し、以下の指針で描画を簡略化した。

• 鉄道路線: 縞々（ケバ）模様などの複雑な描画は行わず、単なる線として表現する。
• 道路の重なり: 実際の複雑な上下関係を再現するのではなく、「高速道路 ＞ 国道 ＞ 主要地方道 ＞ 一般道」という優先度で一律に描画順序を整理した。
• 地下構造物: 地下にある道路などは、特殊な記号を使わず半透明にするのみとしている。
• 高架・橋梁 高架橋梁の表現を省いた

これを実現するために、公式のスタイル定義をベースとせず、完全にスクラッチでスタイルを書き起こした。こうすることで、スタイルの記述量を極限まで削ぎ落とすことができた。

Expression によるスタイルの統合

スタイルの記述にあたっては、複数の属性やズームレベルに応じたスタイルをなるべく一つのレイヤー定義に統合し、シンプルかつ直接的な記載を実現した。論理的に分けざるを得ないもの以外は統合することで、Style JSONの可読性を高めている。

また、川井らの文献 ¹ でも取り上げられているように、スタイルの軽量化や描画処理時間の短縮化にも寄与している。

カラーリングと視認性

地理院地図の標準デザインは、国土の正確な姿を記述する「地形図」としての役割を主眼としている。そのため、等高線による起伏の表現をはじめとする地形の表現や、行政境界といった「国土管理上の情報」を中心として厳格な配色ルールで描かれている。

この設計は、専門的な空間把握には極めて有効である一方、道路網や街中の行き先案内を優先する一般的な住宅地図やWeb地図のカラーリングとは対照的である。また、一般的な地図と比べると正直野暮ったく感じるところもある。

この課題に対し、本プロジェクトでは地図専用の配色体系ではなく、あえて汎用的なUIデザインパレットである Open Color を色彩体系に採用した。

具体的な配色の検討にあたっては、mghs15/styling-tools-for-gsi-optbv の basic スタイルを参考にしつつ、Open Color の色相へとシフトさせた。ダークモードの実装においては、ライトモードの定義をベースに AI を用いてダーク配色案を作成したのち、手動で調整する手法を採った。これにより、現代的なデジタルプロダクトに馴染む視認性を確保している。

TypeScript によるパラメータ化とビルドプロセス

本プロジェクトでは、地図のスタイル定義を TypeScript で記述する手法を採用した。すべての配色情報をパラメータとして管理することで、Light モードおよび Dark モードを生成できるようにしている。

具体的なワークフローとして、npm run build を実行することで、これら2つのバリエーションに対応した Style JSON が自動生成される仕組みを構築した。これにより、将来的な配色バリエーションの追加にも柔軟に対応が可能である。

また、TypeScriptを用いたことで、静的型付けの恩恵により、エディタによるコード補完と型チェックができ、開発効率と保守性が向上した。

今後の課題

今後の課題として、まずはアイコンとラベルの配置最適化が挙げられる。現状ではアイコンとラベルの重なりが目立つが、これをずらすことで視認性を高める必要がある。

配色に関して、現在一般道路の色と背景色が同一となっていてコントラストがとれないので見づらい問題がある。一般的な地図では道路の色をグレーにするか、背景色を暗くすることで一般道もきちんと見やすくしている。この考慮が抜けている。 アイコンが黒色を基調としているのでダークモードでは背景に埋もれる問題があり、白色の縁取り（halo）を付与する等の処理でコントラストを確保しなければならない。

その他の展望としてカスタマイズ性が考えられる。色を変えるなどカスタマイズするには、現在はソースコードを変更してビルドするカスタマイズしかない。これ以外に、簡易的に色を変更できるようにし、そのまま保存・書き出しができるようなユーザーインターフェースを用意することも可能ならばやりたい。

参考文献