🧝🏽 🛌 👡 हम स्मार्टफोन पर नाविक से ऑनलाइन नक्शे कनेक्ट करते हैं। भाग 2

हम एक सर्वर एप्लिकेशन लिख रहे हैं जो ऑनलाइन वेक्टर मैप्स के आधार पर पीएनजी रैस्टर टाइल्स उत्पन्न करेगा। मानचित्र डेटा प्राप्त करने के लिए Puppeteer के साथ वेब स्क्रैपिंग का उपयोग करें।

सामग्री:

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

विस्तार

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

बधाई हो, हमें एक वेक्टर नक्शा मिला। मोटे तौर पर, यह आपके ब्राउज़र द्वारा वास्तविक समय में प्रस्तुत किया गया है। तो उसे किसी भी तैयार टाइल की आवश्यकता नहीं है। एक तरफ, अब तक बहुत सारे वेक्टर नक्शे नहीं हैं। लेकिन यह तकनीक बहुत ही आशाजनक है और समय के साथ ये कई गुना अधिक हो सकती हैं। खैर, हमने इसका पता लगाया। और फिर भी, अब हम क्या करते हैं?

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

हालाँकि, यदि यह चाल काम नहीं करती है, और आप अभी भी इस कार्ड को प्राप्त करना चाहते हैं, और, इसके अलावा, आपके ब्राउज़र में स्मार्टफोन के ब्राउज़र में नहीं, बल्कि एक रास्ता है।

मुख्य विचार

हम इस तथ्य से आगे बढ़ेंगे कि हम एक नक्शा प्राप्त करना चाहते हैं जिसे किसी भी नाविक में खोला जा सकता है। फिर हमें एक एडाप्टर की आवश्यकता है - एक प्रकार का मध्यस्थ जो पीएनजी प्रारूप में हमारे लिए टाइल उत्पन्न करेगा।

यह पता चला है कि आप की जरूरत है ~~एक साइकिल का आविष्कार करें~~ वेक्टर डेटा की कल्पना के लिए एक और इंजन विकसित करना। ठीक है, या आप एक स्क्रिप्ट लिख सकते हैं जो साइट पर जाएगी, जिससे वह अपने स्वयं के वेक्टर मानचित्र को खुद ही खींच सकेगा। और फिर वह डाउनलोड का इंतजार करेगा, स्क्रीनशॉट लेगा, फसल लेगा और उपयोगकर्ता को वापस लौटा देगा। शायद मैं दूसरा विकल्प चुनूंगा।

स्क्रीनशॉट लेने के लिए, मैं "रिमोट कंट्रोल ब्राउज़र" का उपयोग करूंगा - हेडलेस क्रोम। आप नोड js लाइब्रेरी Puppeteer का उपयोग करके इसे नियंत्रित कर सकते हैं। आप इस लेख से इस पुस्तकालय के साथ काम करने की मूल बातें जान सकते हैं।

नमस्ते विश्व! या प्रोजेक्ट बनाएं और कस्टमाइज़ करें

यदि आपने अभी तक Node.js स्थापित नहीं किया है, तो इस या इस पृष्ठ पर जाएं, अपने ऑपरेटिंग सिस्टम का चयन करें और निर्देशों के अनुसार स्थापना करें।

प्रोजेक्ट के लिए एक नया फ़ोल्डर बनाएं और इसे टर्मिनल में खोलें।

$ cd /Mapshoter_habr

हम एक नई परियोजना बनाने का प्रबंधक शुरू करते हैं

 $ npm init

यहां आप प्रोजेक्ट का नाम ( पैकेज का नाम ), एप्लिकेशन में प्रविष्टि फ़ाइल का नाम ( प्रवेश बिंदु ) और लेखक ( लेखक ) का नाम निर्दिष्ट कर सकते हैं। अन्य सभी अनुरोधों के लिए, हम डिफ़ॉल्ट मापदंडों से सहमत हैं: हम कुछ भी नहीं दर्ज करते हैं और बस Enter दबाते हैं। अंत में - y दबाएँ और एंटर करें ।

