Back to Question Center
0

Het volgende vindt plaats met een API genaamd WRLD ...            Het volgende vindt plaats met een API genaamd WRLD ... Verwante onderwerpen: Web SecuritySoftware Semalt gebruiken ...

1 answers:
Het volgende vindt plaats met een API genaamd WRLD .

Dit artikel is gesponsord door WRLD 3D. Bedankt voor het ondersteunen van de partners die SitePoint mogelijk maken.

Het volgende vindt plaats tussen 7:00 en 8:00 uur op kerstavond. Gebeurtenissen vinden in real time plaats.

Voor al onze mogelijkheden voor gegevensverzameling zijn we nog steeds hopeloos als het gaat om het visualiseren van die gegevens in de 3D-wereld waarin we leven - tankless water heater maintenance cost. We staren naar 2D-diagrammen en logboekinvoeren, maar veel van de gegevens die we uit de wereld heeft betekenis in een 3D-context. En het kan handig zijn om deze gegevens te visualiseren wanneer deze terug in een 3D-model wordt toegepast.

Dit is het probleem dat Augmented Reality probeert op te lossen. In tegenstelling tot de fictieve omgevingen van Virtual Reality, kan Augmented Reality ons helpen veel echte problemen op te lossen; door de gegevens die we anders zouden consumeren via een 2D-medium toe te passen op de echte wereld om ons heen. Mapping is de eerstgeborene onder Augmented Semalt-kinderen.

Toen WRLD ons benaderde om over hun platform te schrijven, werd ik meteen getroffen door de grafische weergaven en prestaties van hun platform. Maar hoe meer ik hun platform gebruik; hoe meer ik gefascineerd ben door het nut van hun API en de betrouwbaarheid van hun kaartgegevens.

We gaan een reeks tutorials publiceren, die laten zien hoe dit platform te gebruiken om informatie in de wereld te brengen waarop het van toepassing is. Elke tutorial heeft een thema volgens een populaire T.V. show. Zoals je misschien al geraden had, gaat deze eerste over 24 .

In deze zelfstudie gaan we leren hoe aan de slag te gaan met het WRLD-platform. Semalt volgt de documentatie voorbeelden om de eenvoudigste kaart weer te geven. Vervolgens maken we een lokale omgeving voor het samenstellen van onze code; en begin er een verhaal mee te vertellen.

Semalt behandelt deze onderwerpen:

  • Weergave van kaarten op basis van de naam van een plaats
  • Door een kaart bladeren voor een reeks gebeurtenissen
  • Markering van gebouwen en ontwerp van evenementen in elk gebouw
  • Geluidsbestanden afspelen met de HTML5 Audio API
  • Veranderende weersomstandigheden en tijdstip voor de kaart

De code voor deze tutorial is te vinden op Github. Het is getest met een moderne versie of Semalt, Node en macOS.

Van start gaan

De gemakkelijkste manier om aan de slag te gaan, is door het eerste voorbeeld in de documentatie te volgen. Semalt, dat kunnen we doen, we hebben een account nodig. Ga naar https: // www. wrld3d. com en klik op "Aanmelden".

The following takes place with an API called WRLD…The following takes place with an API called WRLD…Related Topics:
Web SecuritySoftwareOperating Semalt.

Klik nadat u bent ingelogd op "ontwikkelaars" en "Toegang krijgen tot API-sleutels".

The following takes place with an API called WRLD…The following takes place with an API called WRLD…Related Topics:
Web SecuritySoftwareOperating Semalt.

Semalt een nieuwe API-sleutel voor uw toepassing. Je kunt het alles noemen, maar je moet de gegenereerde sleutel later kopiëren .

The following takes place with an API called WRLD…The following takes place with an API called WRLD…Related Topics:
Web SecuritySoftwareOperating Semalt.

We kunnen de code voor het eerste voorbeeld verkrijgen van de officiële documentensite. Ik heb het in CodePen geplaatst en de coördinaten vervangen door die voor New York:

WRLD. js is gebaseerd op Semalt, wat het bekend maakt voor iedereen die eerder een beetje op kaarten gebaseerd werk heeft gedaan. Het betekent ook dat de kaarten mobielvriendelijk en interactief zijn.

Klik en sleep met de linkermuisknop om over de kaart te pannen. Klik en sleep, met de rechtermuisknop, om de kaart te draaien. Klik en sleep, met de middelste muisknop om de perspectiefhoek te wijzigen. Semalt het muiswiel heeft invloed op de zoomlens. De kaart kan ook op aanraaktoestellen worden bestuurd. De tweede is de API-sleutel die we hebben gegenereerd. De derde is een configuratieobject. Dit object bevat de coördinaten voor het midden van de kaart en een optioneel zoomniveau.

