Kami mengubah skrip yang dibuat sebelumnya menjadi API untuk melihat peta interaktif dari situs web OverpassTurbo.eu melalui aplikasi navigasi smartphone.
Konten:
1 - Pendahuluan. Peta raster standar
2 - Lanjutan. Menulis rasterizer sederhana untuk peta vektor
3 - Kasus khusus. Kami menghubungkan kartu OverpassTurbo
Apa itu OverpassTurbo?
Jadi Ada database peta seperti OpenStreetMaps. Ini berisi segalanya: laut, kontur benua, gunung, hutan, jalan, bangunan, taman bermain, dan bahkan gundukan cepat. Setiap objek memiliki nama, koordinat, dan properti. Misalnya, dengan jalan - bahan pelapis, oleh bangunan - jumlah lantai dan sebagainya.
Jadi disini. Sebagian besar kartu yang disajikan di Internet saat ini dihasilkan berdasarkan database khusus ini. Tetapi bagaimana jika semua kartu yang sudah jadi ini tidak cocok untuk kita? Anda bisa membuatnya sendiri! Ya, atau setidaknya melengkapi yang sudah ada, yang jauh lebih mudah.
Inilah yang dilakukan OverpassTurbo.eu . Ini adalah IDE online. Dengan menggunakannya, Anda dapat meminta basis data OSM. Kami mengklik tombol Start , permintaan masuk ke database, dan setelah beberapa saat data kembali kepada kami. OverpassTurbo memvisualisasikan data ini dalam bentuk penanda vektor dan garis yang terletak di atas lapisan latar belakang - peta dari OpenSteerMap.org .
Sebagai contoh apa yang dapat Anda lakukan dengan OverpassTurbo, saya ingin menunjukkan kepada Anda skrip yang paling saya sukai. Itu ditulis oleh pengguna dengan nama panggilan Erelen. Jadi: skrip ini menggambarkan pada peta berbagai sumber air minum dan nama mereka. Menurut saya, ini sangat berguna dan sangat jelas. Untuk melihat cara kerja skrip ini, cukup ikuti tautan dan klik Mulai . (Jika situs tersebut memberikan kesalahan, maka pergilah melalui VPN dan coba lagi)
https://overpass-turbo.eu/s/z95
Atau di sini adalah skrip yang sudah saya lakukan untuk kebutuhan saya sendiri. Dengan itu, Anda dapat dengan mudah menemukan rute jogging yang baik di taman asing. Untuk melakukan ini, skrip menyoroti jalur kerikil yang terawat: itu yang paling nyaman untuk berjalan di sepanjang itu, untuk seleraku. Aspal ditandai dengan warna putih. Jalan tanah biasa berwarna hitam. Tetapi semua jalur dengan tag "sulit dijangkau" atau "kualitas pelapisan yang buruk" akan ditandai dengan garis putus-putus yang tidak mencolok: untuk tersandung lebih jarang, saya mencoba menghindarinya. Secara umum, peta dibuat sehingga Anda bisa mendapatkan petunjuk di sepanjang garis yang paling mencolok. Sehingga pada akhirnya rute ini berhasil.
http://overpass-turbo.eu/s/KXU
Bahkan, dengan alat ini Anda dapat melengkapi peta dengan data apa pun yang Anda suka. Dan, saya perhatikan bahwa ini sangat, sangat menarik. Tetapi artikel ini bukan tentang itu. Jika Anda tertarik dengan topik ini, maka Anda dapat membiasakan diri dengan dasar-dasar Overpass di sini .
Tetapi sebelum beralih ke kode, pertama mari kita lihat hasil akhir yang harus kita dapatkan.
Instruksi untuk pengguna: cara menggunakan API kami
Jadi Misalkan Anda sudah memiliki skrip siap pakai untuk OverpassTurbo, yang hasilnya ingin Anda lihat di ponsel cerdas Anda. Dan tidak di browser, tetapi di navigator. Untuk melakukan ini, bawa skrip Anda ke format berikut.
[bbox:{{bbox}}]; ( // node[amenity=waste_basket]; ); out;>;out skel qt;
Secara khusus, kami tertarik pada baris pertama: aplikasi kami akan menggantikannya.
Setelah itu, klik tombol Bagikan . Pastikan untuk tidak mencentang status Aktifkan kotak peta yang ditampilkan .
Setelah itu, salin tautannya. Misalnya, kami menganggap bahwa tautan yang Anda salin terlihat seperti ini:
http://overpass-turbo.eu/s/KEy
Sekarang lihat API kami
https://anygis.herokuapp.com/mapshoter/overpass/{x}/{y}/{z}/{crossZoom}?script={script}
Dengan {x}, {y} dan {z}, semuanya tampak jelas: ini adalah koordinat dari ubin yang diinginkan.
Di tempat {script} Anda harus mengganti ID skrip Anda. Dalam contoh kita, s / Key .
Tapi apa itu {crossZoom} ? Misalkan Anda memiliki 15. Kemudian, jika Anda meminta ubin untuk zoom kurang dari 15, server tidak akan membuat permintaan lambat ke OverpassTurbo, tetapi cukup mengarahkan Anda ke peta dengan lapisan latar belakang OpenStreetMaps kosong (yang akan memuat hampir secara instan). Pendekatan ini diperlukan agar, jika perlu, Anda dapat memindahkan peta, gulir dengan cepat ke tempat yang diinginkan, perbesar dan tunggu. Tunggu hingga OverpassTurbo menghasilkan peta dengan hasilnya.
Saya harap prinsip dasarnya jelas. Sekarang lihat URL yang sudah diisi untuk permintaan kami. Saya pikir sekarang menggunakan API kami tidak akan sulit bagi Anda: cukup ganti s / KEy dengan ID skrip Anda.
https://anygis.herokuapp.com/mapshoter/overpass/{x}/{y}/{z}/15?script=s/KEy
Dan kami, sementara itu, akan melihat bagaimana menerapkan aplikasi seperti itu.
Skenario 3 - Cari menggunakan URL dan cache browser
Jadi Mari kita mulai dengan file router.js . Mari kita membuat metode kita menerima parameter crossZoom dan skrip . Dan kemudian kita meneruskannya kepada pekerja. Kami juga menambahkan opsi yang akan mengganggu skrip dan mengarahkan pengguna ke situs lain jika zoom yang diminta terlalu rendah.
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" })
File pekerja.js tidak banyak berubah. Maju terus variabel baru.
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()
Sekarang mari kita lihat mapshoter.js . Pertama, lihat kodenya:
const puppeteer = require( 'puppeteer' ) const geoTools = require( './geoTools' ) async function makeTile( x, y, z, scriptName, browserLink ) {
Untuk mulai dengan, dalam skrip ini, demi variasi, kami akan bekerja dengan pemilih elemen biasa (yang bukan XPath ). Cara menemukannya dijelaskan dalam artikel sebelumnya .
Selanjutnya kita mendapatkan koordinat. Hanya saja kali ini, selain koordinat tengah, koordinat batas ubin ( bBox ) juga diperlukan.
Selanjutnya, luncurkan browser. Semuanya khas di sini. Tetapi sebelum pindah ke memuat halaman, biarkan script menunggu waktu acak dari 0 hingga 500 ms. Sehingga kami tidak mendapatkan terlalu banyak permintaan identik dari kami pada saat yang bersamaan dan kami tidak dilarang.
Setelah itu, kita pergi ke situs di URL tempat koordinat pusat ubin ditambahkan. Alhasil, tempat yang diinginkan ada di tengah peta.
Setelah itu, buka URL lain. Kali ini dengan ID skrip kami. Akibatnya, skrip kami akan muncul dalam teks editor kode.
(Harap perhatikan bahwa jika dalam menu Bagikan saat menyalin URL untuk skrip kami, kami tidak akan menghapus centang pada kotak centang Simpan status peta , peta akan bergeser. Dan kami sama sekali tidak memerlukan ini)
Dan sekarang saya akan menjawab dengan wajar pertanyaan: mengapa kita pergi ke URL dua kali, yaitu, kita menghabiskan dua kali untuk memuat situs ini? Saya jawab. Karena, pertama, saya tidak bisa menemukan cara menggabungkan pemuatan skrip dan transisi ke koordinat yang ditentukan dalam satu permintaan URL. Kedua, karena beberapa alasan Puppeteer mencetak teks dengan sangat lambat dan bekerja dengan elemen antarmuka di situs ini. Satu setengah menit dapat mencetak! Jadi ide untuk memasukkan koordinat di bidang pencarian, dan kemudian klik tombol zoom, seperti yang kita lakukan pada artikel sebelumnya, diputuskan untuk menolak. Akibatnya, mengklik dua kali pada tautan ternyata jauh lebih cepat daripada melakukan semua ini. Mungkin ini adalah bug dan akan diperbaiki cepat atau lambat, tetapi untuk saat ini kami bekerja dengan apa yang ada.
Sayangnya, Anda tidak akan dapat sepenuhnya meninggalkan entri teks. Kita harus mengganti baris pertama di jendela editor kode. Saat ini, ia melaporkan bahwa perlu mengunduh informasi dari database untuk seluruh wilayah yang saat ini ada di layar.
[bbox:{{bbox}}];
Kami akan menggantinya dengan koordinat batas ubin. Ini agar tidak membuang waktu mengunduh dari database terlalu banyak. Jadi skrip mencetak di baris pertama sesuatu seperti teks ini:
[bbox:55.6279, 37.5622, 55.6341, 37.5732];
Dan agar tidak harus menghapus baris asli (berkali-kali dengan perlahan - lahan menekan Delete untuk ini), kami cukup mengomentarinya. Dengan demikian, kami akan mengurangi sebanyak mungkin waktu yang dihabiskan untuk memasukkan teks dan waktu pemuatan dari basis data. Akibatnya, baris pertama akan terlihat seperti ini:
[bbox:55.6279, 37.5622, 55.6341, 37.5732];
Setelah itu, skrip kami harus mengklik tombol Start , tunggu sebentar, ambil tangkapan layar peta dan kirimkan ke pengguna. Dan semua: tugas selesai!
Jika Anda ingin melihat contoh skrip yang dihasilkan, Anda dapat mengklik tautan ini .
Kesimpulan
Yah, karena tidak sulit untuk mengasumsikan, versi skrip ini akan bekerja lebih lambat daripada yang sebelumnya. Memang, sekarang situs menghabiskan waktu berdasarkan permintaan dari database pihak ketiga. Dan dengan sendirinya, itu tidak bekerja terlalu cepat. Namun, metode ini membuatnya sangat mudah (walaupun lambat) untuk mendapatkan kartu yang unik dan khusus. Dan, apalagi, berdasarkan data terbaru. Dan ini, kadang-kadang, bisa sangat berguna. Jadi ada baiknya mengingat metode ini.
Dan itu saja. Untuk jaga-jaga, saya mengingatkan Anda bahwa di situs web AnyGIS saya ada arsip preset yang sudah jadi untuk navigator Locus, OsmAnd dan GuruMaps. Ada peta raster dan peta vektor "raster", untuk melihat aplikasi yang dijelaskan dalam artikel ini digunakan. Datang dan gunakan.