セルフホスティングのMapboxベクタータイル

FOSS4Gでの講演で示されているように、Mapbox StudioはMapboxベクタータイルを作成し、それらを.mbtilesファイルとしてエクスポートすることができます。

mapbox-gl.jsライブラリはには、動的なスタイルを使用して、クライアント（ブラウザ）側にMapboxベクトルタイルをレンダリングすることができます。

欠けている部分：.mbtilesmapbox-gl.jsでそれらを使用できるように、Mapboxベクタータイル（）を自己ホストするにはどうすればよいですか？

Mapbox StudioはベクタータイルをMapboxサーバーにアップロードし、タイルをホストできることを知っています。しかし、それは私には選択肢ではありません。ベクタータイルを自分のサーバーでホストしたいのです。

以下のTileStreamアプローチは、行き止まりであることが判明しました。Tileliveを使用した実用的なソリューションの私の答えをご覧ください。

ファイルからイメージタイルを提供できるTileStreamを試しました.mbtiles。

私のウェブページはmapbox-gl v0.4.0を使用しています：

<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.4.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.4.0/mapbox-gl.js'></script>

JavaScriptスクリプトでmapboxgl.Mapを作成します。

  var map = new mapboxgl.Map({
    container: 'map',
    center: [46.8104, 8.2452],
    zoom: 9,
    style: 'c.json'
  });

c.jsonスタイルファイルは、ベクトルタイルソースを設定します。

{
  "version": 6,
  "sprite": "https://www.mapbox.com/mapbox-gl-styles/sprites/bright",
  "glyphs": "mapbox://fontstack/{fontstack}/{range}.pbf",
  "constants": {
    "@land": "#808080",
    "@earth": "#805040",
    "@water": "#a0c8f0",
    "@road": "#000000"
  },
  "sources": {
    "osm_roads": {
      "type": "vector",
      "url": "tile.json"
    }
  },
  "layers": [{
    "id": "background",
    "type": "background",
    "paint": {
      "background-color": "@land"
    }
  }, {
    "id": "roads",
    "type": "line",
    "source": "osm_roads",
    "source-layer": "roads",
    "paint": {
      "line-color": "@road"
    }
  }]
}

...次のTileJSON仕様でtile.json：

{
  "tilejson": "2.1.0",
  "tiles": [
    "http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.png"
  ],
  "minzoom": 0,
  "maxzoom": 12
}

...で実行されているTileStreamサーバーを指しますlocalhost:8888。TileStreamが開始されました：

node index.js start --tiles="..\tiles"

...ここで、..\tilesフォルダにはosm_roads.mbtilesファイルが含まれています。

この設定では、ウェブページを開くことができますが、背景レイヤーのみが表示されます。ブラウザーのネットワークトレースでは、ズームインするとタイルが実際に読み込まれていることがわかりますが、ブラウザーのJavaScriptエラーコンソールには次の形式のエラーがいくつか含まれています。

Error: Invalid UTF-8 codepoint: 160      in mapbox-gl.js:7

ベクタータイルは.png画像ではなく、ProtoBufファイルであるため、タイルURL http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.pbfは実際にはより意味がありますが、それは機能しません。

何か案は？

@グレッグで指摘したように、代わりにTileStream（私の最初の試み）あなたが使用する必要がありますTileliveを独自のベクトルタイルをホストします。

Tileliveはサーバー自体ではなく、さまざまなソースのさまざまな形式のタイルを処理するバックエンドフレームワークです。ただし、Node.jsに基づいているため、非常に簡単な方法でサーバーに変換できます。.mbtilesMapbox Studioによってエクスポートされたソースからタイルを読み取るには、node-mbtiles tileliveモジュールが必要です。

サイドノート：現在のMapbox Studioには、選択した出力先にエクスポートされたファイルが表示されないようにするWindowsおよびOS Xのバグがあり.mbtilesます。回避策：で最新のexport-xxxxxxxx.mbtilesファイルを取得するだけです~/.mapbox-studio/cache。

Express.jsをWebアプリサーバーとして使用する2つのサーバー実装（alexbirkettによるten20 tileサーバーとhanchaoによるTileServer）を見つけました。

以下は、これらの実装に大まかに基づいた私の最小限のアプローチです。

1. Node.jsをインストールする
2. ノードパッケージを取得します npm install tilelive mbtiles express

