Kendi kendine barındırma Mapbox vektör fayans

FOSS4G'deki bir konuşmada sunulduğu gibi Mapbox Studio, Mapbox vektör karoları oluşturmaya ve bunları bir .mbtilesdosya olarak dışa aktarmaya izin verir .

Mapbox-gl.js kütüphane dinamik stil kullanılır ve (tarayıcı) yan istemci üzerinde Mapbox vektör fayans hale edilebilir.

Kayıp kısım: Mapbox vector tiles ( .mbtiles) 'ı nasıl eşleştirebilirim ki onları mapbox-gl.js ile tüketebilirim?

Mapbox Studio'nun vektör döşemelerini Mapbox sunucusuna yükleyebileceğini ve döşemeleri barındırmasına izin verebileceğini biliyorum. Ama bu benim için bir seçenek değil, vektör döşemelerini kendi sunucumda barındırmak istiyorum.

Aşağıdaki TileStream yaklaşımı çıkmaz olarak ortaya çıktı. Tilelive ile çalışan bir çözüm için cevabımı görün.

Görüntü döşemelerini dosyalardan çıkarabilecek TileStream'i denedim .mbtiles:

Web sayfam mapbox-gl v0.4.0 kullanıyor:

<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>

ve bir JavaScript betiğinde bir mapboxgl.Map oluşturur:

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

c.jsonStil dosyası vektör karo kaynağını yapılandırır:

{
  "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"
    }
  }]
}

... aşağıdaki TileJSON teknik özelliklerinde tile.json:

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

... çalışan TileStream sunucuma işaret ediyor localhost:8888. TileStream ile başladı:

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

... ..\tilesklasör benim dosyamı içeriyor osm_roads.mbtiles.

Bu kurulumla web sayfamı açabiliyorum ancak sadece arka plan katmanını görebiliyorum. Tarayıcı ağ izlemesinde, yakınlaştırdığımda döşemelerin gerçekten yüklendiğini görebiliyorum, ancak tarayıcı JavaScript hata konsolu formda birkaç hata içeriyor

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

Vektör döşemeleri .pnggörüntü değil, ProtoBuf dosyaları olduğundan, döşemeler URL'si http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.pbfaslında daha anlamlı olur, ancak bu işe yaramaz.

Herhangi bir fikir?

@Greg'in belirttiği gibi, TileStream (ilk denemem) yerine kendi vektör döşemelerinizi barındırmak için Tilelive kullanmalısınız .

Tilelive bir sunucunun kendisi değil, farklı kaynaklardan farklı formatlardaki döşemelerle ilgilenen bir arka uç çerçevesidir. Ancak Node.js tabanlıdır, bu yüzden oldukça basit bir şekilde bir sunucuya dönüştürebilirsiniz. Bir .mbtileskaynaktan döşemeleri Mapbox Studio tarafından dışa aktarılan şekilde okumak için , node-mbtiles tilelive modülüne ihtiyacınız vardır.

Yan not: Geçerli Mapbox Studio'da, dışa aktarılan bir dosyanın seçtiğiniz hedefte görünmesini engelleyen Windows ve OS X altında bir hata var.mbtiles . Çözüm: En son export-xxxxxxxx.mbtilesdosyayı alın ~/.mapbox-studio/cache.

Express.js'yi web uygulaması sunucusu olarak kullanan iki sunucu uygulaması ( alexbirkett tarafından on20 döşeme sunucusu ve hanchao tarafından TileServer ) buldum .

İşte bu uygulamalara gevşek bir şekilde dayanan minimalist yaklaşımım:

1. Node.js dosyasını kurun
2. Düğüm paketlerini yakala npm install tilelive mbtiles express

3. Sunucuyu dosyaya uygulayın 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'));
       });
   });

   Not: Access-Control-Allow-...Başlıklar çapraz kaynak paylaşımını (CORS) etkinleştirir, böylece farklı bir sunucudan sunulan web sayfaları döşemelere erişebilir.

4. Çalıştır node server.js

5. Mapbox GL JS kullanarak web sayfasını ayarlayın 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. Döşeme kaynağının yerini belirtin ve katmanları aşağıdakilerle stillendirin 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 sayfasını sun ve sevinin.

Vektör karolarının tek başına barındırılması nispeten kolaydır. MBTiles, web'e maruz bırakılması gereken .pbf dosyalarını içerir. Bu kadar.

Muhtemelen en kolayı, TileServer-PHP gibi basit bir açık kaynaklı sunucu kullanmak ve MBTiles dosyasını proje dosyalarıyla aynı klasöre koymaktır. TileServer sizin için tüm hosting yapılandırmalarını yapar (CORS, TileJSON, doğru gzip başlıkları, vb.). Kurulum sadece PHP özellikli bir web sunucusunda açmak anlamına gelir.

Dizüstü bilgisayarınızda TileServer-PHP'yi başlatmak istiyorsanız Docker ile yapabilirsiniz. Kullanıma hazır konteyner DockerHub'ta . Mac OS X ve Windows altında, Kitematic grafik kullanıcı arayüzü ile birkaç dakika içinde çalışır: https://kitematic.com/ . Kitematic'te sadece "tileerver-php" kelimesini aratın ve proje içerisindeki konteyner / sanal makineyi kullanmaya hazır olun. Ardından "Volumes" üzerine tıklayın ve MBTiles dosyanızdaki klasöre bırakın. Vektör karolarınız için çalışan bir barındırma elde edersiniz!

