자체 호스팅 맵 박스 벡터 타일

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은 실제로 더 의미가 있지만 작동하지 않습니다.

어떤 아이디어?

@Greg가 지적한 것처럼 TileStream (첫 번째 시도) 대신 Tilelive 를 사용 하여 자신의 벡터 타일을 호스팅해야합니다.

Tilelive는 서버 자체가 아니라 소스마다 다른 형식의 타일을 처리하는 백엔드 프레임 워크입니다. 그러나 Node.js를 기반으로 하므로 매우 간단하게 서버로 전환 할 수 있습니다. .mbtilesMapbox Studio에서 내 보낸 소스 에서 타일을 읽으려면 node-mbtiles tilelive 모듈 이 필요합니다 .

참고 : 현재 Mapbox Studio에는 Windows 및 OS X 에서 버그 가있어 내 보낸 .mbtiles파일이 선택한 대상에 표시되지 않습니다. 해결 방법 :에서 최신 export-xxxxxxxx.mbtiles파일을 가져 오십시오 ~/.mapbox-studio/cache.

Express.js 를 웹 앱 서버로 사용하는 두 개의 서버 구현 ( alexbirkett의 ten20 타일 서버 및 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 (Cross-Origin Resource Sharing)를 활성화하므로 다른 서버에서 제공되는 웹 페이지가 타일에 액세스 할 수 있습니다.

4. 로 실행 node server.js

5. Mapbox GL JS를 사용하여 웹 페이지를 설정하십시오 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. 웹 페이지를 제공하고 기뻐하십시오.

자신 만의 벡터 타일 호스팅은 비교적 간단합니다. MBTiles에는 웹에 노출되어야하는 .pbf 파일이 포함되어 있습니다. 그게 다야.

TileServer-PHP 와 같은 간단한 오픈 소스 서버를 사용 하고 MBTiles 파일을 프로젝트 파일과 같은 폴더에 저장 하는 것이 가장 쉬운 방법 일 것 입니다. TileServer는 모든 호스팅 구성 (CORS, TileJSON, 올바른 gzip 헤더 등)을 수행합니다. 설치 란 PHP가 활성화 된 웹 서버에서 포장을 풀기 만하면됩니다.

랩톱에서 TileServer-PHP를 시작하려면 Docker를 사용하십시오. 사용 가능한 컨테이너는 DockerHub에 있습니다. Mac OS X 및 Windows에서는 Kitematic 그래픽 사용자 인터페이스 ( https://kitematic.com/) 로 몇 분 안에 실행됩니다 . Kitematic에서 "tileserver-php"를 검색하고 프로젝트 내부에서 컨테이너 / 가상 머신을 사용할 준비를 시작하십시오. 그런 다음 "볼륨"을 클릭하고 MBTiles 파일 폴더에 놓으십시오. 당신은 당신의 벡터 타일에 대한 실행 호스팅을 얻을!

이러한 벡터 타일은 MapBox Studio에서 소스로 열거 나 MapBox GL JS WebGL 뷰어로 표시 할 수 있습니다.

기술적으로 그것은 당신이 같은 유틸리티를 사용하여 MBtiles 컨테이너에서 개별 .pbf 압축을 풀 경우, 모든 웹 서버에서 일반 폴더 나 클라우드 스토리지, 또는 GitHub의 같은 벡터 타일을 호스팅도 가능하다 mbutil 의 CORS, TileJSON 설정 gzip을 올바르게 사용하십시오. Bellow는 이러한 접근 방식을 보여주는 GitHub 프로젝트입니다.

이 뷰어를 사용해보십시오.

관련 repos를 참조하십시오.

• 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 벡터 타일을 즉석에서 생성합니다. PostGIS 인스턴스를 가리키고 동적 벡터 타일을 얻을 수도 있습니다.

우리 는 또한 작업중 인 Leaflet / Mapbox Vector Tile 라이브러리 인 https://github.com/SpatialServer/Leaflet.MapboxVectorTile 과 함께 사용합니다 .

좋은 질문 감사합니다. 나는 그들이 마침내 벡터 타일의 안정적인 버전을 발표했다는 것을 몰랐다. 또한이 답변은 "모든 아이디어"에 대한 아이디어의 원천이므로이 답변을 사용해야 할 수도 있습니다. 질문. 아직 달리기 스튜디오가 없습니다.

나는 당신이 겪고있는 문제 중 하나가 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 주위에서 간략하게 논의되었습니다.

새로운 벡터 타일 프로세스의 한 단계는 데이터에서 원하는 것을 조정하여 벡터 데이터를 큐 레이트하는 것입니다. 다른 단계는 벡터 데이터를 MapBox Studio로 다시 가져 와서 데이터를 렌더링 / 스타일 시트를 만드는 것입니다. c.json 파일이 스타일 시트 인 동안 osm_roads는 1 단계가됩니다. 비디오의 15시 1 분쯤에 논의 된대로 타일 ​​라이브 서버가 타일 ​​스트림 을 구해야 할 수도 있습니다 . 비디오는 XML 파일에 추가 메타 데이터가 필요하다고 말합니다.

여기서 이상한 점은 .pbf 및 스타일 시트를 다른 곳에서 참조하지만 제공하는 URL은 벡터 데이터에서 생성되는 결과 타일 .png 파일입니다.

MapBox 키가 있으면 말하지 않습니다. 자신의 호스팅을 위해 github 스타일과 글리프 를 자신의 서버 에 복사 해야한다고 생각 합니다. glyphs 태그에는 mapbox : // 프로토콜이 있습니다. 아이콘을 통해 POI가 아닌 일반 선과 다각형을 렌더링하므로이 두 태그가 필요하지 않을 수 있습니다. 살펴볼 가치가 있습니다.

마지막으로, 비디오는 생성 된 벡터 레이어를 다시 스튜디오로 가져와 스타일을 지정할 수 있다고합니다. 벡터 레이어를 참조하고 먼저 스튜디오에서 id : background 및 id : roads 스타일을 적용 할 수 있습니다. 비디오는 타일 라이브가 MapBox Studio의 무대 뒤 서버라고 말합니다. 여기서 아이디어는 동적으로 렌더링되는 최종 벡터 타일을 제공하기 전에 두 단계의 모든 문제를 이해하고 수정했는지 확인하는 것입니다.

https://github.com/osm2vectortiles/tileserver-gl-light 는 언급 된 주요 솔루션보다 사용하기가 훨씬 쉽습니다 .JSON 파일을 다루지 않아도됩니다. 당신은 그냥 그것을 실행

tileserver-gl-light filename.mbtiles

그런 다음 타일을 제공합니다. 사전 정의 된 Mapbox GL 스타일 (예 : bright-v9)과 작동합니다. 서버를 실행 한 후에는 타일을 소비하는 대상을 가리 키기 만하면됩니다.

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

tilehut.js 서버를 사용해 볼 수 있습니다. 기본적으로 필요한 모든 것 = 벡터 타일 호스팅 및 멋진 예제 / 문서와 함께 제공됩니다 ... 오픈 쉬프트와 함께 사용하면 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 (벡터 타일 형식)를 제공합니다.

타일 ​​제공을 위해 고려할 수있는 다른 옵션;

테 골라 (필기)

타일러

이 주제에 대한 좋은 소개가 있습니다.