Erstellen Sie eine dynamische 3D -Karte mit WRLD 3D

Verwenden Sie WRLD 3D -API und Karte, um dynamische und ausstehende visuelle Effekte 3D -Karten zu erstellen, um die Datenvisualisierung und die narrativen Funktionen zu verbessern. Diese Tutorial -Serie führt Sie durch einfache Schritte in beliebten TV -Serien -Themen, um zu erfahren, wie Sie 3D -Karten auf der WRLD -Plattform einrichten und betreiben.

Verwenden Sie die HTML5 -Audio -API, um Audioelemente hinzuzufügen, um die immersive Erfahrung der 3D -Kartenerzählung zu verbessern. Implementieren Sie interaktive Story -Elemente mit JavaScript und wechseln Sie zu verschiedenen Koordinatenpunkten auf der Karte, begleitet von entsprechenden Audio- und visuellen Hinweisen. Passen Sie Ihre 3D-Karte mit Echtzeit-Wetteränderungen und unterschiedlichen Zeiteinstellungen an, um den Zeitverlust in verschiedenen Szenen oder Geschichten widerzuspiegeln. Erforschen Sie erweiterte Funktionen wie das Erstellen von Hervorhebungs- und Pop-up-Informationskarten, um zusätzlichen Kontext und Interaktivität in Ihrer 3D-Kartenumgebung bereitzustellen.

Dieser Artikel wird von WRLD 3D gesponsert. Vielen Dank, dass Sie die Partner unterstützt haben, die SitePoint ermöglicht haben.

Das Folgende passiert zwischen 7:00 und 8:00 Uhr am Heiligabend. Das Ereignis erfolgt in Echtzeit.

Trotz unserer starken Datenerfassungsfunktionen können wir nichts tun, wenn es darum geht, Daten in der dreidimensionalen Welt zu visualisieren, in der wir leben. Wir starren auf 2D-Diagramme und Protokolleinträge, aber die große Menge an Daten, die wir aus der Welt extrahieren, ist in einer dreidimensionalen Umgebung sinnvoll. Darüber hinaus ist es sehr nützlich, diese Daten zu visualisieren, wenn sie auf ein dreidimensionales Modell angewendet werden.

Dies ist das Problem, das die Augmented Reality bemüht, zu lösen. Im Vergleich zur fiktiven Umgebung der virtuellen Realität kann die Augmented Reality uns helfen, viele praktische Probleme zu lösen. Karten sind die ersten von vielen Anwendungen der Augmented Reality.

Als WRLD uns in der Hoffnung kontaktierte, dass wir über seine Plattform schreiben würden, wurde ich sofort von der Grafik und Leistung seiner Plattform angezogen. Je mehr ich seine Plattform benutze, desto faszinierter von der Praktikabilität seiner API und der Treue seiner Kartendaten.

Wir werden eine Reihe von Tutorials veröffentlichen, die demonstrieren, wie diese Plattform verwendet werden, um Informationen in die Welt zu bringen, auf der sie gilt. Jedes Tutorial ist in der beliebten Fernsehserie thematisiert. Wie Sie vielleicht vermutet haben, dauert das erste Tutorial etwa 24 Stunden.

In diesem Tutorial lernen wir, wie man mit der WRLD -Plattform beginnt. Wir werden die einfachste Karte gemäß dem Dokumentationsbeispiel machen. Wir werden dann eine lokale Umgebung für das Zusammenstellen des Codes erstellen und damit beginnen, Geschichten zu erzählen.

Wir werden die folgenden Themen behandeln:

• die Karte basierend auf dem Standortnamen
rendern
• MAP für eine Reihe von Ereignissen
verschieben
Heben Sie die Gebäude- und Designveranstaltungen an jedem Gebäude aus
Sounddateien mithilfe von HTML5 -Audio -API
• abspielen
Ändern Sie die Wetterbedingungen und die Tageszeit auf der Karte

Der Code für dieses Tutorial finden Sie in GitHub. Es wurde an modernen Versionen von Firefox, Knoten und MacOS getestet.

Anfänger

Der einfachste Weg, um zu beginnen, besteht darin, dem ersten Beispiel in der Dokumentation zu folgen. Vorher brauchen wir ein Konto. Besuchen Sie https://www.wrld3d.com und klicken Sie auf "Register".

Klicken Sie nach dem Anmelden auf "Entwickler" und "Access API -Schlüssel".

Erstellen Sie einen neuen API -Schlüssel für Ihre Anwendung. Sie können es so nennen, wie Sie möchten, müssen aber später den generierten Schlüssel kopieren ...

Wir können den Code für das erste Beispiel von der offiziellen Dokumentations -Website erhalten. Ich habe es in CodePen gesteckt und die Koordinaten durch die in New York ersetzt:

Zusätzlich zu den JavaScript SDK und Stylesheets benötigen wir nur etwa 5 Zeilen formatierter Code, um eine schöne New Yorker Karte zu rendern! Die erste Parameterkarte ist die ID des Elements, dass WRLD die Karte rendern sollte. Der zweite ist der API -Schlüssel, den wir generiert haben. Das dritte ist das Konfigurationsobjekt. Dieses Objekt enthält Koordinaten in der Mitte der Karte und der optionalen Zoomebene.

