ベクトルタイル - izudon/izudon.github.io GitHub Wiki

技術解説

PMTiles

ベクトルタイルアドベントカレンダーを読み解く

3回目読んでみてもまだ完全には理解できていないという。

10 gh-pages でベクトルタイル

  1. Github Pages で日本地図のベクトルタイルを提供開始した。
    • 日本地図 <- リポジトリ
      工夫点
      • 1リポジトリあたり1GBの上限があり
        1リポジトリに全体を置くことができない。
      • このためズームレベルごとにリポジトリを作り、
        ズームレベルごとに分割配置することで乗り切った。
      • タイルの在所は以下のように記載すればよかった。
        https://hfu.github.io/jp1710_{z}/{x}/{y}.mvt
    • chome-vt <- 元ネタ というものも作った。
  2. 消費側 ・・・ Mapbox GL JS を使っているが・・・

編注:これがなんで重要かというと、Mapbox のサイトを見渡る限り、

  • Mapbox のスタイルを使えば綺麗な地図が手軽に使えますよ。
  • ただそのためにはトークンが必要で一定トラフィック以上は課金になりますよ。
  • もちろんそれ以外のやり方もありますけど。

とまぁこんな調子で全編書かれてあるわけで、 Mapbox のご厄介にならないでベクトルタイルをやるということを 諦めさせたいかのような書き方になっているからだ。

11 ArcGIS API for JavaScript

12 CORSしよう

  • CORS = Cross Origin Resource Sharering クロスオリジンリソース共有
    • 自サイト以外でも使える状態であること。
    • サーバドメインをまたがっても利用することが可能であること。
    • クロスサイトなんとかを防止するブラウザの機能等によって
      ブロックアウトされないこと。
    • 具体的には・・・
      1. HTTPS で提供されていること。
      2. access-control-allow-origin: * という
        HTTP ヘッダ がサーバから返ってくること。
    • Github Pagesデフォルト でこの2点を 満たしている
      1. 静的なコンテンツに限り
      2. アクセス制限をかけることなく
      3. 共有するというのが Github Pages の信条らしい。

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

FOSS4G Niigata 2019 - ango

Slack への引越しを伝えるスクリーンショット

支える技術