نحن نربط الخرائط عبر الإنترنت مع المستكشف على الهاتف الذكي. الجزء 3 - OverpassTurbo

نقوم بتحويل البرنامج النصي الذي تم إنشاؤه مسبقًا إلى واجهة برمجة التطبيقات لعرض خريطة تفاعلية من موقع OverpassTurbo.eu عبر تطبيق التنقل للهاتف الذكي.

المحتويات:

1 - مقدمة. الخرائط النقطية القياسية
2 - استمرار. كتابة أداة تنقيط بسيطة لخرائط المتجهات
3 - حالة خاصة. نقوم بتوصيل بطاقة OverpassTurbo

ما هو OverpassTurbo؟

هكذا. هناك قاعدة بيانات خريطة مثل OpenStreetMaps. أنه يحتوي على كل شيء: البحار ، معالم القارات ، الجبال ، الغابات ، الطرق ، المباني ، الملاعب وحتى المطبات السريعة. كل كائن له اسم ، الإحداثيات والخصائص. على سبيل المثال ، على الطريق - مواد الطلاء ، حسب المبنى - عدد الطوابق وما إلى ذلك.

لذلك هنا. يتم إنشاء معظم البطاقات التي يتم عرضها على الإنترنت اليوم على أساس قاعدة البيانات هذه. ولكن ماذا لو كانت كل هذه البطاقات الجاهزة لا تناسبنا؟ يمكنك جعل بنفسك! حسنا ، أو على الأقل تكملة واحدة القائمة ، والتي هي أسهل بكثير.

هذا ما تفعله OverpassTurbo.eu . وهو IDE على الانترنت. باستخدامه ، يمكنك الاستعلام عن قاعدة بيانات OSM. نضغط على زر " ابدأ" ، ويذهب الطلب إلى قاعدة البيانات ، وبعد فترة تعود البيانات إلينا. OverpassTurbo يصور هذه البيانات في شكل علامات متجهة وخطوط موجودة أعلى طبقة الخلفية - خريطة من OpenSteerMap.org .

كمثال على ما يمكنك فعله مع OverpassTurbo ، أريد أن أوضح لك النص الذي أعجبني أكثر. تمت كتابته بواسطة مستخدم تحت الاسم المستعار Erelen. لذلك: يرسم هذا السيناريو على الخريطة مصادر مختلفة لمياه الشرب واسمها. في رأيي ، إنه مفيد للغاية وواضح للغاية. لمعرفة كيفية عمل هذا البرنامج النصي ، ما عليك سوى اتباع الرابط والنقر فوق " ابدأ" . (إذا حدث خطأ في الموقع ، فانتقل عبر VPN وحاول مرة أخرى)

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

أو هنا هو السيناريو الذي قمت به بالفعل لتلبية احتياجاتي الخاصة. مع ذلك ، يمكنك بسهولة العثور على طرق الركض جيدة في الحدائق غير مألوفة. للقيام بذلك ، يسلط النص الضوء على مسارات الحصى ذات الألوان الزاهية: إنه من الأنسب الركض على طول هذه المسارات ، حسب ذوقي. يتميز الأسفلت باللون الأبيض. مسارات ترابية عادية باللون الأسود. ولكن سيتم تمييز جميع المسارات التي تحمل علامة "يصعب الوصول إليها" أو "تدني جودة الطلاء" بخط متقطع غير واضح: من أجل التعثر في كثير من الأحيان ، أحاول تجنبها. بشكل عام ، تم تصميم الخريطة بحيث يمكنك ببساطة الحصول على الاتجاهات على طول الخطوط الأكثر لفتًا للنظر. وفي النهاية هذا الطريق ناجح.

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

في الواقع ، يمكنك من خلال هذه الأداة استكمال الخريطة بأي بيانات تريدها. وألاحظ أن هذا مثير للغاية. لكن هذا المقال ليس عن ذلك. إذا كنت مهتمًا بهذا الموضوع ، فيمكنك التعرف على أساسيات Overpass هنا .

ولكن قبل الانتقال إلى الكود ، دعونا أولاً نلقي نظرة على النتيجة النهائية التي يجب أن نحصل عليها.

