सेल्फ-होस्टिंग मैपबॉक्स वेक्टर टाइल्स

Question

जैसा कि FOSS4G में एक बातचीत में प्रस्तुत किया गया है Mapbox स्टूडियो Mapbox वेक्टर टाइल बनाने और उन्हें एक .mbtilesफ़ाइल के रूप में निर्यात करने की अनुमति देता है ।

MapBox-gl.js पुस्तकालय के लिए गतिशील रूप से शैली इस्तेमाल किया जा सकता है और ग्राहक पर (ब्राउज़र) की ओर MapBox वेक्टर टाइल्स प्रस्तुत करना।

अनुपस्थित भाग: मैं मैपबॉक्स वेक्टर टाइल्स ( .mbtiles) को कैसे स्वयं होस्ट कर सकता हूं ताकि मैं उन्हें मैपबॉक्स- gl.js के साथ उपभोग कर सकूं?

मुझे पता है कि Mapbox Studio वेक्टर टाइल्स को Mapbox सर्वर पर अपलोड कर सकता है और इसे टाइल्स को होस्ट करने दे सकता है। लेकिन यह मेरे लिए कोई विकल्प नहीं है, मैं अपने स्वयं के सर्वर पर वेक्टर टाइल्स की मेजबानी करना चाहता हूं।

---

नीचे दी गई टाइलस्ट्रीम अप्रोच एक मृत अंत है। तिलिलिव के साथ काम करने के समाधान के लिए मेरा जवाब देखें।

---

मैंने टाइलस्ट्रीम की कोशिश की जो छवि टाइलों को .mbtilesफाइलों से बाहर निकाल सकती है :

मेरा वेबपृष्ठ मैपबॉक्स-ग्ल 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>

और यह एक जावास्क्रिप्ट स्क्रिप्ट में एक 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"
    }
  }]
}

... निम्नलिखित टाइलजोन विनिर्देशन में tile.json:

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

... जो मेरे टाइलस्ट्रीम सर्वर पर चल रहा है localhost:8888। टाइलस्ट्रीम को इसके साथ शुरू किया गया है:

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

... जहां ..\tilesफ़ोल्डर में मेरी osm_roads.mbtilesफ़ाइल है।

इस सेटअप के साथ, मैं अपना वेबपेज खोल सकता हूं लेकिन केवल बैकग्राउंड लेयर देख सकता हूं। ब्राउज़र नेटवर्क ट्रेस में मैं देख सकता हूं कि जब मैं ज़ूम इन करता हूं तो टाइलें वास्तव में लोड होती हैं, लेकिन ब्राउज़र जावास्क्रिप्ट त्रुटि कंसोल में फॉर्म की कई त्रुटियां होती हैं

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

चूंकि वेक्टर टाइलें .pngइमेज नहीं होती हैं, बल्कि प्रोटोबफ फाइलें होती हैं, इसलिए टाइल्स URL http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.pbfवास्तव में अधिक समझ में आता है, लेकिन यह काम नहीं करता है।

कोई विचार?

Answer 1

जैसा कि @Greg द्वारा बताया गया है, टाइलस्ट्रीम (मेरा पहला प्रयास) के बजाय आपको अपने स्वयं के वेक्टर टाइलों की मेजबानी के लिए तिलिवेल का उपयोग करना चाहिए ।

टिलिव स्वयं एक सर्वर नहीं है बल्कि एक बैकएंड फ्रेमवर्क है जो विभिन्न स्रोतों से अलग-अलग स्वरूपों में टाइलों से संबंधित है। लेकिन यह Node.js पर आधारित है, इसलिए आप इसे एक सर्वर में एक बहुत सीधे-सीधे तरीके से बदल सकते हैं। मैपबॉक्स.mbtiles स्टूडियो द्वारा निर्यात किए गए स्रोत के रूप में टाइल पढ़ने के लिए , आपको नोड-एमबीटीइल्स टिलिव मॉड्यूल की आवश्यकता होती है।

साइड नोट: वर्तमान मैपबॉक्स स्टूडियो में विंडोज और ओएस एक्स के तहत एक बग है जो .mbtilesआपके चुने हुए गंतव्य पर दिखाने के लिए एक निर्यात की गई फ़ाइल को रोकता है। वर्कअराउंड: बस लेटेस्ट export-xxxxxxxx.mbtilesफाइल को अंदर ले जाएं ~/.mapbox-studio/cache।