Bu tür vektör döşemeleri, bir harita olarak MapBox Studio'da açılabilir veya MapBox GL JS WebGL görüntüleyici ile görüntülenebilir.

Teknik olarak sen gibi bir araç ile MBtiles kabın dışına bireysel PBF paketten ise, herhangi bir web sunucusunda bir düz klasör veya bir bulut depolama, hatta GitHub gibi vektör fayans barındırmak için bile mümkündür mbutil , CORS, TileJSON set ve doğru gzip. Körük de bu yaklaşımı gösteren bir GitHub projesi.

Bu görüntüleyiciyi deneyin:

ve ilgili depoları görün:

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

Boynumu sıkmak istemem ama https://github.com/spatialdev/PGRestAPI , Mapbox Studio'dan .mbtiles vektör karo ihracatına ev sahipliği yapan bir proje.

Yine de çok fazla belgeye ihtiyaç var, ancak temelde .mbtiles dosyalarınızı / data / pbf_mbtiles içine bırakın ve düğüm uygulamasını yeniden başlatın. Bu klasör aracılığıyla okuyacak ve vektör döşemeleriniz için bitiş noktaları sunacaktır.

Ayrıca / data / shapefile'leri arayacak ve .shp'nizi temel alarak anında dinamik Mapbox Vector Tiles oluşturacaktır. Ayrıca PostGIS örneğine işaret edebilir ve dinamik vektör döşemeleri elde edebilirsiniz.

Bunları, üzerinde çalıştığımız bir Broşür / Harita Kutusu Vektör Karosu kütüphanesi olan https://github.com/SpatialServer/Leaflet.MapboxVectorTile ile birlikte kullanıyoruz .

Bu mükemmel soru için teşekkürler. Sonunda vektör karolarının kararlı bir versiyonunu yayınladıklarını bilmiyordum. Dahası, “herhangi bir fikriniz için” bir fikir kaynağı olduğu için bu cevapla çalışmak zorunda kalabilirsiniz. soru. Henüz çalışan bir stüdyom yok.

Bence karşılaştığınız sorunlardan biri, bir tilejson dosyası kullanıyor olmanızdır. Böyle bir dosyayı kullanmak için tilejson servisine ihtiyacınız var . Bu nedenle, kaynaklar bölümünüzü bir satır içi URL olarak değiştirmeniz gerektiğine inanıyorum. Deneyin

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

veya

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

mapbox://Protokol olarak kullanıldıklarında , hizmetleri için takma ad / kısa yol gösterimidir. Kaynaklar bölümü videonun 8: 40'ında kısaca tartışıldı.

Yeni vektör karo işleminin bir adımı, veride istediğinizi ayarlayarak vektör verilerini iyileştirmektir. Diğer adım, vektör verilerini MapBox Studio'ya geri getirmek ve verileri oluşturmak / bir stil sayfası oluşturmaktır. c.json dosyanız stil sayfası iken osm_roads bir adım olur. Bir gerekebilir kiremit canlı bir ayet sunucu kiremit akımının video 15:01 civarında tartışıldığı gibi. Video, xml dosyasında ek meta verilere ihtiyacınız olduğunu söylüyor.

Buradaki tuhaflık, başka bir yerde .pbf ve stil sayfasına başvuruda bulunmanız, ancak sağladığınız url, vektör verilerinden oluşturulan fayans .png dosyalarıdır.

Bir MapBox anahtarınız varsa, söylemezsiniz. Kendi barındırma için, github stillerini ve glifleri kendi sunucunuza kopyalamanız gerektiğine inanıyorum . Yine glyphs etiketinde bir mapbox: // protokol olduğunu dikkat edin. Bu iki etiket gerekmeyebilir, çünkü simgelerle POI değil, düz çizgiler ve çokgenler oluşturuyorsunuz. Bir göz atmaya değer.

Son olarak, video, stile dönüştürmek için oluşturulan bir vektör katmanını stüdyoya geri alabileceğinizi söylüyor. Vektör katmanınıza başvuruda bulunmak ve kimliğinizi uygulamak isteyebilirsiniz: background ve id: roads stilleri önce stüdyoda. Video, canlı döşemenin MapBox Studio sahnesinin arkasındaki sunucu olduğunu söylüyor. Buradaki fikir, dinamik olarak oluşturulmuş son vektör döşemelerini sunmaya çalışmadan önce iki problemin tam olarak anlaşıldığından ve çözüldüğünden emin olmaktır.

https://github.com/osm2vectortiles/tileserver-gl-light , belirtilen ana çözümlerden çok daha kolaydır - JSON dosyalarına gerek yoktur. Sadece onunla koş

tileserver-gl-light filename.mbtiles

ve sonra sizin için fayans hizmet vermektedir. Bright-v9 gibi önceden tanımlanmış Mapbox GL stilleriyle çalışır; Sunucuyu çalıştırdıktan sonra basitçe fayansları ne tüketiyorsa onu işaret edin.

http: // localhost: 8080 / stilleri / parlak v9.json

Tilehut.js sunucumuzu denemek isteyebilirsiniz. Temelde ihtiyacınız olan her şeyi yapar = hosting vektör karoları ve hoş örnekler / belgelerle birlikte gelir ... ve openshift ile kombinasyon halinde 5 dakikalık bir kurulum işlemidir. Lütfen bir göz at:

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 dakika içinde

Süper sonra, ama şimdi GeoServer pbf'lere hizmet vermektedir (vector tile format)

Döşeme sunumu için düşünebileceğiniz diğer seçenekler;

Tegola (Go Yazılı)

Kiremitçi

Bu konuya burada güzel bir giriş var