3. ファイルにサーバーを実装しますserver.js。

   var express = require('express');
   var http = require('http');
   var app = express();
   var tilelive = require('tilelive');
   require('mbtiles').registerProtocols(tilelive);
   
   //Depending on the OS the path might need to be 'mbtiles:///' on OS X and linux
   tilelive.load('mbtiles://path/to/osm_roads.mbtiles', function(err, source) {
   
       if (err) {
           throw err;
       }
       app.set('port', 7777);
   
       app.use(function(req, res, next) {
           res.header("Access-Control-Allow-Origin", "*");
           res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
           next();
       });
   
       app.get(/^\/v2\/tiles\/(\d+)\/(\d+)\/(\d+).pbf$/, function(req, res){
   
           var z = req.params[0];
           var x = req.params[1];
           var y = req.params[2];
   
           console.log('get tile %d, %d, %d', z, x, y);
   
           source.getTile(z, x, y, function(err, tile, headers) {
               if (err) {
                   res.status(404)
                   res.send(err.message);
                   console.log(err.message);
               } else {
                 res.set(headers);
                 res.send(tile);
               }
           });
       });
   
       http.createServer(app).listen(app.get('port'), function() {
           console.log('Express server listening on port ' + app.get('port'));
       });
   });

   注：Access-Control-Allow-...ヘッダーはクロスオリジンリソース共有（CORS）を有効にするため、別のサーバーから提供されるWebページがタイルにアクセスできます。

4. で実行する node server.js

5. Mapbox GL JSを使用してWebページをセットアップしminimal.htmlます。

   <!DOCTYPE html >
   <html>
     <head>
       <meta charset='UTF-8'/>
       <title>Mapbox GL JS rendering my own tiles</title>
       <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.4.0/mapbox-gl.css' rel='stylesheet' />
       <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.4.0/mapbox-gl.js'></script>
       <style>
         body { margin:0; padding:0 }
         #map { position:absolute; top:0; bottom:50px; width:100%; }
       </style>
     </head>
     <body>
       <div id='map'>
       </div>
       <script>
         var map = new mapboxgl.Map({
           container: 'map',
           center: [46.8, 8.5],
           zoom: 7,
           style: 'minimal.json'
         });
       </script>
     </body>
   </html>

6. タイルソースの場所を示し、次のようにレイヤーをスタイルしますminimal.json。

   {
     "version": 6,
     "constants": {
       "@background": "#808080",
       "@road": "#000000"
     },
     "sources": {
       "osm_roads": {
         "type": "vector",
         "tiles": [
           "http://localhost:7777/v2/tiles/{z}/{x}/{y}.pbf"
         ],
         "minzoom": 0,
         "maxzoom": 12
       }
     },
     "layers": [{
       "id": "background",
       "type": "background",
       "paint": {
         "background-color": "@background"
       }
     }, {
       "id": "roads",
       "type": "line",
       "source": "osm_roads",
       "source-layer": "roads",
       "paint": {
         "line-color": "@road"
       }
     }]
   }

7. Webページを提供して喜ぶ。

ベクタータイルの独自のホスティングは比較的簡単です。MBTilesには、Webに公開する必要がある.pbfファイルが含まれています。それでおしまい。

おそらく最も簡単なのは、TileServer-PHPなどのシンプルなオープンソースサーバーを使用し、MBTilesファイルをプロジェクトファイルと同じフォルダーに配置することです。TileServerはすべてのホスティング設定を行います（CORS、TileJSON、正しいgzipヘッダーなど）。インストールとは、PHP対応のWebサーバーで解凍することです。

ラップトップでTileServer-PHPを起動する場合は、Dockerを使用できます。すぐに使用できるコンテナはDockerHubにあります。Mac OS XおよびWindowsでは、Kitematicグラフィカルユーザーインターフェイスhttps://kitematic.com/を使用して数分で実行されます。Kitematicで「tileserver-php」を検索し、プロジェクトを内部に備えたすぐに使用できるコンテナー/仮想マシンを起動します。次に、[ボリューム]をクリックして、MBTilesファイルのフォルダーにドロップします。ベクタータイルのホスティングを実行できます！

このようなベクタータイルは、MapBox Studioでソースとして開くか、MapBox GL JS WebGLビューアーで表示できます。

あなたのようなユーティリティを使用してMBtiles容器から個々の.pbfを解凍する場合は、技術的には、任意のWebサーバやクラウドストレージ上のプレーンなフォルダとしてベクトルタイルをホストすることも可能である、あるいはGitHubのmbutil TileJSON、CORSを設定します正しくgzipします。Bellowは、このようなアプローチを示すGitHubプロジェクトでもあります。

このビューアを試してください：

関連するリポジトリを参照してください：