मुझे दो सर्वर कार्यान्वयन ( एलेक्सबर्कट द्वारा दस20 टाइल सर्वर और हंचचाओ द्वारा टाइलसर्वर ) मिले, जो दोनों एक वेब ऐप सर्वर के रूप में एक्सप्रेस.जेएस का उपयोग करते हैं ।

यहाँ मेरा न्यूनतम दृष्टिकोण है जो इन कार्यान्वयनों पर आधारित है:

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) को सक्षम करते हैं इसलिए एक अलग सर्वर से सर्व किए गए वेबपेज टाइल्स तक पहुँच सकते हैं।

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. वेबपृष्ठ की सेवा करें और आनन्दित हों।

Comments

ध्यान दें कि आपको ///mbtiles फ़ाइल को परिभाषित करने के लिए तीन की आवश्यकता है:tilelive.load('mbtiles://path/to/osm_roads.mbtiles', function(err, source) {

— CDavis

@ LCDavis: ऐसा लगता है कि ऑपरेटिंग सिस्टम पर निर्भर करता है: ///जैसे Linux और OS X के लिए तीन आवश्यक हैं mbtiles:///usr/local/osm_roads.mbtiles। //यदि आप जैसे डिस्क निर्दिष्ट करते हैं, तो विंडोज पर केवल दो की आवश्यकता होती है mbtiles://D/data/osm_roads.mbtiles।

— एंड्रियास बिलागर

वास्तव में उपयोगी, बहुत बहुत धन्यवाद, मुझे 5 में वेक्टर mbtiles की सेवा करने में मदद की! '

— ब्वॉयज

हाय एंड्रियास - मुझे यह काम करने के लिए नहीं मिला - नक्शा प्रदर्शित करता है, लेकिन यह सिर्फ एक बड़ा खाली ग्रे वर्ग है। मुझे यकीन नहीं है कि आपको अपना mbtiles स्रोत कहां मिला है। मैं tilemill से डिफ़ॉल्ट mbtiles के कुछ निर्यात करने की कोशिश की है।

— 16

आपको लगता है कि आप लोकलहोस्ट का उपयोग कर रहे हैं: 7777 / v2 / टाइल्स / आपकी टाइलों के स्थान के लिए, लेकिन आपको वह रास्ता कहां मिल रहा है? या आपको यह सुनिश्चित करने के लिए क्या करने की आवश्यकता है कि निर्यात की गई mbtiles फ़ाइल उस पथ पर छवियों की सेवा करती है?

— mheavers

Answer 2

अपने दम पर वेक्टर टाइल्स की मेजबानी अपेक्षाकृत सरल है। MBTiles में .pbf फाइलें होती हैं जिन्हें वेब पर उजागर किया जाना चाहिए। बस।

संभवत: सबसे आसान है एक साधारण ओपन-सोर्स सर्वर जैसे कि टाइलसर्वर-पीएचपी का उपयोग करना और एमबीटीइलस फाइल को एक ही फ़ोल्डर में प्रोजेक्ट फाइलों के रूप में रखना। द टाइलसर्वर आपके लिए सभी होस्टिंग कॉन्फिग करता है (कोर, टाइलजसन, सही gzip हेडर इत्यादि)। इंस्टॉलेशन का मतलब है कि PHP सक्षम वेबसर्वर पर सिर्फ अनपैक करना।

यदि आप अपने लैपटॉप पर टाइलसर्वर-पीएचपी शुरू करना चाहते हैं तो आप डॉकर के साथ कर सकते हैं। कंटेनर का उपयोग करने के लिए तैयार DockerHub पर है । मैक ओएस एक्स और विंडोज के तहत यह कुछ मिनटों में किटमेटिक ग्राफिकल यूजर इंटरफेस: https://kitematic.com/ के साथ चलता है । किटेमेटिक में बस "टाइल्ससर्वर-पीएचपी" की खोज करें और अंदर प्रोजेक्ट के साथ कंटेनर / वर्चुअल मशीन का उपयोग करने के लिए तैयार शुरू करें। फिर "वॉल्यूम" पर क्लिक करें और अपने MBTiles फ़ाइल फ़ोल्डर में छोड़ दें। आपको अपने वेक्टर टाइल्स के लिए एक रनिंग होस्टिंग मिलती है!

