हम स्मार्टफोन पर नाविक से ऑनलाइन नक्शे कनेक्ट करते हैं। भाग 3 - ओवरपासटर्बो

हम स्मार्टफोन के नेविगेशन एप्लिकेशन के माध्यम से ओवरपासटूरो.यूयू वेबसाइट से इंटरेक्टिव मैप देखने के लिए पहले से बनाई गई स्क्रिप्ट को एपीआई में बदल देते हैं।

सामग्री:

1 - परिचय। मानक रेखापुंज नक्शे
2 - निरंतरता। वेक्टर नक्शे के लिए एक सरल रेखापुंज लिखना
3 - एक विशेष मामला। हम ओवरपासटर्बो कार्ड कनेक्ट करते हैं

ओवरपासटर्बो क्या है?

So. OpenStreetMaps के रूप में इस तरह के एक मानचित्र डेटाबेस है। इसमें सब कुछ शामिल है: समुद्र, महाद्वीपों के पर्वत, पहाड़, जंगल, सड़कें, इमारतें, खेल के मैदान और यहां तक ​​कि गति समान हैं। प्रत्येक वस्तु का एक नाम, निर्देशांक और गुण होते हैं। उदाहरण के लिए, सड़क में कोटिंग सामग्री है, इमारत में फर्श की संख्या है, और इसी तरह।

तो यहाँ है। आज इंटरनेट पर प्रस्तुत किए जाने वाले अधिकांश कार्ड इस विशेष डेटाबेस के आधार पर तैयार किए जाते हैं। लेकिन क्या होगा अगर ये सभी तैयार कार्ड हमें सूट नहीं करते? आप अपना बना सकते हैं! ठीक है, या कम से कम मौजूदा एक को पूरक करें, जो बहुत आसान है।

यह वही है जो OverpassTurbo.eu कर रहा है। यह एक ऑनलाइन आईडीई है। इसका उपयोग करके, आप OSM डेटाबेस को क्वेरी कर सकते हैं। हम प्रारंभ बटन पर क्लिक करते हैं, अनुरोध डेटाबेस पर जाता है, और थोड़ी देर बाद डेटा हमारे पास लौटता है। OverpassTurbo वेक्टर मार्करों और पृष्ठभूमि परत के शीर्ष पर स्थित लाइनों के रूप में इस डेटा की कल्पना करता है - OpenSteerMap.org से एक मानचित्र।

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

https://overpass-turbo.eu/s/z95

या यहाँ एक स्क्रिप्ट है जो मैंने पहले से ही अपनी जरूरतों के लिए की थी। इसके साथ, आप आसानी से अपरिचित पार्कों में अच्छे जॉगिंग मार्ग पा सकते हैं। ऐसा करने के लिए, स्क्रिप्ट ब्राइटली ग्रूम किए गए बजरी रास्तों को हाइलाइट करती है: यह मेरे स्वाद के लिए, उन पर चलने के लिए सबसे सुविधाजनक है। डामर सफेद रंग में चिह्नित है। काले रंग में साधारण गंदगी के रास्ते। लेकिन "मुश्किल तक पहुँचने" या "खराब कोटिंग की गुणवत्ता" टैग के साथ सभी मार्गों को एक अगोचर धराशायी लाइन के साथ चिह्नित किया जाएगा: कम बार ठोकर खाने के लिए, मैं उनसे बचने की कोशिश करता हूं। सामान्य तौर पर, नक्शा इसलिए बनाया जाता है ताकि आप बस सबसे हड़ताली लाइनों के साथ दिशा-निर्देश प्राप्त कर सकें। और ताकि अंत में यह मार्ग सफल हो।

http://overpass-turbo.eu/s/KXU

वास्तव में, इस टूल से आप अपनी पसंद के किसी भी डेटा के साथ मैप को पूरक कर सकते हैं। और, मैं ध्यान देता हूं कि यह बहुत ही रोमांचक है। लेकिन यह लेख उस बारे में नहीं है। यदि आप इस विषय में रुचि रखते हैं, तो आप यहां ओवरपास की मूल बातें से खुद को परिचित कर सकते हैं ।

लेकिन कोड पर जाने से पहले, आइए सबसे पहले अंतिम परिणाम पर एक नज़र डालें जो हमें प्राप्त करना चाहिए।

उपयोगकर्ताओं के लिए निर्देश: हमारे एपीआई का उपयोग कैसे करें

So. मान लीजिए कि आपके पास ओवरपासटर्बो के लिए पहले से तैयार स्क्रिप्ट है, जिसके परिणाम आप अपने स्मार्टफोन पर देखना चाहते हैं। और ब्राउज़र में नहीं, बल्कि नेविगेटर में। ऐसा करने के लिए, अपनी स्क्रिप्ट को निम्न प्रारूप में लाएँ।