تعليمات للمستخدمين: كيفية استخدام API لدينا

هكذا. افترض أن لديك بالفعل برنامج نصي جاهز لـ OverpassTurbo ، والذي ترغب في رؤية النتائج على هاتفك الذكي. وليس في المتصفح ، ولكن في المستكشف. للقيام بذلك ، قم بإحضار البرنامج النصي الخاص بك إلى التنسيق التالي.

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

على وجه الخصوص ، نحن مهتمون بالسطر الأول: سيحل تطبيقنا مكانه.

بعد ذلك ، انقر فوق الزر " مشاركة" . تأكد من إلغاء تحديد حالة تمكين مربع الخريطة المعروضة .

بعد ذلك ، انسخ الرابط. على سبيل المثال ، نفترض أن رابطك المنسوخ يبدو كما يلي:

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

انظر الآن إلى API لدينا

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

مع {x} و {y} و {z} ، يبدو أن كل شيء واضح: هذه هي إحداثيات التجانب المطلوب.

بدلاً من {script} ، يجب استبدال معرّف البرنامج النصي. في مثالنا ، ق / مفتاح .

ولكن ما هو {crossZoom} ؟ لنفترض أن لديك 15. إذا قمت بطلب تجانب بتكبير أقل من 15 ، فلن يقدم الخادم طلبًا بطيئًا إلى OverpassTurbo ، ولكن ببساطة يعيد توجيهك إلى الخريطة بطبقة خلفية فارغة لـ OpenStreetMaps (والتي سيتم تحميلها على الفور تقريبًا). هناك حاجة إلى هذا النهج بحيث يمكنك ، إذا لزم الأمر ، تحريك الخريطة بعيدًا ، والتمرير بسرعة إلى مكان الاهتمام ، والتكبير ، والانتظار. انتظر حتى ينشئ OverpassTurbo خريطة بالنتائج.

آمل أن المبدأ الأساسي واضح. الآن انظر إلى عنوان URL المكتمل لطلبنا. أعتقد أن استخدام واجهة برمجة التطبيقات لدينا الآن لن يكون أمرًا صعبًا بالنسبة لك: فقط استبدل s / KEy بمعرف البرنامج النصي الخاص بك.

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

ونحن ، في الوقت نفسه ، سوف نرى كيفية تنفيذ مثل هذا التطبيق.

السيناريو 3 - البحث باستخدام URL وذاكرة التخزين المؤقت للمستعرض

هكذا. لنبدأ بملف router.js . دعنا نجعل طريقتنا تقبل معلمات crossZoom والبرنامج النصي . ثم ننقلهم إلى العامل. نضيف أيضًا خيارًا من شأنه مقاطعة البرنامج النصي وإعادة توجيه المستخدم إلى موقع آخر إذا كان التكبير المطلوب منخفضًا جدًا.

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

الملف worker.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 واحد. ثانياً ، لأنه لسبب ما يقوم Puppeteer بطباعة النص ببطء شديد ويعمل مع عناصر الواجهة على هذا الموقع. دقيقة ونصف يمكن الطباعة! لذا فإن فكرة إدراج الإحداثيات في حقل البحث ، ثم النقر على أزرار التكبير ، كما فعلنا في المقالة السابقة ، تقرر الرفض. ونتيجة لذلك ، فإن النقر المزدوج على الرابط تحول أسرع بكثير من القيام بكل هذا. ربما يكون هذا خطأ وسيتم إصلاحه عاجلاً أم آجلاً ، لكن الآن نحن نعمل مع ما هو عليه.

للأسف ، لن تتمكن من ترك إدخال النص بالكامل. سيتعين علينا استبدال السطر الأول في نافذة محرر الشفرة. في الوقت الحالي ، أبلغت أنه من الضروري تنزيل المعلومات من قاعدة البيانات لكامل المنطقة الموجودة حاليًا على الشاشة.

 [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. توجد خرائط نقطية وخرائط متجه "منقطة" ، لعرض التطبيق الذي تم وصفه في هذه المقالات. تعال واستخدم.