ऐसी वेक्टर टाइलें एक स्रोत के रूप में मैपबॉक्स स्टूडियो में खोली जा सकती हैं, या मैपबॉक्स जीएल जेएस वेबलॉग दर्शक के साथ प्रदर्शित की जा सकती हैं।

तकनीकी रूप से वेक्टर टाइल्स को किसी भी वेब सर्वर या क्लाउड स्टोरेज, या यहां तक ​​कि GitHub पर सादे फ़ोल्डर के रूप में होस्ट करना संभव है, यदि आप एमबीटीपीाइल्स कंटेनर से अलग-अलग .pbf को mbutil जैसी उपयोगिता के साथ अनपैक करते हैं , तो CORS, TileJSON सेट करें। और सही ढंग से 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

Comments

यह मेरे लिए उपरोक्त सभी विकल्पों में से सबसे आसान था, पोस्ट करने के लिए धन्यवाद।

— बुनकरों का

PGRestAPI, मेरे लिए बहुत अच्छा, लेकिन असफल स्थापना है। मैं कभी भी PGRestAPI को सफलतापूर्वक स्थापित करने में सक्षम नहीं हूं। तो यह php टाइल सर्वर मेरी एकमात्र पसंद है और यह सही काम करता है।

— फहराया

यह सबसे दिलचस्प है, क्या आप pbf फ़ाइलों की सेवा के लिए सही ढंग से CORS और टाइलजन्स सेट करने पर विस्तृत कर सकते हैं? मैंने download.geofabrik.de/europe से एक pbf फ़ाइल डाउनलोड की है, लेकिन लिंक की गई परियोजना में कई pbf फ़ाइलों के साथ कई निर्देशिकाएँ हैं।

— php_nub_qq

Answer 3

अपने स्वयं के सींग को टटोलने के लिए नहीं, लेकिन https://github.com/spatialdev/PGRestAPI एक परियोजना है जो मैं उस मेजबानों पर काम कर रहा हूँ।

अभी भी बहुत सारे दस्तावेज़ीकरण की आवश्यकता है, लेकिन मूल रूप से, अपनी .mbtiles फ़ाइलों को / data / pbf_mbtiles में छोड़ दें और नोड ऐप को पुनरारंभ करें। यह उस फ़ोल्डर को पढ़ेगा और आपके वेक्टर टाइल्स के लिए एंडपॉइंट प्रदान करेगा।

यह थ्रू / डेटा / शेपफाइल्स भी दिखेगा, और आपके .shp के आधार पर फ्लाई पर डायनेमिक मैपबॉक्स वेक्टर टाइलें बनाएगा। आप पोस्टगिस उदाहरण पर भी इंगित कर सकते हैं और गतिशील वेक्टर टाइल प्राप्त कर सकते हैं।

हम उन्हें https://github.com/SpatialServer/Leaflet.MapboxVectorTile के साथ संयोजन में उपयोग करते हैं , जो कि हम काम कर रहे हैं।

Comments

PGRestAPI को अब दुर्भाग्य से सक्रिय रूप से विकसित नहीं किया जा रहा है

— राफेल

Answer 4

महान प्रश्न के लिए धन्यवाद। मुझे नहीं पता था कि उन्होंने आखिरकार वेक्टर टाइल्स का एक स्थिर संस्करण जारी किया था। इसके अलावा, आपको इस उत्तर के साथ काम करना पड़ सकता है क्योंकि यह आपके "किसी भी विचार" के विचारों का स्रोत है? सवाल। मेरे पास अभी तक एक रनिंग स्टूडियो नहीं है।

मुझे लगता है कि आपके द्वारा चलाए जा रहे समस्याओं में से एक यह है कि आप टाइलजसन फ़ाइल का उपयोग कर रहे हैं। उस तरह की फ़ाइल का उपयोग करने के लिए आपको टाइलजसन सेवा की आवश्यकता होती है । इसलिए, मेरा मानना ​​है कि आपको अपने स्रोत अनुभाग को एक इन-लाइन 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 पर चर्चा की गई थी।