Stellen Sie die Build -Kette

fest

CodePen ist perfekt für schnelle Präsentationen; Lassen Sie uns etwas Einfaches einrichten, das alle unserem modernen JavaScript in eine Version zusammenstellt, die die meisten Browser verstehen können.

Parceljs wurde kürzlich als schneller Konfigurations -Web -Bundler bekannt gegeben. Lassen Sie es uns testen. Zunächst müssen wir Paket als globale Anwendung über NPM installieren:

Als nächstes können wir einige Dateien für unser Projekt erstellen. Wir benötigen eine JavaScript -Datei, eine CSS -Datei und eine HTML -Eintragsdatei:

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

Dies stammt aus Tutorial/App.js

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

Dies stammt aus Tutorial/App.css

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

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

Dies stammt aus Tutorial/index.html

Beachten Sie, wie App.js Wrld.js erfordert? Wir müssen das WRLD JavaScript SDK installieren:

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

Dann können wir mit dem Paket mit dem Erstellen und Ausführen der lokalen Datei beginnen:

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

startet ein lokaler Entwicklungsserver und einen JS- und CSS -Dateien. Der Prozess ist wie folgt:

Öffnen Sie die URL, die sie in Ihrem Browser anzeigt, und Sie sollten die New Yorker Karte erneut sehen. Wenn wir JS- und CSS -Dateien ändern, werden diese Dateien automatisch neu kompilieren und im Browser neu laden. Parcel scheint sein Versprechen zu erfüllen.

Und genau das brauchen wir - eine kostengünstige Build -Kette, mit der wir uns darauf konzentrieren können, die Arbeit mit WRLD zu erledigen!

Paket ist immer noch ziemlich neu. Möglicherweise haben Sie es schwierig, mit hochgewohnten Workflows oder Erstellungsanforderungen umzugehen. Die Dokumentation muss noch weiter erklären, was in diesen Situationen zu tun ist. Trotzdem denke ich, dass diese einfache Build -Kette unsere Bedürfnisse erfüllen wird, und Parcel gibt ihr Versprechen hier.

den Namen in Koordinaten

konvertieren

Manchmal kennen wir die genauen Koordinaten des Ortes, den wir in Betracht ziehen. Manchmal kennen wir nur den Namen des Ortes. Nehmen wir eine kurze Turnaround und sehen Sie, wie Sie die Koordinaten eines Ortes bestimmen, wenn wir nur den Namen dieses Ortes kennen.

Dies ist einer der wenigen Dienste, die noch nicht auf der WRLD -Plattform verfügbar sind. Verwenden wir also die Google -API, um sie zu berechnen. Wir brauchen einen weiteren API-Schlüssel. Besuchen Sie also https://developers.google.com/maps/documentation/geocoding/get-api-key und klicken

Als nächst

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

Dies stammt aus Tutorial/App.js

Ich habe den Schlüssel in ein Objekt überarbeitet. Wir können diese Schlüssel sogar in eine Umgebungsvariablendatei verschieben und diese Datei von Git ausschließen. Auf diese Weise kann der Schlüssel verwendet werden, aber der Öffentlichkeit versteckt. Ich habe meinen Code auch in eine asynchrone kurze Pfeilfunktion verschoben, damit ich Async verwenden und darauf warten kann.

Als nächstes können wir die Adresse definieren, nach der sie suchen sollten. Es ist am besten, die Adresse so zu codieren, dass sie als Parameter für Abfragebarge verwendet wird. Wir können dies zusammen mit dem Google -API -Schlüssel in den geokodierten API -Endpunkt eingeben, um die Ergebnisse zu erhalten.

Die Anweisung "Console.log" weiterentwickelt, damit Sie sehen können, wie der codierte URI aussieht und wie das Ergebnis Google zu uns zurückkehrt. Wir haben sehr detaillierte Ergebnisse von Google erhalten, aber der Teil, den wir gewünscht haben, sind die Ergebnisse [0] .Geometry.Location. Mithilfe der Objektzerstörung können wir nur die LAT- und LNG -Tasten dieses Objekts extrahieren.

Schließlich können wir diese in die Kartenfunktion eingeben, und die Karte macht das Empire State Building. Wie gesagt, wir kennen normalerweise bereits die Koordinaten des Zentrums der Karte. Aber wenn wir nicht wissen: Dieser Service und dieser Code helfen uns, sie zu finden.

Der Rest ähnelt der vorherigen Ausgabe, wobei nur geringfügige Anpassungen der Sprache und des Ausdrucks zur Vermeidung von Wiederholungen und die Aufrechterhaltung der Sprachgebrauch. Ich kann aufgrund von Platzbeschränkungen nicht alles vollständig umschreiben, aber Sie können mit Pseudooriginal basierend auf den obigen Beispielen fortfahren. Der Schlüssel besteht darin, Schlüsselwörter zu ersetzen, die Satzstruktur anzupassen und Synonyme zu ersetzen, damit der Artikel anders aussieht, ohne die ursprüngliche Bedeutung zu ändern.

Das obige ist der detaillierte Inhalt vonErstellen Sie eine dynamische 3D -Karte mit WRLD 3D. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!