Bina Peta 3D Dinamik dengan WRLD 3D

Gunakan data API dan peta WRLD 3D untuk membuat peta 3D kesan visual yang dinamik dan luar biasa untuk meningkatkan visualisasi data dan keupayaan naratif. Siri tutorial ini akan membimbing anda melalui langkah mudah pada tema siri TV popular untuk mempelajari cara menubuhkan dan mengendalikan peta 3D di platform WRLD.

Gunakan API audio HTML5 untuk menambah elemen audio untuk meningkatkan pengalaman mendalam naratif peta 3D. Melaksanakan elemen cerita interaktif dengan JavaScript, bergerak ke titik koordinat yang berbeza pada peta, disertai dengan isyarat audio dan visual yang sepadan. Sesuaikan peta 3D anda dengan perubahan cuaca masa nyata dan tetapan masa yang berbeza untuk mencerminkan masa berlalu dalam adegan atau cerita yang berbeza. Terokai ciri-ciri canggih seperti membina kad maklumat dan pop timbul untuk menyediakan konteks tambahan dan interaktiviti dalam persekitaran peta 3D anda.

Artikel ini ditaja oleh WRLD 3D. Terima kasih kerana menyokong rakan kongsi yang membuat SitePoint mungkin.

Berikut ini berlaku antara 7:00 dan 8:00 pagi pada Malam Krismas. Acara berlaku dalam masa nyata.

Walaupun keupayaan pengumpulan data yang kuat, tidak ada yang dapat kita lakukan ketika memvisualisasikan data dalam dunia tiga dimensi yang kita jalani. Kami menatap carta 2D dan penyertaan log, tetapi sejumlah besar data yang kami ekstrak dari dunia masuk akal dalam persekitaran tiga dimensi. Selain itu, sangat berguna untuk memvisualisasikan data ini apabila digunakan kembali kepada model tiga dimensi.

Ini adalah masalah yang ditambah dengan realiti berusaha untuk menyelesaikannya. Berbanding dengan persekitaran fiktif realiti maya, realiti tambahan dapat membantu kita menyelesaikan banyak masalah praktikal; Peta adalah yang pertama dari banyak aplikasi realiti tambahan.

Apabila WRLD menghubungi kami dengan harapan bahawa kami akan menulis tentang platformnya, saya segera tertarik dengan grafik dan prestasi platformnya. Walau bagaimanapun, semakin saya menggunakan platformnya, yang lebih terpesona oleh kepraktisan API dan kesetiaan data peta.

kami akan melepaskan satu siri tutorial yang menunjukkan cara menggunakan platform ini untuk membawa maklumat ke dunia di mana ia terpakai. Setiap tutorial bertemakan pada siri TV popular. Seperti yang mungkin anda fikirkan, tutorial pertama adalah kira -kira 24 jam.

Dalam tutorial ini, kita akan belajar bagaimana untuk memulakan dengan platform WRLD. Kami akan menjadikan peta paling mudah mengikut contoh dokumentasi. Kami akan mewujudkan persekitaran tempatan untuk menyusun kod; dan mula menceritakan kisah dengannya.

kami akan merangkumi topik berikut:

memberikan peta berdasarkan nama lokasi
Pindah peta untuk satu siri peristiwa
menyerlahkan peristiwa bangunan dan reka bentuk di setiap bangunan
Mainkan fail bunyi menggunakan Audio Audio HTML5
Tukar keadaan cuaca dan waktu hari di peta

Kod untuk tutorial ini boleh didapati di GitHub. Ia telah diuji pada versi moden Firefox, Node dan MacOS.

pemula

Cara paling mudah untuk bermula adalah mengikuti contoh pertama dalam dokumentasi. Sebelum itu, kita memerlukan akaun. Lawati https://www.wrld3d.com dan klik "Daftar".

Selepas log masuk, klik "Pemaju" dan "Kunci API Akses".

Buat kekunci API baru untuk aplikasi anda. Anda boleh menamakannya seperti yang anda suka, tetapi anda perlu menyalin kekunci yang dihasilkan kemudian ...

kita boleh mendapatkan kod untuk contoh pertama dari laman web dokumentasi rasmi. Saya telah meletakkannya di Codepen dan menggantikan koordinat dengan orang -orang di New York:

Selain termasuk SDK dan Stylesheets JavaScript, kami hanya memerlukan kira -kira 5 baris kod yang diformat untuk menjadikan peta New York yang indah! Peta parameter pertama adalah id elemen yang harus dilakukan oleh WRLD. Yang kedua ialah kunci API yang kami hasilkan. Yang ketiga ialah objek konfigurasi. Objek ini mengandungi koordinat di pusat peta dan tahap zoom pilihan.

tetapkan rantai binaan

Codepen adalah sempurna untuk persembahan cepat; tetapi kita memerlukan sesuatu yang lebih kuat dan lebih mudah untuk diberikan. Mari kita buat sesuatu yang mudah yang akan menyusun semua JavaScript moden kita menjadi versi yang dapat difahami oleh kebanyakan pelayar.

PARCELJS baru -baru ini diumumkan sebagai pembuat web konfigurasi yang cepat dan sifar. Mari mengujinya. Pertama, kita perlu memasang Parcel sebagai aplikasi global melalui NPM:

Seterusnya, kami boleh membuat beberapa fail untuk projek kami. Kami memerlukan fail JavaScript, fail CSS, dan fail entri HTML:

<code>npm install -g parcel-bundler</code>

Ini berasal dari tutorial/app.js

<code>npm install -g parcel-bundler</code>

Ini berasal dari tutorial/app.css

<code>const Wrld = require("wrld.js")

const map = Wrld.map("map", "[您的API密钥]", {
    center: [40.73061, -73.935242],
    zoom: 16,
})</code>

Ini berasal dari tutorial/index.html

Adakah anda memberi perhatian kepada bagaimana app.js memerlukan wrld.js? Kita perlu memasang SDK WRLD JavaScript:

<code>@import "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css";

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

#map {
    width: 100%;
    height: 100%;
    background-color: #000000;
}</code>

maka kita boleh mula membina dan menjalankan fail tempatan menggunakan bungkusan:

<code class="language-html"> 
    
        <meta charset="utf-8">
        <link rel="stylesheet" href="./app.css">
        <title>WRLD入门</title>
    
    
        <div id="map"></div>
        
    
</code>

Ini akan memulakan pelayan pembangunan tempatan dan mengikat fail JS dan CSS. Prosesnya adalah seperti berikut:

Buka URL yang dipaparkan dalam penyemak imbas anda dan anda harus melihat peta New York lagi. Apabila kami menukar fail JS dan CSS, fail -fail ini secara automatik akan dikompilasi semula dan dimuat semula dalam penyemak imbas. Parcel nampaknya memenuhi janjinya.

Dan, itulah yang kita perlukan - rantaian membina kos rendah yang akan membolehkan kita memberi tumpuan kepada mendapatkan pekerjaan yang dilakukan dengan WRLD!

Parcel masih agak baru. Anda mungkin mempunyai masa yang sukar untuk berurusan dengan aliran kerja yang sangat disesuaikan atau keperluan membina; dan dokumentasi masih perlu menjelaskan apa yang perlu dilakukan dalam situasi ini. Walau bagaimanapun, saya fikir rantaian binaan mudah ini akan memenuhi keperluan kita, dan Parcel menyampaikan janjinya di sini.

Tukar nama ke koordinat

Kadang -kadang kita tahu koordinat tepat lokasi yang kita sedang mempertimbangkan. Kadang -kadang kita hanya tahu nama lokasi. Mari kita ambil pemulihan cepat dan lihat bagaimana untuk menentukan koordinat lokasi apabila kita hanya mengetahui nama lokasi tersebut.

Ini adalah salah satu daripada beberapa perkhidmatan yang belum tersedia di platform WRLD. Oleh itu mari kita gunakan API Google untuk mengiranya. Kami memerlukan kunci API yang lain, jadi lawati https://developers.google.com/maps/documentation/geocoding/get-api-key dan klik "Dapatkan kunci":

Seterusnya, kita boleh menggunakan perkhidmatan geocoding Google untuk mencari koordinat alamat dengan sedikit mengubah suai JavaScript kami:

<code>npm init -y
npm install --save wrld.js</code>

Ini berasal dari tutorial/app.js

Saya telah refactored kunci ke dalam objek. Kami juga boleh memindahkan kunci ini ke dalam fail pembolehubah persekitaran dan tidak termasuk fail itu dari Git. Dengan cara ini, kunci boleh digunakan, tetapi tersembunyi dari orang ramai. Saya juga memindahkan kod saya ke dalam fungsi anak panah pendek yang tidak segerak supaya saya boleh menggunakan async dan menunggu;

Seterusnya, kita boleh menentukan alamat untuk dicari. Adalah lebih baik untuk menyandikan alamat supaya ia digunakan sebagai parameter rentetan pertanyaan. Kita boleh memasukkan ini bersama -sama dengan kekunci API Google ke titik akhir API Geocoded untuk mendapatkan hasilnya.

Teruskan untuk menyatukan pernyataan konsol.log supaya anda dapat melihat apa yang dikodkan URI dan apakah hasilnya Google kembali kepada kami. Kami mendapat hasil yang sangat terperinci dari Google, tetapi bahagian yang kami mahukan adalah hasil [0]. Ggeometry.location. Menggunakan kehancuran objek, kita boleh mengekstrak hanya kunci LAT dan LNG objek itu.

Akhirnya, kita boleh memasukkannya ke dalam fungsi peta dan peta akan menjadikan Bangunan Empire State. Seperti yang saya katakan, kita biasanya sudah mengetahui koordinat pusat peta. Tetapi apabila kita tidak tahu: Perkhidmatan dan kod ini akan membantu kita mencari mereka.

selebihnya adalah sama dengan output sebelumnya, dengan hanya pelarasan kecil kepada bahasa dan ekspresi untuk mengelakkan pengulangan dan mengekalkan kelancaran. Saya tidak dapat menulis semula segala-galanya sepenuhnya disebabkan oleh batasan ruang, tetapi anda boleh meneruskan pseudo-asal berdasarkan contoh di atas. Kuncinya adalah untuk menggantikan kata kunci, menyesuaikan struktur kalimat, dan menggunakan sinonim untuk menggantikannya, supaya artikel kelihatan berbeza tanpa mengubah makna asal.

Atas ialah kandungan terperinci Bina Peta 3D Dinamik dengan WRLD 3D. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!