नई वेक्टर टाइल प्रक्रिया का एक चरण यह है कि आप डेटा में जो चाहते हैं उसे समायोजित करके वेक्टर डेटा को क्यूरेट करें। अन्य कदम वेक्टर डेटा को मैपबॉक्स स्टूडियो में वापस लाना है और डेटा को प्रस्तुत करना / एक स्टाइल शीट बनाना है। आपकी c.json फ़ाइल शैली पत्रक है, जबकि osm_roads एक कदम होगा। आपको वीडियो के 15:01 के आसपास चर्चा की गई एक टाइल लाइव सर्वर एक टाइल स्ट्रीम की आवश्यकता हो सकती है । वीडियो में कहा गया है कि आपको xml फ़ाइल में अतिरिक्त मेटा डेटा की आवश्यकता है।

यहाँ विषमता यह है कि आप .pbf और स्टाइल शीट का संदर्भ कहीं और देते हैं, लेकिन आपके द्वारा प्रदान की जाने वाली यूआरएल परिणामी टाइलें होती हैं। वे फ़ाइलें जो वेक्टर डेटा से उत्पन्न होती हैं।

आप कहते हैं, अगर आपके पास कोई MapBox कुंजी नहीं है। अपने स्वयं के होस्टिंग के लिए, मेरा मानना ​​है कि आपको अपने स्वयं के सर्वर पर गितूब स्टाइल और ग्लिफ़ की प्रतिलिपि बनानी होगी । फिर से ध्यान दें कि ग्लिफ़्स टैग में एक मैपबॉक्स: // प्रोटोकॉल है। इन दो टैग की जरूरत नहीं हो सकती है क्योंकि आप सादे रेखाओं और बहुभुजों को प्रस्तुत कर रहे हैं और माउस के माध्यम से POI नहीं। यह देखने लायक है।

अंत में, वीडियो का कहना है कि आप इसे स्टाइल करने के लिए एक उत्पन्न वेक्टर लेयर को स्टूडियो में वापस ले जा सकते हैं। आप अपनी वेक्टर लेयर को संदर्भित करना और अपनी आईडी: पृष्ठभूमि और आईडी: सड़कों की शैली को पहले स्टूडियो में लागू कर सकते हैं। वीडियो में कहा गया है कि मैप लाइव स्टूडियो के दृश्य के पीछे टाइल लाइव सर्वर है। यहां विचार यह सुनिश्चित करने के लिए है कि अंतिम चरण टाइलों को गतिशील रूप से प्रदान करने की कोशिश करने से पहले आपको सभी चरण दो समस्याओं को समझा और तय किया गया है।

Comments

ठीक है, धन्यवाद @Greg आपके विचारों के लिए। आगे की जांच करेंगे और अपने निष्कर्षों के साथ वापस आएंगे।

— एंड्रियास बिलागर

Answer 5

https://github.com/osm2vectortiles/tileserver-gl-light उल्लेखित मुख्य समाधानों की तुलना में उपयोग करने के लिए बहुत आसान है - JSON फ़ाइलों के साथ कोई फ़िडलिंग की आवश्यकता नहीं है। आप बस इसके साथ दौड़िए

tileserver-gl-light filename.mbtiles

और फिर यह आपके लिए टाइल्स की सेवा कर रहा है। यह पूर्वनिर्धारित मैपबॉक्स जीएल शैलियों के साथ काम करता है जैसे कि उज्ज्वल-वी 9; सर्वर चलाने के बाद आप बस जो कुछ भी टाइल का उपभोग कर रहे हैं उसे इंगित करते हैं

http: // localhost: 8080 / शैलियों / उज्ज्वल v9.json

Answer 6

आप हमारे टाइलहॉट.जेएस सर्वर को आज़माना चाहते हैं। यह मूल रूप से उन सभी को करता है जिनकी आपको आवश्यकता है = वेक्टर टाइल्स की मेजबानी करना और अच्छे उदाहरण / डॉक्स के साथ आता है ... और ओपनशिफ्ट के साथ संयोजन में यह 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 मिनटों में

Answer 7

सुपर बाद में, लेकिन अब जियोसर्वर पीबीएफ (वेक्टर टाइल प्रारूप) परोसता है

Answer 8

टाइल सेवारत के लिए आप जिन अन्य विकल्पों पर विचार कर सकते हैं;

तेगोला (लिखित में)

tiler

इस विषय का यहाँ अच्छा परिचय है