अगला, काम के लिए आवश्यक रूपरेखाएं स्थापित करें। एक ब्राउज़र के साथ काम करने के लिए एक सर्वर और Puppeteer बनाने के लिए व्यक्त करें।

 $ npm install express $ npm i puppeteer

परिणामस्वरूप, प्रोजेक्ट कॉन्फ़िगरेशन फ़ाइल package.json प्रोजेक्ट फ़ोल्डर में दिखाई देता है। मेरे मामले में, यह:

 { "name": "mapshoter_habr", "version": "1.0.0", "description": "", "main": "router.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "nnngrach", "license": "ISC", "dependencies": { "express": "^4.17.1", "puppeteer": "^1.18.1" } }

हम हमारे एप्लिकेशन को और अधिक आसानी से लॉन्च करने के लिए स्क्रिप्ट सेक्शन में स्टार्ट लाइन जोड़ देंगे।

 "scripts": { "start": "node router.js", "test": "echo \"Error: no test specified\" && exit 1" },

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

 //        const express = require( 'express' ) const mapshoter = require( './mapshoter' ) //  ,       const PORT = process.env.PORT || 5000 //     const app = express() app.listen( PORT, () => { console.log( '    ', PORT ) }) //       // http://siteName.com/x/y/z app.get( '/:x/:y/:z', async ( req, res, next ) => { //      const x = req.params.x const y = req.params.y const z = req.params.z //      const screenshot = await mapshoter.makeTile( x, y, z ) //        const imageBuffer = Buffer.from( screenshot, 'base64' ) //    res.writeHead( 200, { 'Content-Type': 'image/png', 'Content-Length': imageBuffer.length }) //    res.end( imageBuffer ) })

अब एक दूसरी फाइल बनाएं। वह ब्राउज़र को नियंत्रित करेगा और स्क्रीनशॉट लेगा। मैंने इसे mapshoter.js कहा है।

 const puppeteer = require( 'puppeteer' ) async function makeTile( x, y, z ) { //   const browser = await puppeteer.launch() //       const page = await browser.newPage() await page.goto( 'https://www.google.ru/' ) //    const screenshot = await page.screenshot() //      await browser.close() return screenshot } module.exports.makeTile = makeTile

हमारी स्क्रिप्ट चलाएं और उसके प्रदर्शन की जांच करें। ऐसा करने के लिए, कंसोल में टाइप करें:

$ npm start

एक संदेश दिखाई देता है जो कहता है कि "सर्वर 5000 पोर्ट पर बनाया गया है"। अब अपने कंप्यूटर पर एक ब्राउज़र खोलें और हमारे सर्वर के स्थानीय पते पर जाएं। X, y, z निर्देशांक के बजाय , आप किसी भी संख्या में प्रवेश कर सकते हैं। मैंने १, २, ३ में प्रवेश किया।

http://localhost:5000/1/2/3

यदि सब कुछ सही ढंग से किया जाता है, तो Google साइट का एक स्क्रीनशॉट दिखाई देगा।

हमारी स्क्रिप्ट को रोकने के लिए कंसोल में Ctrl + C दबाएं।

बधाई, हमारे आवेदन का आधार तैयार है! हमने एक सर्वर बनाया जो हमारे HTML अनुरोधों को स्वीकार करता है, एक स्क्रीनशॉट लेता है और हमें एक छवि देता है। अब विवरणों के कार्यान्वयन के लिए आगे बढ़ने का समय है।

निर्देशांक की गणना करें

यह विचार यह है कि ब्राउज़र एक साइट को मैप के साथ खोलेगा और उस जगह के निर्देशांक में प्रवेश करेगा जो हमें खोज पट्टी में चाहिए। "ढूंढें" बटन पर क्लिक करने के बाद, यह स्थान बिल्कुल स्क्रीन के केंद्र में होगा। इसलिए हमें उस क्षेत्र को काटना आसान होगा जो हमें चाहिए।

लेकिन पहले, आपको इसके सीरियल नंबर के आधार पर टाइल के केंद्र के निर्देशांक की गणना करने की आवश्यकता है। मैं ऊपरी बाएँ कोने को खोजने के सूत्र के आधार पर ऐसा करूँगा। मैंने इसे getCoordinates () फ़ंक्शन में डाला।

और चूंकि कुछ साइटों के लिए, टाइल के केंद्र के अलावा, आपको इसकी सीमाओं को भी निर्दिष्ट करने की आवश्यकता है, फिर मैं उनके लिए भी देखूंगा। ठीक है, चलो geoTools.js नाम के तहत इन गणनाओं के लिए एक अलग मॉड्यूल बनाते हैं । यहाँ उसका कोड है:

 //   -   function getCoordinates( x, y, z ) { const n = Math.pow( 2, z ) const lon = x / n * 360.0 - 180.0 const lat = 180.0 * ( Math.atan( Math.sinh( Math.PI * ( 1 - 2 * y / n) ) ) ) / Math.PI return { lat: lat, lon: lon } } //          function getCenter( left, rigth, top, bottom ) { let lat = ( left + rigth ) / 2 let lon = ( top + bottom ) / 2 return { lat: lat, lon: lon } } //        function getAllCoordinates( stringX, stringY, stringZ ) { //      const x = Number( stringX ) const y = Number( stringY ) const z = Number( stringZ ) //     //    -  -  const topLeft = getCoordinates( x, y, z ) const bottomRight = getCoordinates( x+1, y+1, z ) //   const center = getCenter( topLeft.lat, bottomRight.lat, topLeft.lon, bottomRight.lon ) //   const bBox = { latMin: bottomRight.lat, lonMin: topLeft.lon, latMax: topLeft.lat, lonMax: bottomRight.lon } return { bBox: bBox, center: center } } module.exports.getAllCoordinates = getAllCoordinates

अब हम ब्राउज़र के साथ काम करने के लिए स्क्रिप्ट को लागू करना शुरू करने के लिए तैयार हैं। आइए देखें कि यह कैसे किया जा सकता है।

परिदृश्य 1 - एपीआई खोज

आइए सरलतम मामले से शुरू करें, जब आप मानचित्र पृष्ठ के URL में निर्देशांक दर्ज कर सकते हैं। उदाहरण के लिए, इस तरह:

https://nakarte.me/#m=5/50.28144/89.30666&l=O/Wp

आइए स्क्रिप्ट देखें। बस प्रतिस्थापित करें, mapshoter.js फ़ाइल की संपूर्ण सामग्री को हटा दें और नीचे दिए गए कोड को पेस्ट करें।

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

अगला, हम वांछित टाइल के केंद्र के निर्देशांक की गणना करते हैं। हम उन्हें URL में पेस्ट करते हैं और उस पर क्लिक करते हैं। टाइल बिल्कुल स्क्रीन के केंद्र में दिखाई देती है। 256x256 पिक्सेल का एक टुकड़ा काटें। यह वह टाइल होगी जो हमें चाहिए। यह केवल उपयोगकर्ता को वापस करने के लिए बनी हुई है।

कोड पर जाने से पहले, मैं ध्यान देता हूं कि स्पष्टता के लिए, स्क्रिप्ट से सभी त्रुटि हैंडलिंग हटा दी गई है।

 const puppeteer = require( 'puppeteer' ) const geoTools = require( './geoTools' ) async function makeTile( x, y, z ) { //    ,    Heroku const herokuDeploymentParams = {'args' : ['--no-sandbox', '--disable-setuid-sandbox']} const browser = await puppeteer.launch( herokuDeploymentParams ) //        //       const page = await browser.newPage() await page.setViewport( { width: 660, height: 400 } ) //         URL const coordinates = geoTools.getAllCoordinates( x, y, z ) const centerCoordinates = `${z}/${coordinates.center.lat}/${coordinates.center.lon}&l=` const pageUrl = 'https://nakarte.me/#m=' + centerCoordinates + "O/Wp" //   URL  ,    await page.goto( pageUrl, { waitUntil: 'networkidle0', timeout: 20000 } ) //    const cropOptions = { fullPage: false, clip: { x: 202, y: 67, width: 256, height: 256 } } const screenshot = await page.screenshot( cropOptions ) //      await browser.close() return screenshot } module.exports.makeTile = makeTile

अब हमारी स्क्रिप्ट चलाएं और इस अनुभाग के लिए मानचित्र देखें।

http://localhost:5000/24/10/5

यदि सब कुछ सही ढंग से किया जाता है, तो सर्वर को ऐसी टाइल वापस करनी चाहिए:

यह सुनिश्चित करने के लिए कि हम फसल बनाते समय कुछ भी नहीं मिलाते हैं, हमारी टाइल की तुलना OpenStreetMaps.org के मूल से करें

परिदृश्य 2 - साइट इंटरफ़ेस का उपयोग करके खोजें

हालांकि, ब्राउज़र लाइन के माध्यम से कार्ड को नियंत्रित करना हमेशा संभव नहीं होता है। खैर, ऐसे मामलों में, हमारी स्क्रिप्ट एक वास्तविक जीवित उपयोगकर्ता की तरह व्यवहार करेगी। वह खोज बॉक्स में निर्देशांक प्रिंट करेगा और खोज बटन पर क्लिक करेगा। उसके बाद, वह पाया बिंदु के मार्कर को हटा देगा, जो आमतौर पर स्क्रीन के केंद्र में दिखाई देता है। और फिर वह तब तक बटन पर क्लिक करेगा जब तक कि वह वांछित तक नहीं पहुंच जाता है, पैमाने को बढ़ाने या घटाने के लिए। फिर यह एक स्क्रीनशॉट लेगा और इसे उपयोगकर्ता को लौटा देगा।

मैं ध्यान देता हूं कि आमतौर पर खोज के बाद उसी पैमाने को सेट किया जाता है। 15 वें, उदाहरण के लिए। हमारे उदाहरण में, ऐसा हमेशा नहीं होता है। इसलिए, हम पृष्ठ पर HTML तत्वों के मापदंडों से ज़ूम स्तर को पहचानेंगे।

इस उदाहरण में भी, हम XPath चयनकर्ताओं का उपयोग करके इंटरफ़ेस तत्वों की तलाश करेंगे। लेकिन आप उन्हें कैसे पहचानते हैं?

ऐसा करने के लिए, ब्राउज़र में आवश्यक पृष्ठ खोलें और डेवलपर टूलबार खोलें (Google Chrome के लिए Ctll + Alt + I )। आइटम का चयन करने के लिए बटन दबाएं। हम उस तत्व पर क्लिक करते हैं जिसमें आप रुचि रखते हैं (मैं खोज क्षेत्र पर क्लिक करता हूं)।

आइटम की सूची उस पर स्क्रॉल करती है जिसे आपने क्लिक किया था और इसे नीले रंग में हाइलाइट किया गया है। नाम के बाईं ओर तीन डॉट्स वाले बटन पर क्लिक करें।

पॉप-अप मेनू से, कॉपी चुनें। अगला, यदि आपको एक नियमित चयनकर्ता की आवश्यकता है, तो कॉपी चयनकर्ता पर क्लिक करें । लेकिन उसी उदाहरण के लिए, हम कॉपी XPath आइटम का उपयोग करेंगे।

अब इस कोड के साथ mapshoter.js फ़ाइल की सामग्री को बदलें। इसमें, मैंने पहले ही सभी आवश्यक इंटरफ़ेस तत्वों के लिए चयनकर्ताओं को एकत्र कर लिया है।

 const puppeteer = require( 'puppeteer' ) const geoTools = require( './geoTools' ) async function makeTile( x, y, z ) { //      const searchFieldXPath = '//*[@id="map"]/div[1]/div[1]/div/input' const zoomPlusXPath = '//*[@id="map"]/div[2]/div[2]/div[4]/div[1]/a[1]' const zoomMinusXPath = '//*[@id="map"]/div[2]/div[2]/div[4]/div[1]/a[2]' const directionButonXPath = '//*[@id="gtm-poi-card-get-directions"]' const deletePinButonXPatch = '//*[@id="map"]/div[1]/div/div/div[1]/div[2]/div/div[4]/div/div[4]' //         () const coordinates = geoTools.getAllCoordinates( x, y, z ) const centerCoordinates = `lat=${coordinates.center.lat} lng=${coordinates.center.lon}` //      const herokuDeploymentParams = {'args' : ['--no-sandbox', '--disable-setuid-sandbox']} const browser = await puppeteer.launch( herokuDeploymentParams ) const page = await browser.newPage() await page.setViewport( { width: 1100, height: 450 } ) //         const pageUrl = 'https://www.waze.com/en/livemap?utm_campaign=waze_website' await page.goto( pageUrl, { waitUntil: 'networkidle2', timeout: 10000 } ) //    ,      await click( searchFieldXPath, page ) //        await page.keyboard.type( centerCoordinates ) //  Enter    page.keyboard.press( 'Enter' ); //  500     await page.waitFor( 500 ) //       //       await click( directionButonXPath, page ) await page.waitFor( 100 ) await click( deletePinButonXPatch, page ) await page.waitFor( 100 ) //       //        while( z > await fetchCurrentZoom( page )) { await click( zoomPlusXPath, page ) await page.waitFor( 300 ) } while( z < await fetchCurrentZoom( page )) { await click( zoomMinusXPath, page ) await page.waitFor( 300 ) } //    const cropOptions = { fullPage: false, clip: { x: 422, y: 97, width: 256, height: 256 } } const screenshot = await page.screenshot( cropOptions ) //   await browser.close() return screenshot } //  : //        async function click( xPathSelector, page ) { await page.waitForXPath( xPathSelector ) const foundedElements = await page.$x( xPathSelector ) if ( foundedElements.length > 0 ) { await foundedElements[0].click() } else { throw new Error( "XPath element not found: ", xPathSelector ) } } //         html  async function fetchCurrentZoom( page ) { const xPathSelector = '//*[@id="map"]/div[2]' await page.waitForXPath( xPathSelector ) const elems = await page.$x(xPathSelector) const elementParams = await page.evaluate((...elems) => { return elems.map(e => e.className); }, ...elems); const zoom = elementParams[0].split('--zoom-').pop() return zoom } module.exports.makeTile = makeTile

हमारी स्क्रिप्ट चलाएँ और लिंक का अनुसरण करें। यदि सब कुछ सही ढंग से किया जाता है, तो स्क्रिप्ट इस टाइल की तरह हमारे पास वापस आ जाएगी।

http://localhost:5000/1237/640/11

अनुकूलन

सिद्धांत रूप में, ऊपर वर्णित दो विधियां वेक्टर मानचित्र के साथ कई साइटों से जुड़ने के लिए पर्याप्त हैं। लेकिन अगर आपको अचानक कुछ नए नक्शे तक पहुंच की आवश्यकता है, तो आपको केवल स्क्रिप्ट को mapshoter.js फ़ाइल में थोड़ा संशोधित करने की आवश्यकता होगी। यही है, इस पद्धति से नए कार्ड जोड़ना बहुत आसान हो जाता है। यह इसके फायदों में से है।

लेकिन इसके नुकसान भी हैं। और मुख्य एक काम की गति है। बस तुलना कीजिए। एक नियमित रास्टर टाइल को डाउनलोड करने में औसतन लगभग 0.5 सेकंड का समय लगता है। इस समय हमारी स्क्रिप्ट से एक टाइल प्राप्त करने में लगभग 8 सेकंड लगते हैं।

लेकिन वह सब नहीं है! हम एकल-थ्रेडेड नोड जेएस का उपयोग करते हैं और हमारे लंबे अनुरोध अंततः मुख्य धागे को अवरुद्ध करेंगे, जो बाहर से एक नियमित तुल्यकालिक कतार की तरह दिखाई देगा। और जब हम पूरी स्क्रीन के लिए मानचित्र डाउनलोड करने का प्रयास करते हैं (जिस पर, उदाहरण के लिए, 24 टाइलें रखी जाती हैं), अर्थात, किसी समस्या का सामना करने का जोखिम होता है।

और एक बात। कुछ नाविकों का समय समाप्त हो गया है: वे 30 सेकंड के बाद लोड करना बंद कर देंगे। और इसका मतलब है कि वर्तमान कार्यान्वयन के साथ केवल 3-4 टाइलों को लोड करने का समय होगा। खैर, आइए देखें कि हम इसके बारे में क्या कर सकते हैं।

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

दूसरे, यह अभी भी है कि कार्यकर्ता_थ्रेड्स मॉड्यूल का उपयोग करके नोड जेएस पर मल्टीथ्रेडिंग को लागू करना संभव है। मेरी टिप्पणियों के अनुसार, मुफ्त हरोकू खाते में सिंगल-कोर प्रोसेसर वाले सर्वर पर, मैं तीन थ्रेड शुरू करने का प्रबंधन करता हूं। प्रत्येक में एक अलग ब्राउज़र के साथ तीन धाराएँ, जो एक दूसरे को अवरुद्ध किए बिना एक साथ काम कर सकती हैं। निष्पक्षता में, मैं ध्यान देता हूं कि प्रोसेसर पर बढ़ते लोड के परिणामस्वरूप, एक टाइल की डाउनलोड गति थोड़ी भी बढ़ गई। हालांकि, यदि आप पूरी स्क्रीन के लिए मानचित्र डाउनलोड करने का प्रयास करते हैं, तो 30 सेकंड के बाद आधे से अधिक मानचित्र लोड होने का समय होगा। 12 से अधिक टाइलें। पहले से बेहतर है।

तीसरा। स्क्रिप्ट के वर्तमान कार्यान्वयन में, प्रत्येक अनुरोध के साथ, हम क्रोम ब्राउज़र डाउनलोड करने में समय बिताते हैं, और फिर इसे पूरा कर रहे हैं। अब हम पहले से एक ब्राउज़र बनाएंगे और इसे mapshoter.js में लिंक ट्रांसफर करेंगे। नतीजतन, गति पहले अनुरोध के लिए नहीं बदलेगी। लेकिन बाद के सभी डाउनलोड के लिए एक टाइल की गति 4 सेकंड तक कम हो जाती है। और 30 सेकंड के बाद पूरे नक्शे में लोड करने का समय है - सभी 24 टाइलें जो मेरी स्क्रीन पर रखी गई हैं।

ठीक है, यदि आप यह सब लागू करते हैं, तो स्क्रिप्ट काफी व्यवहार्य हो सकती है। तो चलिए शुरू करते हैं। मल्टीथ्रेडिंग के साथ अधिक सरल काम के लिए, मैं नोड-वर्कर-थ्रेड्स-पूल मॉड्यूल का उपयोग करूंगा - कार्यकर्ता_क्रेड्स पर एक प्रकार का आवरण। इसे स्थापित करते हैं।

$ npm install node-worker-threads-pool --save

राउटर को ठीक करें। जेएस फाइल। इसे थ्रेड पूल के निर्माण में जोड़ें। धागे 3 टुकड़े होंगे। उनका कोड कार्यकर्ता की जेएस फाइल में वर्णित किया जाएगा, हम इसे बाद में देखेंगे। इस बीच, स्क्रीनशॉट मॉड्यूल के लॉन्च को सीधे हटा दें। इसके बजाय, हम थ्रेड पूल में एक नया कार्य जोड़ेंगे। थ्रेड्स में से किसी को मुक्त करने पर वे इसे संसाधित करना शुरू कर देंगे।

 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', async ( req, res, next ) => { const x = req.params.x const y = req.params.y const z = req.params.z //       //       const screenshot = await workersPool.exec( { x, y, z } ) const imageBuffer = Buffer.from( screenshot, 'base64' ) res.writeHead( 200, { 'Content-Type': 'image/png', 'Content-Length': imageBuffer.length }) res.end( imageBuffer ) })

अब कार्यकर्ता.जेएस फ़ाइल पर एक नज़र डालें। हर बार एक नया कार्य आने पर, parentPort.on () विधि लॉन्च की जाएगी। दुर्भाग्य से, यह async / प्रतीक्षा कार्यों को संभाल नहीं सकता है। इसलिए हम doMyAsyncCode () विधि के रूप में एडेप्टर फ़ंक्शन का उपयोग करेंगे।

इसमें एक सुविधाजनक पठनीय प्रारूप में हम कार्यकर्ता के तर्क को रखेंगे। यही है, ब्राउज़र लॉन्च करें (यदि यह पहले से ही चालू नहीं है) और स्क्रीनशॉट लेने के लिए विधि को सक्रिय करें। स्टार्टअप पर, हम इस विधि को रनिंग ब्राउज़र का लिंक देंगे।

 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/aswit //     async function doMyAsyncCode( params ) { //      await prepareEnviroment() //     const screenshot = await mapshoter.makeTile( params.x, params.y, params.z, 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, browserLink ) { //      const browser = await browserLink //      const page = await browser.newPage() await page.setViewport( { width: 660, height: 400 } ) const coordinates = geoTools.getAllCoordinates( x, y, z ) const centerCoordinates = `${z}/${coordinates.center.lat}/${coordinates.center.lon}&l=` const pageUrl = 'https://nakarte.me/#m=' + centerCoordinates + "O/Wp" await page.goto( pageUrl, { waitUntil: 'networkidle0', timeout: 20000 } ) const cropOptions = { fullPage: false, clip: { x: 202, y: 67, width: 256, height: 256 } } const screenshot = await page.screenshot( cropOptions ) //   .   . await page.close() return screenshot } module.exports.makeTile = makeTile

सिद्धांत रूप में, यह सब है। अब आप सर्वर को किसी भी तरह से आपके लिए सुविधाजनक तरीके से परिणाम अपलोड कर सकते हैं। उदाहरण के लिए, docker के माध्यम से। यदि आप समाप्त परिणाम को देखना चाहते हैं, तो आप इस लिंक पर क्लिक कर सकते हैं। तुम भी मेरे GitHub पर पूर्ण परियोजना कोड पा सकते हैं।

निष्कर्ष

अब परिणाम का मूल्यांकन करते हैं। एक तरफ, सभी चालें किए जाने के बावजूद, डाउनलोड की गति अभी भी बहुत कम है। इसके अलावा, ब्रेक के कारण, इस तरह के कार्ड को स्क्रॉल करने के लिए बस अप्रिय है।

दूसरी ओर, यह स्क्रिप्ट फिर भी कार्ड के साथ मेल खाती है कि इससे पहले स्मार्टफोन पर नाविक से कनेक्ट करना आम तौर पर असंभव था। यह संभावना नहीं है कि यह समाधान कभी भी कार्टोग्राफिक डेटा प्राप्त करने की मुख्य विधि के रूप में लागू किया जाएगा। लेकिन यहां एक अतिरिक्त के रूप में, जिसकी मदद से, यदि आवश्यक हो, तो कुछ विदेशी कार्ड खोलना संभव होगा - यह काफी संभव है।

साथ ही, इस स्क्रिप्ट के फायदों में यह तथ्य शामिल है कि इसके साथ काम करना आसान है। लिखना आसान है। और, सबसे महत्वपूर्ण बात यह है कि किसी भी अन्य ऑनलाइन कार्ड को जोड़ने के लिए इसे आसानी से पुनः प्राप्त किया जा सकता है।

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

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