Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
11
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@honjo

ベクタータイルの作り方

ここでは位置データからベクタータイル(Protocol Buffers)を作成する方法を示します。
基本的には位置データをPostGISに格納し空間関数を駆使しタイル化したものをProtocol Buffersに変換するという流れになります。

vector-tile-flow.png

今回は、数値地図(国土基本情報)サンプルデータを空間データベースに投入し、リクエストのたびにベクタータイルを生成するサーバ(WebAPI)を立て、地図ライブラリを利用してウェブブラウザに表示させてみたいと思います。

完成図

suuchichizu.png

ソースコード

simple-vectorizer

これはベクタータイルを生成するシンプル実装のサーバですが、数値地図(国土基本情報)のデータを使ったサンプルをREADMEに記載しました。
この通りに実施していただければ、ローカルで動かすことができます。
以下、ポイントとなる部分を解説します。
(ちなみに、これを改造すれば静的ファイルとしてベクタータイルを生成することも可能なので、そういう用途があれば参考にしてください)

SQL解説

道路をベクタータイル化するサンプル.sql
SELECT
  rdctg,
  ST_AsGeoJSON(
    ST_Transform(
      ST_Simplify( -- サイズを抑えるためにラインを繋げて間引く
        ST_LineMerge(
          ST_Collect(geom)
        ),
        map.pixel_at_zoom({z})
      ),
      4326
    )
  ) AS geom_geojson
FROM (
  SELECT
    rdctg,
    (ST_Dump(
      map.safe_intersection( -- 対象のタイル内に完全に収めるためタイル外にはみ出した部分をカット
        geom,
        map.tile_to_box({x},{y},{z},2)
      )
    )).geom geom
  FROM
    rdcl
  WHERE
    geom && map.tile_to_box({x},{y},{z},2) -- 対象のタイル内に含まれるgeometryのみを抽出
) a GROUP BY a.rdctg;

このSQLの部分はsimple-vectorizerを利用する側で適宜作成します。(他のデータソースを利用する場合はそれにあったSQL文を書くことになります)
このようにSQLを書きさえすれば、後はプログラムがベクタータイル化してくれます。
今回のデータソースの道路では、その種別によって表現を変えたいためrdctgカラムを追加しています。
そして、SQL文の作成を助けるために汎用的な処理をFunction化して利用しています。

Function解説

  • map.tile_to_box(bigint, bigint, integer, integer)
    • タイル情報からBoundingBoxを求めます
  • map.pixel_at_zoom(integer)
    • そのズームに最適な係数を求めます
    • ST_SimplifyやST_SnapToGridでの利用を想定しています
  • map.safe_intersection(geometry, geometry)
    • セーフティなST_Intersectionです
    • ST_IntersectionでExceptionが発生した場合精度を下げてST_Intersectionします

補足

マピオンベクターのタイルはここで紹介した方法とは違い、もっと低レベルな方法で作成しています。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
11
Help us understand the problem. What are the problem?