• https://github.com/klokantech/tileserver-php
• https://github.com/klokantech/vector-tiles-sample
• https://github.com/klokantech/mapbox-gl-js-offline-example

ホーンを鳴らすのではなく、https：//github.com/spatialdev/PGRestAPIは、Mapbox Studioからの.mbtilesベクタータイルのエクスポートをホストしているプロジェクトです。

依然として多くのドキュメントが必要ですが、基本的に、.mbtilesファイルを/ data / pbf_mbtilesにドロップして、ノードアプリを再起動します。そのフォルダーを読み取り、ベクタータイルのエンドポイントを提供します。

また、/ data / shapefilesを参照し、.shpに基づいて動的なMapbox Vectorタイルをその場で作成します。PostGISインスタンスをポイントして、動的ベクトルタイルを取得することもできます。

https://github.com/SpatialServer/Leaflet.MapboxVectorTile、私たちが取り組んでいるLeaflet / Mapbox Vector Tileライブラリと組み合わせて使用​​します。

すばらしい質問をありがとう。彼らがついにベクタータイルの安定版をリリースしたことは知りませんでした。さらに、それはあなたの「何かのアイデア」のアイデアの源であるため、この答えに取り組む必要があります 質問。私はまだランニングスタジオを持っていません。

実行中の問題の1つは、tilejsonファイルを使用していることです。そのようなファイルを使用するには、tilejsonサービスが必要です。したがって、ソースセクションをインラインURLに変更する必要があると思います。試して

"sources": {
"osm_roads": {
  "type": "vector",
  "url": "http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.png"
 }
},

または

"sources": { 
"osm_orads": {
  "type": "vector",
  "tiles": [
    "http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.png"
  ],
  "minzoom": 0,
  "maxzoom": 12
 }
},

彼らmapbox://がプロトコルとして使用するとき、それは彼らのサービスのためのエイリアス/略記法です。ソースセクションは、ビデオの8時40分ごろに簡単に説明されました。

新しいベクタータイルプロセスの1つのステップは、データに必要なものを調整してベクターデータをキュレートすることです。もう1つの手順は、ベクターデータをMapBox Studioに戻し、データをレンダリングする/スタイルシートを作成することです。osm_roadsはステップ1で、c.jsonファイルはスタイルシートです。ビデオの15:01前後で説明したように、タイルライブサーバーとタイルストリームが必要になる場合があります。ビデオには、xmlファイルに追加のメタデータが必要であると書かれています。

ここで奇妙なのは、他の場所で.pbfとスタイルシートを参照することですが、提供するURLはベクターデータから生成されるタイル.pngファイルです。

MapBoxキーがある場合、あなたは言いません。あなた自身のホスティングでは、githubスタイルとグリフを自分のサーバーにコピーする必要があると思います。再びグリフタグにmapbox：//プロトコルがあることに注意してください。アイコンを介してPOIではなくプレーンラインとポリゴンをレンダリングしているため、これらの2つのタグは必要ないかもしれません。見てみる価値があります。

最後に、ビデオでは、生成されたベクターレイヤーをスタジオに戻し、スタイルを設定できることが示されています。最初にスタジオでベクターレイヤーを参照し、そこにid：backgroundおよびid：roadsスタイルを適用することができます。ビデオでは、タイルライブはMapBox Studioの舞台裏のサーバーであると述べています。ここでの考え方は、動的にレンダリングされる最終的なベクトルタイルを提供する前に、ステップ2の問題をすべて理解して修正することを確認することです。

https://github.com/osm2vectortiles/tileserver-gl-lightは、前述の主なソリューションよりもはるかに使いやすく、JSONファイルをいじる必要はありません。あなただけでそれを実行します

tileserver-gl-light filename.mbtiles

そして、それはあなたのためにタイルを提供しています。bright-v9などの事前に定義されたMapbox GLスタイルで動作します。サーバーを実行した後、単にタイルを消費しているものを指します

http：// localhost：8080 / styles / bright-v9.json

tilehut.jsサーバーを試してみてください。基本的に必要なことはすべて行います=ベクタータイルをホストし、素敵な例/ドキュメントが付属しています...そしてopenshiftと組み合わせて5分間のセットアップです。ご覧ください：

https://github.com/bg/tilehut https://github.com/bg/tilehut/tree/master/examples/simplemap_vector https://github.com/bg/tilehut#your-own-hosted-tileserver- 5分以内

後ほど、ただしGeoServerはpbfの（ベクタータイル形式）を提供します

タイルサービングで検討できるその他のオプション。

テゴラ（囲 Go）

瓦職人

このトピックの素晴らしい紹介がここにあります