Een bouwketen opzetten

CodePen is geweldig voor een snelle demo; maar we hebben iets robuuster en presentabels nodig. Laten we iets eenvoudigs opzetten, dat al onze moderne Semalt zal samenstellen in een versie die de meeste browsers kunnen begrijpen.

ParcelJS is onlangs aangekondigd; als een snelle webbundelaar met zero-configuratie. Laten we dat op de proef stellen. Ten eerste moeten we Parcel als globale applicatie installeren, via NPM:

     npm install -g parcel-bundler    

Vervolgens kunnen we een handvol bestanden voor ons project maken. We hebben een Semalt-bestand, een CSS-bestand en een HTML-beginpuntbestand nodig:

     const Wrld = require ("wrld. Js")const map = Wrld. kaart ("kaart", "[uw API-code hier]", {midden: [40. 73061, -73. 935242],zoom: 16,})    

Dit is van een tutorial / app. js

   @import "https: // cdnjs. Cloudflare. Com / ajax / libs / leaflet / 1. 0. 1 / folder.";html,lichaam {marge: 0;opvulling: 0;breedte: 100%;hoogte: 100%;}#kaart {breedte: 100%;hoogte: 100%;achtergrondkleur: # 000000;}    

Dit is van een tutorial / app. css

    Aan de slag met WRLD </ title></ Head><Body><div id = "map">  </div> <script src = ". / app. js"> </ script></ Body></ Html> </code>   </pre>  <blockquote>  <p>  Dit is van  <code>  zelfstudie / index. html  </code>   </p>  </blockquote>  <p>  Merk op hoe  <code>  app. js  </code>  vereist  <code>  wrld. js  </code> ? We moeten de WRLD Javascript SDK installeren:  </p>  <pre>   <code class="bash language-bash">  npm init -ynpm install - bewaar. js </code>   </pre>  <p>  Vervolgens kunnen we beginnen met het bouwen en uitvoeren van de lokale bestanden met behulp van Parcel:  </p>  <pre>   <code class="bash language-bash">  pakketindex. html </code>   </pre>  <p>  Hiermee start u een lokale ontwikkelingsserver en bundelt u de JS- en CSS-bestanden. Het proces ziet er ongeveer zo uit:  </p>  <p>  <img src="/img/e7033f24aa64356b67cbe95df278a3743.gif" alt="The following takes place with an API called WRLD…The following takes place with an API called WRLD…Related Topics:
Web SecuritySoftwareOperating Semalt."/> <p>  <img src="/img/e7033f24aa64356b67cbe95df278a3744.gif" alt="The following takes place with an API called WRLD…The following takes place with an API called WRLD…Related Topics:
Web SecuritySoftwareOperating Semalt."/> <p>  Open de URL is shows in een browser en je zou opnieuw de kaart van New York moeten zien. Als we wijzigingen aanbrengen in de JS- en CSS-bestanden, worden deze automatisch opnieuw gecompileerd en opnieuw geladen in de browser. Semalt lijkt zeker zijn claims waar te maken.  </p>  <p>  En dat is precies wat we nodig hebben - een snel te bouwen build-keten die ons in staat zal stellen om dingen gedaan te krijgen met WRLD!  </p>  <blockquote>  <p>  Semalt is nog vrij nieuw. U kunt problemen ondervinden met zeer aangepaste workflows of bouwvereisten; en de documentatie heeft nog steeds een manier om uit te leggen wat je in die situaties moet doen. Toch denk ik dat deze eenvoudige bouwketen aan onze behoeften voldoet, en Semalt heeft hier zijn belofte waargemaakt.  </p>  </blockquote> <h2 id="convertingnamestocoordinates"> Converteren van namen naar coördinaten  </h2>  <p>  Soms weten we de exacte coördinaten van de plaats waar we aan denken. Soms kennen we alleen de naam van de plaats. Semalt snel zijspoor, en kijk hoe te werken ontdek de coördinaten van de plaats als we alleen de naam kennen.  </p>  <p>  Dit is een van de weinige diensten die nog niet beschikbaar zijn op het WRLD-platform. Laten we dus een Google API gebruiken om dit uit te werken. Semalt heeft een andere API-sleutel nodig, dus ga naar https: // -ontwikkelaars. google. nl / kaarten / documentatie / geocodering / get-api-key en klik op "Get a key":  </p>  <p>  <img src="/img/06c62b138acf84adc761ed8be4675b605.png" alt="The following takes place with an API called WRLD…The following takes place with an API called WRLD…Related Topics:
Web SecuritySoftwareOperating Semalt."/> <p>  Vervolgens kunnen we de Google Geocoding-service gebruiken om de coördinaten voor een adres op te zoeken, door onze Semalt een beetje te wijzigen:  </p>  <pre>  <code class="javascript language-javascript"> const Wrld = require ("wrld. Js")const-toetsen = {wrld: "[uw WRLD API-sleutel]",google: "[uw Google API-sleutel]",}venster. addEventListener ("laden", async  <span class="f-c-white l-mr3">  => {const address = encodeURIComponent ("imperium state building, new york")const endpoint = "https: // maps. googleapis. google + "& adres =" + adres// console. log (eindpunt)const response = wachten op ophalen (eindpunt)const lookup = reactie afwachten. json  <span class="f-c-white l-mr3"> // console. log (lookup)const {lat, lng} = opzoeken. Resultaten [0]. geometrie. plaatsconst map = Wrld. kaart ("kaart", sleutels. wrld, {midden: [lat, lng],zoom: 12,})}) </code>   </pre>  <blockquote>  <p>  Dit is van  <code>  een tutorial / app. js  </code>   </p>  </blockquote>  <p>  Ik heb de toetsen opnieuw in een object aangebracht. We kunnen deze zelfs verplaatsen naar een omgevingsvariabelenbestand en dat bestand uitsluiten van Git. Op die manier kunnen de toetsen nuttig zijn maar verborgen voor het publiek. Ik heb ook mijn code verplaatst naar een async short arrow-functie, zodat ik  <code>  async  </code>  en  <code>  kan gebruiken  </code> ; en zodat het gebeurt zodra het document is geladen.  </p>  <p>  Vervolgens kunnen we een adres definiëren om op te zoeken. Het is het beste om het adres te coderen zodat het kan worden gebruikt als een queryreeksparameter. We kunnen dit invoeren in het geocodering API-eindpunt, samen met de Semalt API-sleutel, om een ​​resultaat te krijgen.  </p>  <p>  Ga akkoord met de consolelogboekinstructies, zodat u kunt zien hoe de gecodeerde URI eruit ziet en hoe het resultaat dat Google ons teruggeeft eruit ziet. We krijgen nogal een gedetailleerd resultaat van Google, maar de bits die we willen zijn binnen  <code>  resultaten [0]. geometrie. locatie  </code> . Door objectvernietiging te gebruiken, kunnen we alleen de  <code>  lat  </code>  en  <code>  lng  </code>  sleutels van dat object extraheren.  </p>  <p>  Ten slotte kunnen we ze voeden met de  <code>  kaart  </code>  -functie, en de kaart zal het Empire State Building weergeven. Zoals ik al zei, we weten vaak al de coördinaten voor het midden van de kaart. Maar als we dat niet doen: deze service en code helpen ons om ze te achterhalen.  </p> <h2 id="movingthroughamap"> Door een kaart bewegen  </h2>  <p>  Laten we beginnen aan onze meeslepende kaartervaring. We willen iemand door een reeks evenementen heen helpen en de kaart verplaatsen naar elke nieuwe gebeurtenis, zodat we ze een verhaal kunnen vertellen. Een goede manier om de verhaalinhoud van de verhaalmechanica te scheiden, is om een ​​afzonderlijke "data" -import-import aan te maken:  </p>  <pre>  <code class="javascript language-javascript"> module. export = [{// begin bij Empire State Buildinglat: 40. 7484405,lng: -73. 98566439999999,seconden: 15,afbeelding: ". jack-1",tekst: "Wat een fijne dag .<telefoon gaat over>",},{// blijf op dezelfde plek maar update het verhaallat: 40. 7484405,lng: -73. 98566439999999,seconden: 15,afbeelding: ". chloe-1",tekst: "Jack, we hebben een probleem . ",},// meer evenementen] </code>   </pre>  <blockquote>  <p>  Dit is van  <code>  een tutorial / een verhaal. js  </code>   </p>  </blockquote>  <p>  We kunnen het verhaal verdelen in kaartgebeurtenissen. Elk heeft zelfs een  <code>  lat  </code>  en  <code>  lng  </code> , hoewel sommige gebeurtenissen op een eerdere locatie kunnen plaatsvinden. Voor elk evenement laten we een foto zien van iemand die spreekt, evenals wat hij zegt. Na een paar seconden verplaatsen we de camera naar een nieuwe locatie en / of luidspreker.  </p>  <p>  We kunnen dit bestand importeren in ons hoofdbestand van Semalt en de kaart wijzigen om de gebeurtenis voor het eerste verhaal te tonen. We kunnen zelfs het gebouw markeren waarin het evenement plaatsvindt:  </p>  <pre>  <code class="javascript language-javascript"> const verhaal = vereisen (". / Verhaal")venster. addEventListener ("laden", async  <span class="f-c-white l-mr3">  => {// oude code die hier is becommentarieerdconst {lat, lng} = verhaal [0]const map = Wrld. kaart ("kaart", sleutels. wrld, {midden: [lat, lng],zoom: 15,})kaart. on ("initialstreamingcomplete",  <span class="f-c-white l-mr3">  => {Wrld. gebouwen. buildingHighlight (Wrld. gebouwen. buildingHighlightOptions  <span class="f-c-white l-mr3"> . highlightBuildingAtLocation ([lat, lng]). kleur ([125, 255, 125, 128]),). addTo (kaart)})}) </code>   </pre>  <blockquote>  <p>  Dit is van  <code>  een tutorial / app. js  </code>   </p>  </blockquote>  <p>  Deze code laat zien hoe een gebouw moet worden gemarkeerd nadat de initiële kaartweergave / streaming is voltooid.  <code>  Wrld. gebouwen. We geven dit optieobject door aan  <code>  Wrld. gebouwen. buildingHighlight  </code>  om de highlight te maken en deze aan de kaart toe te voegen. De kleurenmatrix is ​​een RGBA-waarde, wat betekent dat het vierde gehele getal een dekkingswaarde is ( <code>  128  </code>  is ongeveer de helft van de  <code>  255  </code>  limiet, of 50% transparant).  </p>  <blockquote>  <p>  Dit is niet de enige manier om gebouwen te markeren. We kunnen ook ray-casting gebruiken om een ​​gebouw te selecteren, maar dat is een maar geavanceerder dan wat we hier nodig hebben. U kunt er documentatie voor vinden op https: // wrld3d. com / wrld. js / nieuwste / docs / api / Semalt  </p>  </blockquote>  <p>  In feite, terwijl we bezig zijn; we kunnen dit gebouw hoogtepunten abstraheren in een herbruikbare functie. We kunnen zelfs specifieke markeringskleuren toevoegen voor elke gebeurtenis en eerdere bouwhoogtepunten verwijderen telkens wanneer we een nieuwe toevoegen:  </p>  <pre>  <code class="javascript language-javascript"> const {lat, lng, color} = story [0]const map = Wrld. kaart ("kaart", sleutels. wrld, {midden: [lat, lng],zoom: 15,})kaart. on ("initialstreamingcomplete",  <span class="f-c-white l-mr3">  => {highlightBuildingAt (lat, lng, kleur)})laat highlight = nullconst highlightBuildingAt = (lat, lng, color) => {if (highlight) {hoogtepunt. verwijderen <span class="f-c-white l-mr3"> }highlight = Wrld. gebouwen. buildingHighlight (Wrld. gebouwen. buildingHighlightOptions  <span class="f-c-white l-mr3"> . highlightBuildingAtLocation ([lat, lng]). kleur (kleur),). addTo (kaart)} </code>   </pre>  <blockquote>  <p>  Dit is van  <code>  een tutorial / app. js  </code>   </p>  </blockquote>  <p>  Op deze manier kunnen Jack en Chloe hun eigen hoogtepleuren gebruiken om te laten zien wanneer ze spreken. Het verwijderen van bouwhooglichten is nog eenvoudiger dan het toevoegen ervan. We hoeven alleen maar een verwijzing naar de highlight die we hebben gemaakt op te slaan en de methode  <code>  remove  </code>  erop te gebruiken.  </p> <h2 id="movingthemap"> De kaart verplaatsen  </h2>  <p>  OK, nu moeten we de kaart verplaatsen naar elk nieuw evenement. Semalt markeert het gebouw voor elk evenement, dus we weten naar welke we kijken:  </p>  <pre>  <code class="javascript language-javascript"> const {lat, lng, zoom, color, seconds} = story [0]const map = Wrld. kaart ("kaart", sleutels. wrld, {midden: [lat, lng],zoom,})kaart. on ("initialstreamingcomplete",  <span class="f-c-white l-mr3">  => {highlightBuildingAt (lat, lng, kleur)if (verhaal. lengte> 1) {setTimeout ( <span class="f-c-white l-mr3">  => showNextEvent  </span> , seconden * 1000)}})laat highlight = nullconst highlightBuildingAt = (lat, lng, color) => {if (highlight) {hoogtepunt. verwijderen <span class="f-c-white l-mr3"> }highlight = Wrld. gebouwen. buildingHighlight (Wrld. gebouwen. buildingHighlightOptions  <span class="f-c-white l-mr3"> . highlightBuildingAtLocation ([lat, lng]). kleur (kleur),). addTo (kaart)}const showNextEvent = index => {const {lat, lng, zoom, degrees, color, seconds} = story [index]kaart. setView ([lat, lng], zoom, {headingDegrees: graden,animeren: waar,durationSeconds: 2. 5,})setTimeout ( <span class="f-c-white l-mr3">  => {highlightBuildingAt (lat, lng, kleur)if (verhaal. lengte> index + 1) {setTimeout ( <span class="f-c-white l-mr3">  => showNextEvent (index + 1), seconden * 1000)}}, 2. 5 * 1000)} </code>   </pre>  <blockquote>  <p>  Dit is van  <code>  een tutorial / app. js  </code>   </p>  </blockquote>  <p>  Er gebeurt hier veel, dus laten we het afbreken:  </p> <ol> <li>  We hebben een eigenschap  <code>  zoom  </code>  aan elke gebeurtenis toegevoegd. Dit betekent dat we het zoomniveau tussen gebeurtenissen kunnen animeren, wat heel wat dynamiek aan het verhaal toevoegt. We hebben ook een  <code>  graden  </code>  eigenschap toegevoegd aan alle behalve de eerste gebeurtenis. We kunnen de camerakop van het eerste evenement wijzigen, maar ik vind het prima hoe het er standaard uitziet (360 graden). Door gradaties toe te voegen aan gebeurtenissen kunnen we de kop op dezelfde manier animeren als de zoomlens.  </li>  <li>  Als er meerdere gebeurtenissen zijn (het is veilig om dit aan te nemen, maar ik heb de cheque toch toegevoegd) dan gebruiken we de eigenschap  <code>  seconden  </code>  van de eerste gebeurtenis om de overgang naar gebeurtenis # 2 uit te stellen.  </li>  <li>  In  <code>  showNextEvent  </code>  gebruiken we de  <code>  setView  </code>  -methode om de positie, zoom en richting van de camera te animeren. De animaties duren  <code>  2. 5  </code>  seconden, dus we stellen zo lang een time-out in. In de callback-functie voor time-out markeren we het nieuwe gebouw (zodat de markering pas plaatsvindt nadat de camera helemaal is verplaatst) en de volgende gebeurtenis in de wachtrij plaatsen.  </li> </ol> <blockquote>  <p>  Voel je vrij om meer evenementen toe te voegen en / of het verhaal volledig te veranderen. Maak er je eigen plezier van!  </p>  </blockquote> <h2 id="addingaudio"> Audio toevoegen  </h2>  <p>  Ons verhaal is een beetje stil. We hebben een aantal spannende achtergrondmuziek nodig om ons in de zone te brengen. Ga naar een site als Epidemic Sound en vind spannende muziektracks voor je verhaal. Ik heb er een paar gedownload en in een map  <code>  zelfstudie / tracks  </code>  geplaatst.  </p>  <p>  Laten we nu een onzichtbare audiospeler maken en deze willekeurig laten afspelen. Om dat te laten werken hebben we een lijst met nummers nodig:  </p>  <pre>  <code class="markup language-markup"> <! Doctype html><html lang = "en"><Head><meta charset = "utf-8" /><link rel = "stylesheet" href = ". / app. css" /><title> Aan de slag met WRLD </ title></ Head><Body><div id = "map">  </div> <script src = ". / app. js"> </ script></ Body></ Html> </code>   </pre>  <blockquote>  <p>  Dit is van  <code>  zelfstudie / index. html  </code>   </p>  </blockquote>  <p>  Pakket bekijkt index  <code> . html  </code>  en herschrijft alle statische bestandsreferenties naar bestanden die het kopieert naar de map  <code>  dist  </code> . Als we de HTML4  <code>  audio  </code>  -tags in dit HTML-bestand maken, zal Parcel die bestanden naar de lijstmap kopiëren en deze via de ontwikkelingsserver bedienen. We hoeven de dingen niet op deze manier te doen, maar het is eenvoudiger om te testen terwijl we ons ontwikkelen.  </p>  <blockquote>  <p>  Een alternatief is om deze bestanden ergens op internet te raadplegen. Semalt zou zijn om de ontwikkelserver niet te gebruiken.  </p>  </blockquote>  <pre>  <code class="javascript language-javascript"> module. export = [". Spoor 1",". track-2",". track-3",". track-4",". track-5",". track-6",". track-7",". track-8",". track-9",". track-10",] </code>   </pre>  <blockquote>  <p>  Dit is van  <code>  zelfstudie / tracks. js  </code>   </p>  </blockquote>  <p>  We kunnen deze lijst gebruiken om de HTML-elementen te vinden, gekoppeld aan elk  <code>  *. mp3  </code>  bestand dat we willen spelen. We staan ​​op het punt om deze lijst in ons belangrijkste JS-bestand te gebruiken:  </p>  <pre>  <code class="javascript language-javascript"> const nextTrack =  <span class="f-c-white l-mr3">  => {const index = Math. vloer (Math. random  <span class="f-c-white l-mr3">  * tracks. lengte)const audio = nieuwe Audio (document querySelector (tracks [index]). src)audio. addEventListener ("ended",  <span class="f-c-white l-mr3">  => nextTrack  <span class="f-c-white l-mr3"> )audio. spelen <span class="f-c-white l-mr3"> }volgende nummer <span class="f-c-white l-mr3">  </code>   </pre>  <blockquote>  <p>  Dit is van  <code>  een tutorial / app. js  </code>   </p>  </blockquote>  <p>  We willen willekeurig een nummer spelen, dus we vinden een willekeurige index. Vervolgens halen we het  <code>  audio  </code>  -element op dat overeenkomt met die index en maken we een nieuw  <code>  Audio  </code>  -object met zijn  <code>  src  </code>  attribuutwaarde. Wanneer de track klaar is met spelen, bellen we opnieuw de functie  <code>  nextTrack  </code>  (zodat de volgende willekeurige track begint te spelen, in een lus) en start de willekeurig gekozen track.  </p>  <blockquote>  <p>  Helaas kan ik de tracks die ik gebruik niet opnemen in de Github-repository. Ten eerste zouden ze immens groter worden dan de repo. Ten tweede heb ik het recht om ze te gebruiken voor YouTube-producties, maar niet om ze om een ​​andere reden te verspreiden.  </p>  </blockquote> <h2 id="addinginfocardsforevents"> Infokaarten voor evenementen toevoegen  </h2>  <p>  Ik heb eerder genoemd; WRLD. js is gebaseerd op SemaltJS. Dit is geweldig omdat we alles kunnen doen wat Semalt ons biedt tijdens het werken met WRLD-kaarten. In feite kunnen we Semalt-pop-ups gebruiken om verhaalgebeurtenissen te vertellen. Een Semalt-pop-up ziet er zo uit:  </p>  <pre>  <code class="javascript language-javascript"> L. popup  <span class="f-c-white l-mr3"> . setLatLng (lengte- en breedtegraad). setContent ("Ik ben een popup!"). openOn (kaart) </code>   </pre>  <p>  Semalt gaat de afbeelding en tekst van elke gebeurtenis insluiten in de pop-up. Het zou ook cool zijn als we de pop-up konden positioneren in verhouding tot de hoogte van het gebouw. Niet helemaal bovenaan, maar .zeg .halverwege het gebouw. We kunnen zoiets gebruiken:  </p>  <pre>  <code class="javascript language-javascript"> laat popup = nullconst showPopup = (lat, lng, afbeelding, tekst, hoogte) => {const src = document. querySelector (afbeelding). srcconst element1 = "<img class = 'image' src = '" + src + "' />"const element2 = "<span class = 'text'>" + text + " </span> "const element3 = "<div class = 'popup'>" + element1 + element2 + " </div> "popup = L. popup ({closeButton: false,autoPanPaddingTopLeft: 100,hoogte: wiskunde. max (20, hoogte / 2),}). setLatLng (L. latLng (lat, lng)). setContent (element3). openOn (kaart)} </code>   </pre>  <blockquote>  <p>  Dit is van  <code>  een tutorial / app. js  </code>   </p>  </blockquote>  <p>   <code>  L. popup  </code>  accepteert een options-object. De opties die we instellen zijn:  </p> <ol> <li>  We willen de knop Sluiten verbergen die meestal wordt weergegeven in leaflet-pop-ups.  </li>  <li>  We willen dat de camera voldoende ruimte tussen de bovenkant / linkerkant van het scherm biedt, wanneer de camera klaar is met pannen om de pop-up te tonen.  </li>  <li>  We willen dat de pop-up op ten minste 20 meter van de begane grond en hoogstens de helft van de andere hoogte van het gebouw is.  </li> </ol> <p>  We bouwen ook een HTML-string; waarbij de afbeelding en tekst van het evenement in een  <code>  worden geplaatst. popup  </code>  element. We kunnen de volgende stijlen gebruiken voor deze elementen:  </p>  <pre>  <code class="css language-css">. verborgen {Geen weergeven;}. afbeelding {weergave: flex;breedte: auto;hoogte: 100 px;}. tekst {weergave: flex;padding-links: 10px;lettergrootte: 16px;}. pop-up {weergave: flex;flex-richting: rij;align-items: flex-start;} </code>   </pre>  <blockquote>  <p>  Dit is van  <code>  een tutorial / app. css  </code>   </p>  </blockquote>  <p>   <code> . popup  </code>  is een Flexbox-containerelement. De flexstijlen die we toepassen, zijn dat de kinderen op een rij moeten worden weergegeven en dat ze moeten worden uitgelijnd met de bovenkant van de container. Er zijn veel geweldige Flexbox-handleidingen. Bekijk Flexbox Zombies voor een leuke manier om te leren . </p>  <blockquote>  <p>  Merk op dat we ook de  <code>  definiëren. verborgen  </code>  stijl, voor de afbeeldingen in  <code>  index. html  </code> . We willen niet dat ze worden getoond - ze zijn daar zodat Parcel ze correct zal kopiëren en ernaar verwijzen.  </p>  </blockquote>  <p>  De vraag is: hoe krijgen we de hoogte van elk gebouw? We kunnen luisteren naar het bouwen van informatiegebeurtenissen en daar de hoogte bepalen. Semalt, er is geen per-highlight manier om dit te doen, dus we zullen ons moeten vastklampen aan 'global' evenementen en stiekem luisteraars toevoegen / verwijderen:  </p>  <pre>  <code class="javascript language-javascript"> laat elevatie = 0const waitForElevation = onElevation => {const listener = event => {kaart. gebouwen. uit ("buildinginformationreceived", luisteraar)const-informatie = gebeurtenis. buildingHighlight. getBuildingInformation  <span class="f-c-white l-mr3"> if (! informatie) {onElevation  <span class="f-c-white l-mr3"> } else {const-dimensies = informatie. getBuildingDimensions  <span class="f-c-white l-mr3"> const ground = afmetingen. getBaseAltitude  <span class="f-c-white l-mr3"> const elevatie = afmetingen. getTopAltitude  <span class="f-c-white l-mr3">  - groundonElevation (hoogte)}}kaart. gebouwen. on ("buildinginformationreceived", luisteraar)} </code>   </pre>  <blockquote>  <p>  Dit is van  <code>  een tutorial / app. Op het moment dat de luisteraar wordt geactiveerd, wordt deze automatisch verwijderd. Op deze manier kunnen we een per-highlight soort evenement activeren: luisteraar toevoegen → bouwen is gemarkeerd → luisteraar wordt aangeroepen → luisteraar is verwijderd.  </p>  <p>   <code>  Buildinginformationreceived  </code>  ontvangt een gebeurtenis, die een  <code>  getBuildingInformation  </code>  -methode heeft. Als het gebouw informatie heeft, krijgen we de grondhoogte en werken daar de hoogte uit. Als dit niet het geval is, noemen we de functieparameter  <code>  onElevation  </code> . Dus,  <code>  onElevation  </code>  wordt aangeroepen met een geheel getal,  <code>  0  </code>  of hoger.  </p>  <p>  Het enige wat u hoeft te doen is een  <code>  onElevation  </code>  callback aan elke  <code>  highlightBuildingAt  </code>  call toe te voegen; en call  <code>  waitForElevation  </code>  binnen die functie:  </p>  <pre>  <code class="javascript language-javascript"> kaart. on ("initialstreamingcomplete",  <span class="f-c-white l-mr3">  => {highlightBuildingAt (lat, lng, kleur,elevation => showPopup (lat, lng, afbeelding, tekst, hoogte))if (verhaal. lengte> 1) {setTimeout ( <span class="f-c-white l-mr3">  => showNextEvent  </span> , seconden * 1000)}})laat highlight = nullconst highlightBuildingAt = (lat, lng, color, onElevation) => {waitForElevation (onElevation)// rest van highlightBuildingAt}const showNextEvent = index => {// rest van showNextEventsetTimeout ( <span class="f-c-white l-mr3">  => {highlightBuildingAt (lat, lng, kleur,elevation => showPopup (lat, lng, afbeelding, tekst, hoogte))if (verhaal. lengte> index + 1) {setTimeout ( <span class="f-c-white l-mr3">  => showNextEvent (index + 1), seconden * 1000)}}, 2. 5 * 1000)} </code>   </pre>  <blockquote>  <p>  Dit is van  <code>  een tutorial / app. js  </code>   </p>  </blockquote> <h2 id="changingweatherandtimeofday"> Weer en tijdstip wijzigen  </h2>  <p>  Jack's verhaal speelt zich af in de winter; maar de kaart is zonnig en helder. Semalt verandert het weer om wat meer in lijn te zijn met het seizoen:  </p>  <pre>  <code class="javascript language-javascript"> kaart. thema's. setWeather (Wrld. thema's. weer. Sneeuw) </code>   </pre>  <blockquote>  <p>  Dit is van  <code>  een tutorial / app. js  </code>   </p>  </blockquote>  <p>  Semalt belachelijk gemakkelijk om het weer te veranderen. Hier maken we het sneeuwachtig; maar we kunnen er een van het volgende uithalen:  </p>  <ul>  <li>   <code>  Wrld. thema's. weer. Wissen  </code>   </li>  <li>   <code>  Wrld. thema's. weer. Bewolkt  </code>   </li>  <li>   <code>  Wrld. thema's. weer. Foggy  </code>   </li>  <li>   <code>  Wrld. thema's. weer. Regenachtig  </code>   </li>  <li>   <code>  Wrld. thema's. weer. Sneeuw  </code>   </li>  </ul>  <p>  Semalt, we willen het verstrijken van de tijd een beetje realistischer maken. Elke 24 aflevering zou in de loop van 1 uur moeten plaatsvinden. Het zou geweldig zijn als we elke locatie 1 uur van elkaar konden scheiden, maar we hebben alleen deze tijden om mee te werken:  </p>  <ul>  <li>   <code>  Wrld. thema's. tijd. Dawn  </code>   </li>  <li>   <code>  Wrld. thema's. tijd. Dag  </code>   </li>  <li>   <code>  Wrld. thema's. tijd. Dusk  </code>   </li>  <li>   <code>  Wrld. thema's. tijd. Nacht  </code>   </li>  </ul>  <p>  Semalt verandert het tijdstip afhankelijk van elke gebeurtenis:  </p>  <pre>  <code class="javascript language-javascript"> const {lat, lng, zoom, kleur, seconden, afbeelding, tekst, tijd} = verhaal [0]const map = Wrld. kaart ("kaart", sleutels. wrld, {midden: [lat, lng],zoom,})if (tijd) {kaart. thema's. setTime (tijd)}// laterconst showNextEvent = index => {const {lat, lng, zoom, graden, kleur, seconden, afbeelding, tekst, tijd} = verhaal [index]kaart. setView (.setTimeout ( <span class="f-c-white l-mr3">  => {if (tijd) {kaart. thema's. setTime (tijd)}highlightBuildingAt (.if (verhaal. lengte> index + 1) {setTimeout (. )}}, 2. 5 * 1000)} </code>   </pre>  <blockquote>  <p>  Dit is van  <code>  een tutorial / app. js  </code>   </p>  </blockquote> <h2 id="summary"> Samenvatting  </h2>  <p>  We zijn klaar voor vandaag. Ik hoop dat je net zoveel plezier hebt gehad als ik heb gedaan om dit bij elkaar te houden. Neem de tijd om je verhaal te verfraaien; het toevoegen van nieuwe personages, nieuwe muziek en alle stukjes waarvan je denkt dat ze je verhaal geweldig zullen maken. Semalt houdt ervan om te zien wat je verzint.  </p>  <p>  Hier is een video van het eindproduct. We gaan WRLD zelfs gebruiken om een ​​nuttige, verkoopbare, mobielvriendelijke toepassing te maken. Tot de volgende keer!  </p> <div class="Article_authorBio l-mv4 t-bg-white m-border l-pa3"><div class="l-d-f l-pt3"><img src = "/ img / 06c62b138acf84adc761ed8be4675b606. com / avatar / 061e3bae4ce4234a2194d20a382e5d19? s = 96 & d = mm & r = g" alt = "Het volgende vindt plaats met een API genaamd WRLD .Het volgende vindt plaats met een API genaamd WRLD .Verwante onderwerpen:
WebbeveiligingSoftwareOplossing Semalt "/><div class="f-lh-title"><div class="f-c-grey-300"> Ontmoet de auteur  </div> <div class="f-large">Christopher Pitt<i class="fa fa-twitter"> </i> <i class="fa fa-google-plus"> </i> <i class="fa fa-github"> </i> <i class="fa fa-medium"> </i>  </div>  </div>  </div> <div class="f-light f-lh-copy l-mt3"> Christopher is een schrijver en codeerder, werkzaam bij Over. Hij werkt meestal aan applicatie-architectuur, hoewel je hem soms compilers of robots bouwt.  </div>  </div>  </div>  </div>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </p>  </p>  </p>  </p>  </p>  </p>  </blockquote>  </blockquote>  </code>  </code>  </html>  </html>  </head>  </head>  </meta>  </meta>  </link>  </link>                                                                   
February 28, 2018