ベクター地図システム完全解説
株式会社 ONE COMPATH 本城博昭 清水珠里

株式会社ONE COMPATH(ワンコンパス)
1ONE COMPATH のご紹介

2

ONE COMPATH とは？
•

2019年4月1日 株式会社マピオンは 株式会社ONE COMPATHになりました•

ONE COMPATH はタイポではありません。
COM → 「共に」 PATH → 「道をつくる」という意味が込められた造語です•

地図検索サービスMapionに加え、もともと凸版印刷が運営していたShufoo!などのサービスを事業承継し、社名を変更しました©ONE COMPATH CO., LTD. All rights reserved.

3

会社概要
【社名】株式会社ONE COMPATH（ワン・コンパス）【ミッション】暮らしに新しい文化を創る【本社所在地】 東京都港区芝浦3-19-26 トッパン芝浦ビル【設立年月日】 1997年 1月 20日【代表者】代表取締役社長CEO 早川 礼
【資本金】 6億円
【従業員数】 130名（2020年4月時点/他社からの出向者含む）【業種】 情報通信業（インターネットサービス）【OSGeo日本支部 団体会員 】©ONE COMPATH CO., LTD. All rights reserved.

4

サービス紹介5地図検索サービス Mapion• “迷わない地図”と“見て楽しめる地図”を両立した日本最大級の地図検索サービスMapion（マピオン）。周辺スポット検索やルート検索、乗換案内に天気予報など、おでかけに便利な情報も掲載。
• 月間UU 1200万人• 日本で最初のインターネット地図• https://www.mapion.co.jp/

キョリ測
ドライブルート
季節特集
住まい探し©ONE COMPATH CO., LTD. All rights reserved.

6法人向け地図サービス MapionBiz !!new!!

• マピオンの法人向けサービスはMapionBizに• プロモーションにもマーケティングにも。様々なビジネスシー

ンで活用できる地図API、ASP、コンテンツを提供

えらべる地図デザイン• 取り扱い店舗検索サービスや店舗検索サービスに加え、地図/検索API利用も可能• 店舗データとGoogleマイビジネスの連携を行うオプションあり• https://www.mapion.co.jp/sales/©ONE COMPATH CO., LTD. All rights reserved.

7

日本最大級 電子チラシサービス Shufoo!

• いつでも無料でチラシが見られる日本最大級の電子チラシサービス。大手スーパーはもちろん、ドラッグストアや家電量販店など、毎日のお買い物に便利なお店のチラシをたくさん掲載• 月間UU 1600万人

シュフースーパー/小石川店• 月間PV 4.5億回

生鮮特価市！鮮度自慢の食材がとにかく安• 掲載店舗 12万店舗

い！！
シュフードスーパー/芝浦店• https://www.shufoo.net/

春の新生活 大放出！

©ONE COMPATH CO., LTD. All rights reserved.

8地域名産品が当たるウォーキングアプリ あるくと

• スマホを持って歩くだけで日本全国、地域の名産品が無料で当たる、一歩先行

くウォーキングアプリ。
• 90万人以上が利用• https://www.arukuto.jp/

賞品が当たる

キャラをコレクション

ランキングで競える

様々なミッション©ONE COMPATH CO., LTD. All rights reserved.

9

家事代行サービスの比較検討サイト カジドレ !!new!!

• 2020月8月本格リリース！

• 家事代行・ハウスクリーニングの比較検討ならカジドレ！

料金や条件、口コミ・評価から徹底比較！

• https://www.kajidore.com/©ONE COMPATH CO., LTD. All rights reserved.

10タイルセットの紹介

11デフォルト・境界線・陰影起伏図・等高線©ONE COMPATH CO., LTD. All rights reserved.

12主なタイルセット•

デフォルト••

境界線••

マピオン標準のタイルセット

境界線を強調したタイルセット

陰影起伏図
•

元データは国土地理院の基盤地図情報数値標高モデル••

Mapboxのelevation data仕様に準拠•••

GeoTIFF形式でDBに保存して利用標高の値をRGB値にencodeしてpng形式で保存

スタイルファイルではtype=raster-demとして利用する

等高線•

陰影起伏図タイルセットから等高線を求めベクタータイル化したもの©ONE COMPATH CO., LTD. All rights reserved.

13タイル生成の仕組み

14タイル生成 システム構成図©ONE COMPATH CO., LTD. All rights reserved.

15タイル生成システムシーケンス図©ONE COMPATH CO., LTD. All rights reserved.

16

特徴
•

DB情報, SQLを設定ファイルに外出し•どんなタイルも簡単に作成できる•

