Cara Membuat Peta Mall dengan Data Masa Nyata Menggunakan WRLD

Tutorial ini menunjukkan bangunan interaktif, peta mall 3D masa nyata menggunakan WRLD, meningkatkan pengalaman pengguna dengan maklumat dan navigasi kedai dinamik. Kami akan membuat dua demo: satu menambah penanda interaktif ke peta mall dalaman, yang lain menunjukkan kapasiti letak kereta dengan poligon berwarna. Projek lengkap boleh didapati di GitHub.

Beyond Peta Google Simple, WRLD membolehkan peta 3D dalaman dengan penanda interaktif, menawarkan pengalaman pengguna yang unik dan interaksi UI dalam peta.

Tutorial ini merangkumi:

Menyediakan:
• Mendapatkan kunci API WRLD dan menyediakan persekitaran pembangunan anda (node.js, npm, benang).
dua pendekatan:
• menggunakan alat terbina dalam WRLD (pereka peta, pereka tempat) untuk penyelesaian bebas kod, atau membina aplikasi tersuai untuk fleksibiliti yang lebih besar.
Kawalan peta dalaman:
• Melaksanakan kawalan untuk navigasi lantai yang mudah di dalam pusat membeli -belah.
Pandangan dalaman automatik:
• Menetapkan peta untuk memuatkan secara automatik ke dalam pandangan dalaman.
kad kedai tersuai:
• Membuat kad kedai dinamik yang memaparkan data masa nyata (promosi, ketersediaan).
Visualisasi ketersediaan tempat letak kereta:
• Menggunakan poligon berwarna untuk mewakili penghunian ruang letak kereta.

Prasyarat:

Pemahaman asas mengenai modul JavaScript DOM, ES6, dan ES6. Kebiasaan dengan platform WRLD berguna tetapi tidak diperlukan.

Bermula:

Buat akaun WRLD percuma dan dapatkan kunci API anda (lihat "Bangunan Peta 3D Dinamik" untuk arahan).

Membina Peta (Pendekatan App Custom):

Persediaan projek
1. : Buat folder projek, Inisialisasi package.json, dan buat direktori dan fail yang diperlukan (src/js, src/css, index.html, app.js, app.css, env .js).
2. Dependencies: Pasang wrld.js, axios, Babel (untuk penyusunan ES6), Parcel (Bundler), dan JSON Server (untuk API dummy).
3. Kunci API: Tambahkan kekunci API WRLD anda ke env.js.
4. Peta Asas: Buat peta asas menggunakan Wrld.map() dalam app.js, menentukan kunci API anda, koordinat pusat, tahap zum, dan membolehkan peta dalaman.
5. Kawalan dalaman: Tambah skrip yang diperlukan (jQuery, jQuery ui, indoor_control.js) dan container div (widget-container) ke index.html. Mulakan kawalan dalaman dalam app.js.
6. Kemasukan dalaman automatik: Tentukan ID peta dalaman dari acara indoormapenter dan gunakan map.indoors.enter() untuk memasuki paparan dalaman secara automatik pada beban peta.
7. Data kad kedai: Buat folder data dan mengisi dengan db.json yang mengandungi maklumat kedai (koordinat, butiran hubungan, jam pembukaan). Jalankan json-server --watch data/db.json untuk membuat pelayan API tempatan.
8. Reka Bentuk & Pelaksanaan Kad Kedai: Buat templat HTML untuk kad kedai (menggunakan JSrender) dan perkhidmatan (api-service.js) untuk mengambil data dari pelayan JSON. Melaksanakan Perkhidmatan Popup () untuk memaparkan kad kedai dalam popup pada klik penanda. Tambahkan penanda ke peta dalam popup-service.js, melampirkan pendengar klik untuk mencetuskan perkhidmatan pop timbul. app.js
9. Ketersediaan tempat letak kereta: Buat fail html berasingan () dan fail JavaScript (). Kumpulkan koordinat untuk zon letak kereta dan buat poligon menggunakan . Gunakan pengekodan warna untuk mewakili penghunian tempat letak kereta. Melaksanakan kemas kini masa nyata menggunakan socket.io (memasang parking.html, parking.js). Buat pelayan tersuai (Wrld.polygon()) untuk mengendalikan sambungan socket.io dan kemas kini tempat letak kereta siaran. Kemas kini kod pihak klien untuk mendengar dan mengendalikan kemas kini ini. socket.io socket.io-client server.js

Pecahan terperinci ini menyediakan panduan komprehensif untuk membina peta 3D interaktif ini. Ingatlah untuk berunding dengan pautan yang disediakan untuk coretan kod lengkap dan butiran lanjut. Kemungkinan untuk memperluaskan demo ini adalah luas, membolehkan integrasi dengan sumber data dunia sebenar dan pelbagai aplikasi.

Atas ialah kandungan terperinci Cara Membuat Peta Mall dengan Data Masa Nyata Menggunakan WRLD. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!