[bbox:{{bbox}}]; ( //     node[amenity=waste_basket]; ); out;>;out skel qt; 

विशेष रूप से, हम पहली पंक्ति में रुचि रखते हैं: हमारा आवेदन इसे बदल देगा।

उसके बाद, शेयर बटन पर क्लिक करें। प्रदर्शित मानचित्र बॉक्स की सक्षम स्थिति को अनचेक करना सुनिश्चित करें ।

उसके बाद, लिंक को कॉपी करें। उदाहरण के लिए, हम मानते हैं कि आपका कॉपी किया गया लिंक इस तरह दिखता है:

http://overpass-turbo.eu/s/KEy

अब हमारे एपीआई को देखें

https://anygis.herokuapp.com/mapshoter/overpass/{x}/{y}/{z}/{crossZoom}?script={script}

{X}, {y} और {z} के साथ, सब कुछ स्पष्ट प्रतीत होता है: ये वांछित टाइल के निर्देशांक हैं।

{स्क्रिप्ट} के स्थान पर आपको अपनी स्क्रिप्ट की आईडी को प्रतिस्थापित करना होगा। हमारे उदाहरण में, एस / कुंजी ।

लेकिन {crossZoom} क्या है? मान लीजिए आपके पास 15. फिर, यदि आप 15 से कम के ज़ूम के लिए एक टाइल का अनुरोध करते हैं, तो सर्वर ओवरपासटर्बो के लिए धीमी गति से अनुरोध नहीं करेगा, लेकिन बस आपको खाली OpenStreetMaps पृष्ठभूमि परत (जो तुरंत लोड होगा) के साथ नक्शे पर पुनर्निर्देशित करेगा। इस दृष्टिकोण की आवश्यकता है ताकि, यदि आवश्यक हो, तो आप नक्शे को दूर ले जा सकते हैं, जल्दी से रुचि के स्थान पर स्क्रॉल कर सकते हैं, ज़ूम इन और प्रतीक्षा कर सकते हैं। प्रतीक्षा करें जब तक कि ओवरपासटर्बो परिणामों के साथ एक नक्शा नहीं बनाता है।

मुझे उम्मीद है कि मूल सिद्धांत स्पष्ट है। अब हमारे अनुरोध के लिए पूर्ण URL को देखें। मुझे लगता है कि अब हमारे एपीआई का उपयोग करना आपके लिए मुश्किल नहीं होगा: बस अपनी स्क्रिप्ट की आईडी के साथ एस / केई को बदलें।

https://anygis.herokuapp.com/mapshoter/overpass/{x}/{y}/{z}/15?script=s/KEy

और हम, इस बीच, देखेंगे कि इस तरह के आवेदन को कैसे लागू किया जाए।

परिदृश्य 3 - URL और ब्राउज़र कैश का उपयोग करके खोजें

So. राउटर फ़ाइल के साथ शुरू करते हैं। आइए हम अपने तरीके को क्रॉसज़ूम और स्क्रिप्ट मापदंडों को स्वीकार करते हैं। और फिर हम उन्हें कार्यकर्ता को देते हैं। हम एक विकल्प भी जोड़ते हैं जो स्क्रिप्ट को बाधित करेगा और उपयोगकर्ता को किसी अन्य साइट पर पुनर्निर्देशित करेगा यदि अनुरोधित ज़ूम बहुत कम है।

 const express = require( 'express' ) const PORT = process.env.PORT || 5000 const app = express() app.listen( PORT, () => { console.log( '    ', PORT ) }) const { StaticPool } = require( 'node-worker-threads-pool' ) const worker = "./worker.js" const workersPool = new StaticPool({ size: 3, task: worker, workerData: "no" }) //     app.get( '/:x/:y/:z/:crossZoom', async ( req, res, next ) => { const x = req.params.x const y = req.params.y const z = req.params.z const crossZoom = req.params.crossZoom const scriptName = req.query.script //     if ( Number( z ) < Number( crossZoom ) ) { res.redirect( `http://tile.openstreetmap.org/${z}/${x}/${y}.png` ) } //      const screenshot = await workersPool.exec( { x, y, z, scriptName } ) const imageBuffer = Buffer.from( screenshot, 'base64' ) res.writeHead( 200, { 'Content-Type': 'image/png', 'Content-Length': imageBuffer.length }) res.end( imageBuffer ) }) 

कार्यकर्ता .js फ़ाइल ज्यादा नहीं बदली है। बस नए चर आगे आगे।

 const { parentPort, workerData } = require( 'worker_threads' ); const puppeteer = require( 'puppeteer' ) const mapshoter = require( './mapshoter' ) var browser = "empty" parentPort.on( "message", ( params ) => { doMyAsyncCode( params ) .then( ( result ) => { parentPort.postMessage( result ) }) }) async function doMyAsyncCode( params ) { await prepareEnviroment() //   const screenshot = await mapshoter.makeTile( params.x, params.y, params.z, params.scriptName, browser ) return screenshot } async function prepareEnviroment( ) { if ( browser === "empty" ) { const herokuDeploymentParams = {'args' : ['--no-sandbox', '--disable-setuid-sandbox']} browser = await puppeteer.launch( herokuDeploymentParams ) } } 

अब हम mapshoter.js पर एक नज़र डालते हैं । सबसे पहले, कोड को देखें:

 const puppeteer = require( 'puppeteer' ) const geoTools = require( './geoTools' ) async function makeTile( x, y, z, scriptName, browserLink ) { //      const runButtonSelector = '#navs > div > div.buttons > div:nth-child(1) > a:nth-child(1)' const codeEditorSelector = '#editor > div.CodeMirror.CodeMirror-wrap > div:nth-child(1) > textarea' //          const coordinates = geoTools.getAllCoordinates( x, y, z ) const bBox = `[bbox:${coordinates.bBox.latMin}, ${coordinates.bBox.lonMin}, ${coordinates.bBox.latMax}, ${coordinates.bBox.lonMax}];` const centerCoordinates = `${coordinates.center.lat};${coordinates.center.lon};${z}` //      const browser = await browserLink const page = await browser.newPage() await page.setViewport( { width: 850, height: 450 } ) //  ,   : //      await page.waitFor( randomInt( 0, 500 ) ) //        URL var pageUrl = `http://overpass-turbo.eu/?C=${centerCoordinates}` await page.goto( pageUrl, { waitUntil: 'networkidle2', timeout: 10000 } ) //       URL pageUrl = 'http://overpass-turbo.eu/' + scriptName await page.goto( pageUrl, { waitUntil: 'networkidle0', timeout: 20000 } ) //      await page.focus( codeEditorSelector ) //        , //     await page.keyboard.type( bBox + ' //' ) // ,  -IDE   await page.waitFor( 100 ) //     - await page.click( runButtonSelector ) // ,      . //     . await page.waitForFunction(() => !document.querySelector('body > div.modal > div > ul > li:nth-child(1)'), {polling: 'mutation'}); await page.waitFor( 1000 ) //    const cropOptions = { fullPage: false, clip: { x: 489, y: 123, width: 256, height: 256 } } const screenshot = await page.screenshot( cropOptions ) //   await page.close() return screenshot } //       function randomInt( low, high ) { return Math.floor( Math.random() * ( high - low ) + low ) } module.exports.makeTile = makeTile 

शुरुआत के लिए, इस स्क्रिप्ट में, विविधता के लिए, हम साधारण तत्व चयनकर्ताओं (जो कि XPath नहीं हैं) के साथ काम करेंगे। उन्हें खोजने के लिए पिछले लेख में कैसे वर्णन किया गया था।

आगे हमें निर्देशांक मिलते हैं। केवल इस बार, केंद्र निर्देशांक के अलावा, टाइल बॉर्डर्स ( bBox ) के निर्देशांक भी आवश्यक हैं।

इसके बाद, ब्राउज़र लॉन्च करें। यहां सब कुछ विशिष्ट है। लेकिन पेज को लोड करने के लिए आगे बढ़ने से पहले, स्क्रिप्ट को 0 से 500 एमएस तक यादृच्छिक समय की प्रतीक्षा करें। ताकि हम एक ही समय में हमसे बहुत अधिक समान अनुरोध प्राप्त न करें और हम प्रतिबंधित न हों।

उसके बाद, हम उस URL पर साइट पर जाते हैं जहां टाइल के केंद्र के निर्देशांक जोड़े जाते हैं। नतीजतन, वांछित स्थान मानचित्र के केंद्र में है।

उसके बाद, किसी अन्य URL पर जाएं। इस बार हमारी स्क्रिप्ट की आईडी के साथ। नतीजतन, हमारी स्क्रिप्ट कोड संपादक के पाठ में दिखाई देगी।

(कृपया ध्यान दें कि यदि हमारी स्क्रिप्ट के URL को कॉपी करते समय शेयर मेनू में हम मानचित्र चेकबॉक्स की स्थिति को अनचेक नहीं करेंगे, तो मानचित्र शिफ्ट हो जाएगा। और हमें इसकी आवश्यकता नहीं है)

और अब मैं इस सवाल का यथोचित उत्तर दूंगा: हम दो बार URL पर क्यों जाते हैं, यानी हम इस साइट को लोड करने पर दो बार खर्च करते हैं? मैं जवाब देता हूं। क्योंकि, सबसे पहले, मैं यह नहीं ढूँढ सकता कि स्क्रिप्ट लोडिंग और संक्रमण को एक URL अनुरोध में निर्दिष्ट निर्देशांक में कैसे संयोजित किया जाए। दूसरे, क्योंकि किसी कारण से प्यूपेएटर पाठ को बहुत धीरे-धीरे प्रिंट करता है और इस साइट पर इंटरफ़ेस तत्वों के साथ काम करता है। डेढ़ मिनट प्रिंट कर सकते हैं! तो खोज क्षेत्र में निर्देशांक सम्मिलित करने का विचार, और फिर ज़ूम बटन पर क्लिक करें, जैसा कि हमने पिछले लेख में किया था, मना करने का निर्णय लिया गया था। नतीजतन, लिंक पर डबल क्लिक करना यह सब करने की तुलना में बहुत तेजी से निकला। शायद यह एक बग है और इसे जल्द या बाद में तय किया जाएगा, लेकिन अब हम जो है, उसके साथ काम कर रहे हैं।

काश, आप पूरी तरह से पाठ प्रविष्टि नहीं छोड़ पाएंगे। हमें कोड संपादक विंडो में पहली पंक्ति को बदलना होगा। फिलहाल, वह रिपोर्ट करती है कि वर्तमान में स्क्रीन पर मौजूद पूरे क्षेत्र के लिए डेटाबेस से जानकारी डाउनलोड करना आवश्यक है।

 [bbox:{{bbox}}]; 

हम इसे टाइल की सीमाओं के निर्देशांक के साथ बदल देंगे। ऐसा इसलिए है क्योंकि डेटाबेस से डाउनलोड करने में समय बर्बाद न करें। तो स्क्रिप्ट पहली पंक्ति में इस पाठ की तरह कुछ छापती है:

 [bbox:55.6279, 37.5622, 55.6341, 37.5732]; // 

और इसलिए मूल लाइन को मिटाना नहीं है (कई बार धीरे-धीरे इसके लिए डिलीट दबाकर), हम बस इस पर टिप्पणी करते हैं। इस प्रकार, हम पाठ में प्रवेश करने और डेटाबेस से लोडिंग समय पर जितना संभव हो उतना कम करेंगे। नतीजतन, पहली पंक्ति इस तरह दिखाई देगी:

 [bbox:55.6279, 37.5622, 55.6341, 37.5732]; //[bbox:{{bbox}}]; 

उसके बाद, हमारी स्क्रिप्ट को स्टार्ट बटन पर क्लिक करना होगा, थोड़ा इंतजार करना होगा, मैप का स्क्रीनशॉट लेना होगा और इसे यूजर को भेजना होगा। और सभी: कार्य पूरा हो गया है!

यदि आप परिणामी स्क्रिप्ट का एक उदाहरण देखना चाहते हैं, तो आप इस लिंक पर क्लिक कर सकते हैं।

निष्कर्ष

खैर, जैसा कि यह मान लेना मुश्किल नहीं है, स्क्रिप्ट का यह संस्करण पिछले वाले की तुलना में भी धीमा काम करेगा। दरअसल, अब साइट तीसरे पक्ष के डेटाबेस के अनुरोध पर समय बिताती है। और अपने आप से, यह बहुत तेजी से काम नहीं करता है। हालांकि, यह विधि एक अद्वितीय, अनुकूलित कार्ड प्राप्त करने के लिए इसे बेहद आसान (यद्यपि धीमा) बनाती है। और, नवीनतम आंकड़ों के आधार पर, इसके अलावा। और यह, कई बार, बहुत उपयोगी हो सकता है। तो यह इस विधि को ध्यान में रखते हुए है।

और वह सब है। बस के मामले में, मैं आपको याद दिलाता हूं कि मेरी AnyGIS वेबसाइट पर Locus, OsmAnd और GuruMaps नाविकों के लिए तैयार किए गए प्रीसेट का एक संग्रह है। दोनों रेखापुंज नक्शे और "रेखापुंज" वेक्टर नक्शे हैं, जिन्हें देखने के लिए इन लेखों में वर्णित एप्लिकेशन का उपयोग किया जाता है। आओ और उपयोग करो।