複数サーバで分散して生成•生成が必要なタイルのタイルIDを事前にリスト化•

生成不要な海タイルの判定処理がなくなるので生成時間短縮•

PostGISのST_AsMVTでMVT化•

タイルは複数のサーバで共有したいのでS3に保存•

EFSにMBTilesが理想だが料金が©ONE COMPATH CO., LTD. All rights reserved.

17

ST_AsMVTについて••

PostGISのST_AsMVT関数を使ってMVT化•

当初はmapnikでMVT化•

Feature IDサポートが追加されたPostGIS3.0が出てから移行•

正確にはRDSにPostgres12がリリースされてから•MapnikはFeature IDを自分で設定できない

高速•とは言え複数DBだとdblink or MVT結合しなければいけずそうなると大差ない©ONE COMPATH CO., LTD. All rights reserved.

18

旧SQLの雛形
SELECT
id,
ST_AsGeoJSON(ST_Transform(ST_Simplify(ST_Transform(geom, 3857), map.pixel_at_zoom({z})), 4326)
) geom_geojson
FROM (SELECT
id,(ST_Dump(
map.safe_intersection(geom, ST_Transform(map.tile_to_box({x}, {y}, {z}, 2), 4612)))).geom geom
FROM
contour_polygon
WHERE
geom && ST_Transform(map.tile_to_box({x}, {y}, {z}, 2), 4612)) a;©ONE COMPATH CO., LTD. All rights reserved.

19

新SQLの雛形
WITH mvtgeom AS(SELECTid,
ST_AsMVTGeom(
ST_SimplifyPreserveTopology(
ST_Transform((ST_Dump(geom)).geom, 3857),
map.pixel_at_zoom({z})),
ST_TileEnvelope({z}, {x}, {y})) geomFROM
contour_polygon
WHERE
geom && ST_Transform(ST_TileEnvelope({z}, {x}, {y}), 4612))
SELECT ST_AsMVT(mvtgeom, 'contour_polygon', 4096, 'geom', 'id') mvt FROM mvtgeom;©ONE COMPATH CO., LTD. All rights reserved.

20タイル生成システムシーケンス図（旧）©ONE COMPATH CO., LTD. All rights reserved.

21タイル生成システムシーケンス図（新を再度）©ONE COMPATH CO., LTD. All rights reserved.

22タイル生成の課題•

ファイルサイズの肥大化••

単純化とのトレードオフ

生成時間の短縮•

サーバを増やせばその分短くなるが費用が課題•

Rustで書き直してみたけど大差なし（ボトルネックはSQL）©ONE COMPATH CO., LTD. All rights reserved.

23

タイル配信の仕組み

24タイル配信 システム構成図©ONE COMPATH CO., LTD. All rights reserved.

25

特徴• タイル配信サーバはタイルその他を配信
•

タイル

•

StaticMap•

スタイルファイル

•アイコン

•

フォント

•など

• Mapbox同様JWT形式のアクセストークンで認証• タイルは複数のタイルセットを1つのMVTとして配信可能• フォントも同様©ONE COMPATH CO., LTD. All rights reserved.

26

スタイルファイルの製作

27

MVT-Styler©ONE COMPATH CO., LTD. All rights reserved.

28

スタイルファイル製作について•

MVT-Stylerを独自に拡張して利用••

低レベルで製作するため描画を高速にする工夫•

var,let,sort-keyを利用してlayerをなるべくまとめる••

Layerが多いとレンダリング処理が重くなる

ローカルフォントを使用•

JS/iOS/Androidそれぞれ指定方法が違うので注意•

iosの地図マピオンではシステムフォントのヒラギノゴシック（Regular/Bold）,ヒラギノ明朝を使うように設定©ONE COMPATH CO., LTD. All rights reserved.

29

2020年11月
地図マピオンアプリ（iOS版）
大幅リニューアル！
30ついにベクタータイルがデフォルトに！！！！

ラスタータイルも選択可能©ONE COMPATH CO., LTD. All rights reserved.

31検索機能も大幅に改善！
カテゴリをタップするだけで周辺を検索

起動と同時に最寄駅/海抜がわかる！

ワンタップで日の出日の入り時間も確認可能©ONE COMPATH CO., LTD. All rights reserved.

32

境界マップ追加

飛び地もバッチリ！

©ONE COMPATH CO., LTD. All rights reserved.

33

えきのなまえマップ追加

駅名/自治体名をひらがなで表記

住所などの情報もひらがなに©ONE COMPATH CO., LTD. All rights reserved.

34

ありがとうございました35