Back to Question Center
0

ຕໍ່ໄປນີ້ໃຊ້ເວລາກັບ API ທີ່ເອີ້ນວ່າ WRLD ...            ຕໍ່ໄປນີ້ຈະໃຊ້ເວລາກັບ API ທີ່ເອີ້ນວ່າ WRLD ... Related Topics: Web SecuritySoftwareOperating Semalt ...

1 answers:
ຕໍ່ໄປນີ້ເກີດຂຶ້ນກັບ API ທີ່ເອີ້ນວ່າ WRLD .

ບົດຂຽນນີ້ຖືກສະຫນັບສະຫນູນໂດຍ WRLD 3D. ຂອບໃຈສໍາລັບການສະຫນັບສະຫນູນຄູ່ຮ່ວມງານທີ່ເຮັດໃຫ້ SitePoint ເປັນໄປໄດ້.

ຕໍ່ໄປນີ້ຈະເກີດຂຶ້ນລະຫວ່າງ 7 ໂມງເຊົ້າແລະ 8:00 ໂມງເຊົ້າວັນຄິດມາດ. ເຫດການເກີດຂື້ນໃນເວລາຈິງ - registrations online.

ສໍາລັບຄວາມສາມາດໃນການເກັບຂໍ້ມູນຂອງພວກເຮົາທັງຫມົດ, ພວກເຮົາຍັງມີຄວາມຫວັງຢູ່ໃນເວລາທີ່ມັນເບິ່ງເຫັນຂໍ້ມູນທີ່ຢູ່ໃນໂລກ 3D ທີ່ພວກເຮົາອາໃສຢູ່. ພວກເຮົາເບິ່ງຢູ່ໃນຕາຕະລາງ 2D ແລະບັນທຶກ, ແຕ່ສ່ວນໃຫຍ່ຂອງຂໍ້ມູນທີ່ພວກເຮົາຖີ້ມອອກຈາກ ໂລກມີຄວາມຫມາຍໃນສະພາບການ 3D. ແລະ, ມັນສາມາດເປັນປະໂຫຍດທີ່ຈະເບິ່ງຂໍ້ມູນນີ້ເມື່ອມັນຖືກນໍາໃຊ້ກັບຮູບແບບ 3D.

ນີ້ແມ່ນບັນຫາຄວາມຈິງທີ່ເພີ່ມຂື້ນຊອກຫາເພື່ອແກ້ໄຂ. ກົງກັນຂ້າມກັບສະພາບແວດລ້ອມ fictional ຂອງຄວາມເປັນຈິງ virtual, ຄວາມຈິງເພີ່ມຂຶ້ນສາມາດຊ່ວຍໃຫ້ພວກເຮົາແກ້ໄຂບັນຫາທີ່ແທ້ຈິງຫຼາຍ; ໂດຍການນໍາໃຊ້ຂໍ້ມູນທີ່ພວກເຮົາຈະບໍລິໂພກໂດຍຜ່ານສື່ກາງ 2D ສູ່ໂລກທີ່ແທ້ຈິງປະມານພວກເຮົາ. ແຜນທີ່ແມ່ນການເກີດລູກທໍາອິດໃນບັນດາເດັກນ້ອຍທີ່ຖືກຍົກເລີກ.

ເມື່ອ WRLD ເຂົ້າຫາພວກເຮົາເພື່ອຂຽນກ່ຽວກັບເວທີຂອງພວກເຂົາ, ຂ້າພະເຈົ້າໄດ້ຖືກປະຕິບັດທັນທີໂດຍກາຟິກແລະການປະຕິບັດຂອງມັນ. ເຖິງຢ່າງໃດກໍ່ຕາມ, ຂ້າພະເຈົ້າໃຊ້ເວທີຫຼາຍກວ່າເກົ່າ; ຫຼາຍຂ້າພະເຈົ້າ fascinated ໂດຍປະໂຫຍດຂອງ API ຂອງເຂົາເຈົ້າແລະຄວາມຊື່ສັດຂອງຂໍ້ມູນແຜນທີ່ຂອງເຂົາເຈົ້າ.

ພວກເຮົາກໍາລັງຈະເຜີຍແຜ່ບົດສອນຕ່າງໆເຊິ່ງສະແດງໃຫ້ເຫັນວິທີການນໍາໃຊ້ເວທີນີ້ເພື່ອນໍາເອົາຂໍ້ມູນເຂົ້າໄປໃນໂລກ. ແຕ່ລະ tutorial ແມ່ນຫົວຂໍ້ອີງໃສ່ການສະແດງ T. ທີ່ເປັນທີ່ນິຍົມ. ດັ່ງທີ່ທ່ານອາດຈະຄາດເດົາ, ຄັ້ງທໍາອິດນີ້ແມ່ນກ່ຽວກັບ 24 .

ໃນບົດຮຽນນີ້, ພວກເຮົາຈະຮຽນຮູ້ວິທີເລີ່ມຕົ້ນດ້ວຍເວທີ WRLD. Semalt ປະຕິບັດຕາມຕົວຢ່າງຂອງເອກະສານເພື່ອເຮັດໃຫ້ແຜນທີ່ງ່າຍດາຍ. ຫຼັງຈາກນັ້ນ, ພວກເຮົາຈະສ້າງສະພາບແວດລ້ອມໃນທ້ອງຖິ່ນສໍາລັບການລວບລວມລະຫັດຂອງພວກເຮົາ; ແລະເລີ່ມຕົ້ນທີ່ຈະບອກເລື່ອງກັບມັນ.

Semalt ປະກອບດ້ວຍຫົວຂໍ້ເຫຼົ່ານີ້:

  • ການສະແດງແຜນທີ່ອີງໃສ່ຊື່ຂອງສະຖານທີ່
  • ການເຄື່ອນຍ້າຍຜ່ານແຜນທີ່, ສໍາລັບລໍາດັບເຫດການ
  • ອາຄານສໍາຄັນແລະເຫດການອອກແບບໃນແຕ່ລະອາຄານ
  • ຫຼີ້ນໄຟສຽງທີ່ມີ HTML5 Audio API
  • ການປ່ຽນແປງສະພາບດິນຟ້າອາກາດແລະເວລາສໍາລັບແຜນທີ່

ລະຫັດສໍາລັບການສອນນີ້ສາມາດພົບໄດ້ໃນ Github. ມັນໄດ້ຮັບການທົດສອບກັບຮຸ່ນທີ່ທັນສະໄຫມຫລື Semalt, Node, ແລະ MacOS.

ການເລີ່ມຕົ້ນ

ວິທີທີ່ງ່າຍທີ່ສຸດທີ່ຈະເລີ່ມຕົ້ນແມ່ນເຮັດຕາມຕົວຢ່າງທໍາອິດໃນເອກະສານ. ພວກເຮົາສາມາດເຮັດໄດ້, ພວກເຮົາຕ້ອງການບັນຊີ. ໄປຫາ https: // www. wrld3d com ແລະກົດ "ລົງທະບຽນ".

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

ເມື່ອທ່ານເຂົ້າສູ່ລະບົບ, ໃຫ້ຄລິກໃສ່ "ນັກພັດທະນາ" ແລະ "Access API Keys".

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

ການຂັດຂວາງ API ໃຫມ່ສໍາລັບຄໍາຮ້ອງສະຫມັກຂອງທ່ານ. ທ່ານສາມາດໂທຫາມັນໄດ້, ແຕ່ທ່ານຈໍາເປັນຕ້ອງສໍາເນົາຄີທີ່ຜະລິດພາຍຫຼັງ .

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

ພວກເຮົາສາມາດໄດ້ຮັບລະຫັດ, ສໍາລັບຕົວຢ່າງທໍາອິດ, ຈາກເວັບໄຊທ໌ທາງດ້ານເອກກະສານ. ຂ້າພະເຈົ້າໄດ້ເອົາໃສ່ໃນ CodePen, ແລະແທນທີ່ປະສານງານກັບບັນດາສໍາລັບນິວຢອກ:

WRLD js ແມ່ນອີງໃສ່ Semalt, ເຊິ່ງເຮັດໃຫ້ມັນຄຸ້ນເຄີຍກັບໃຜຜູ້ທີ່ໄດ້ເຮັດວຽກນ້ອຍຂອງແຜນທີ່ກ່ອນທີ່ຈະເຮັດວຽກ. ມັນຍັງຫມາຍຄວາມວ່າແຜນທີ່ແມ່ນມືຖືແລະໂຕ້ຕອບ.

ກົດແລະລາກ, ດ້ວຍປຸ່ມຫນູຊ້າຍ, ເພື່ອແຜ່ຮອບແຜນທີ່. ກົດແລະລາກ, ດ້ວຍປຸ່ມຫນູຂວາ, ເພື່ອຫມຸນແຜນ. ກົດແລະລາກ, ດ້ວຍປຸ່ມເມົາກາງເພື່ອປ່ຽນມຸມມອງມຸມມອງ. ການຢຸດເຊົາລໍ້ຫນູຈະສົ່ງຜົນກະທົບຕໍ່ການຊູມ. ແຜນທີ່ຍັງສາມາດຄວບຄຸມໄດ້ໃນອຸປະກອນສໍາຜັດ. ທີສອງແມ່ນຫຼັກ API ທີ່ພວກເຮົາຜະລິດ. ທີສາມແມ່ນຈຸດປະສົງການຕັ້ງຄ່າ. ວັດຖຸນີ້ປະກອບດ້ວຍຈຸດປະສານງານສໍາລັບຈຸດໃຈກາງຂອງແຜນທີ່, ແລະລະດັບການຊູມທາງເລືອກ.

ການຕັ້ງຄ່າໂຊວ໌ການກໍ່ສ້າງ

CodePen ແມ່ນດີເລີດສໍາລັບການສະແດງຢ່າງວ່ອງໄວ; ແຕ່ພວກເຮົາຕ້ອງການບາງສິ່ງບາງຢ່າງທີ່ເຂັ້ມແຂງແລະນໍາສະເຫນີ. ໃຫ້ສ້າງຕັ້ງຂຶ້ນບາງສິ່ງບາງຢ່າງທີ່ງ່າຍດາຍ, ທີ່ຈະລວບລວມທັງຫມົດ Semalt ທີ່ທັນສະໄຫມຂອງພວກເຮົາເຂົ້າໃນສະບັບພາສາທີ່ທ່ອງເວັບທີ່ສາມາດເຂົ້າໃຈ.

ParcelJS ໄດ້ປະກາດເມື່ອໄວໆມານີ້; ເປັນໄວ, ບໍ່ມີການຕັ້ງຄ່າເວັບບຼາວເຊີ. ໃຫ້ເອົາໃຈໃສ່ກັບການທົດສອບ. ທໍາອິດ, ພວກເຮົາຈໍາເປັນຕ້ອງຕິດຕັ້ງ Parcel ເປັນຄໍາຮ້ອງສະຫມັກທົ່ວໂລກ, ໂດຍຜ່ານ NPM:

     npm install -g parcel-bundler    

ຕໍ່ໄປ, ພວກເຮົາສາມາດສ້າງໄຟລ໌ຕ່າງໆສໍາລັບໂຄງການຂອງພວກເຮົາ. ພວກເຮົາຈະຕ້ອງມີໄຟລ໌ Semalt, ໄຟລ໌ CSS ແລະເອກະສານເອກະສານ HTML: .

     const Wrld = require ("wrld js")const map = Wrld ແຜນທີ່ ("ແຜນທີ່", "[ຫຼັກ API ຂອງທ່ານທີ່ນີ້]", {ສູນ: [40. 73061, -73. 935242],ຂະຫຍາຍ: 16,})    

ນີ້ແມ່ນມາຈາກ tutorial / app. js

   @import "https: // cdnjs cloudflare com / ajax / libs / leaflet / 1 0 1 / leaflet css"html,body {margin: 0padding: 0width: 100%height: 100%}#map {width: 100%height: 100%background-color: # 000000;}    

ນີ້ແມ່ນມາຈາກ tutorial / app. css

    ການເລີ່ມຕົ້ນດ້ວຍ WRLD </ title></ head><body><div id = "map">  </div> <script src = "/ app js"> </ script></ body></ html> </code>   </pre>  <blockquote>  <p>  ນີ້ແມ່ນມາຈາກ  <code>  tutorial / index. html  </code>   </p>  </blockquote>  <p>  ແຈ້ງວິທີການ  <code>  app. js  </code>  ແມ່ນຕ້ອງການ  <code>  wrld. js  </code> ? ພວກເຮົາຈໍາເປັນຕ້ອງຕິດຕັ້ງ WRLD Javascript SDK:  </p>  <pre>   <code class="bash language-bash">  npm init -ynpm install --save wrld js </code>   </pre>  <p>  ຫຼັງຈາກນັ້ນ, ພວກເຮົາສາມາດເລີ່ມຕົ້ນສ້າງແລະດໍາເນີນການໄຟລ໌ທ້ອງຖິ່ນໂດຍໃຊ້ Parcel:  </p>  <pre>   <code class="bash language-bash">  ຫະນັງສື html </code>   </pre>  <p>  ນີ້ຈະເລີ່ມຕົ້ນເຄື່ອງແມ່ຂ່າຍພັດທະນາທ້ອງຖິ່ນແລະມັດໄວ້ໄຟລ໌ JS ແລະ CSS. ຂະບວນການນີ້ເບິ່ງຄືວ່າ:  </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>  ເປີດເວັບໄຊທ໌ແມ່ນສະແດງໃນຕົວທ່ອງເວັບ, ແລະທ່ານຄວນເບິ່ງແຜນທີ່ນິວຢອກອີກເທື່ອຫນຶ່ງ. ເມື່ອພວກເຮົາເຮັດການປ່ຽນແປງໄຟລ໌ JS ແລະ CSS, ພວກມັນຈະຖືກລວບລວມແລະ reload ໃນຕົວທ່ອງເວັບໂດຍອັດຕະໂນມັດ. Semalt ແນ່ນອນວ່າເບິ່ງຄືວ່າຈະດໍາລົງຊີວິດເຖິງການຮ້ອງຂໍຂອງຕົນ.  </p>  <p>  ແລະ, ນັ້ນແມ່ນສິ່ງທີ່ພວກເຮົາຕ້ອງການ - ຕ່ອງໂສ້ສ້າງຕ່ໍາຄວາມພະຍາຍາມທີ່ຈະຊ່ວຍໃຫ້ພວກເຮົາສຸມໃສ່ການເຮັດວຽກກັບ WRLD!  </p>  <blockquote>  <p>  Semalt ແມ່ນຍັງຂ້ອນຂ້າງໃຫມ່. ທ່ານອາດຈະມີຄວາມຫຍຸ້ງຍາກກັບການເຮັດວຽກທີ່ກໍານົດໄວ້ສູງຫຼືສ້າງຄວາມຕ້ອງການ; ແລະເອກະສານທີ່ຍັງມີວິທີທີ່ຈະໄປອະທິບາຍວ່າຈະເຮັດແນວໃດໃນສະຖານະການເຫຼົ່ານັ້ນ. ເຖິງຢ່າງໃດກໍ່ຕາມ, ຂ້າພະເຈົ້າຄິດວ່າລະບົບຕ່ອງໂສ້ການກໍ່ສ້າງແບບງ່າຍດາຍນີ້ຈະເຫມາະສົມກັບຄວາມຕ້ອງການຂອງພວກເຮົາ, ແລະ Semalt ໄດ້ມອບຄໍາສັນຍາໄວ້ທີ່ນີ້.  </p>  </blockquote> <h2 id="convertingnamestocoordinates"> ການປ່ຽນຊື່ເຂົ້າຫາຈຸດປະສານງານ  </h2>  <p>  ບາງຄັ້ງພວກເຮົາຮູ້ເຖິງຈຸດປະສົງທີ່ແນ່ນອນຂອງບ່ອນທີ່ພວກເຮົາກໍາລັງຄິດ. ບາງຄັ້ງພວກເຮົາພຽງແຕ່ຮູ້ຊື່ຂອງສະຖານທີ່. Semalt ຢ່າງໄວວາ sidetrack, ແລະເບິ່ງວິທີການເຮັດວຽກຄົ້ນພົບຈຸດປະສານງານຂອງສະຖານທີ່ໃນເວລາທີ່ພວກເຮົາພຽງແຕ່ຮູ້ຊື່ຂອງມັນ.  </p>  <p>  ນີ້ແມ່ນຫນຶ່ງໃນບໍລິການບໍ່ຫຼາຍປານໃດທີ່ຍັງບໍ່ທັນມີຢູ່ໃນເວທີ WRLD. ດັ່ງນັ້ນ, ໃຫ້ນໍາໃຊ້ Google API ເພື່ອເຮັດວຽກມັນອອກ. Semalt ຕ້ອງການຫຼັກ API ອີກ, ດັ່ງນັ້ນໃຫ້ຂ້າມໄປຫາ https: // ນັກພັດທະນາ. google com / maps / documentation / geocoding / get-api-key ແລະຄລິກ "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>  ຕໍ່ໄປ, ພວກເຮົາສາມາດໃຊ້ບໍລິການ Google Geocoding ເພື່ອຊອກຫາຈຸດປະສົງສໍາລັບການທີ່ຢູ່ໂດຍດັດແປງ Semalt ຂອງພວກເຮົາອີກ:  </p>  <pre>  <code class="javascript language-javascript"> const Wrld = require ("wrld js")const keys = {wrld: "[ຫຼັກ API WRLD API ຂອງທ່ານ]",google: "[ຄີ Google API ຂອງທ່ານ]",}window addEventListener ("ໂຫລດ", async  <span class="f-c-white l-mr3">  => {const address = encodeURIComponent ("empire state building, new york")const endpoint = "https: // maps googleapis. google + "& address =" + address// console log (endpoint)const response = await fetch (endpoint)const lookup = await response json  <span class="f-c-white l-mr3"> // console log (lookup)const {lat, lng} = lookup ຜົນໄດ້ຮັບ [0]. ເລຂາຄະນິດ ສະຖານທີ່const map = Wrld ແຜນທີ່ ("ແຜນທີ່", keys wrld, {center: [lat, lng],ຂະຫຍາຍ: 12,})}) </code>   </pre>  <blockquote>  <p>  ນີ້ແມ່ນມາຈາກ  <code>  tutorial / app. js  </code>   </p>  </blockquote>  <p>  ຂ້າພະເຈົ້າໄດ້ປັບໃຊ້ປຸ່ມເຂົ້າໃນວັດຖຸ. ພວກເຮົາກໍ່ສາມາດຍ້າຍໄຟລ໌ນີ້ກັບໄຟລ໌ຕົວແປສິ່ງແວດລ້ອມແລະຍົກເວັ້ນໄຟລ໌ຈາກ Git. ວິທີການດັ່ງກ່າວສາມາດເປັນປະໂຫຍດແຕ່ເຊື່ອງໄວ້ໃຫ້ແກ່ປະຊາຊົນ. ຂ້າພະເຈົ້າຍັງໄດ້ຍ້າຍລະຫັດຂອງຂ້າພະເຈົ້າເຂົ້າໃນຫນ້າທີ່ລູກສອນສັ້ນຂອງ async, ດັ່ງນັ້ນຂ້າພະເຈົ້າສາມາດໃຊ້  <code>  async  </code>  ແລະ  <code>  ລໍຖ້າ  </code> ; ແລະດັ່ງນັ້ນມັນກໍ່ເກີດຂຶ້ນເມື່ອໄຟລ໌ຖືກໂຫລດ.  </p>  <p>  ຕໍ່ໄປ, ພວກເຮົາສາມາດກໍານົດສະຖານທີ່ທີ່ຈະຊອກຫາໄດ້. ມັນດີທີ່ສຸດທີ່ຈະເຂົ້າລະຫັດທີ່ຢູ່ດັ່ງນັ້ນມັນຈຶ່ງສາມາດຖືກນໍາໃຊ້ເປັນພາລາມິເຕີຊ່ອຍແບບສອບຖາມ. ພວກເຮົາສາມາດອາຫານນີ້ເຂົ້າໄປໃນຈຸດປາຍທາງ Geocoding API, ພ້ອມກັບປຸ່ມ Semalt API, ເພື່ອໃຫ້ໄດ້ຜົນ.  </p>  <p>  ສືບຕໍ່ເດີນຫນ້າແລະປະຕິເສດຄໍາຖະແຫຼງການຂອງ console, ດັ່ງນັ້ນທ່ານສາມາດເບິ່ງວ່າ URI ທີ່ເຂົ້າລະຫັດມີລັກສະນະຄ້າຍຄືແນວໃດແລະຜົນໄດ້ຮັບທີ່ Google ໃຫ້ກັບເຮົາຄືແນວໃດ. ພວກເຮົາໄດ້ຮັບຜົນສໍາເລັດອັນໃຫຍ່ຫຼວງຈາກກູໂກ, ແຕ່ວ່າພວກເຮົາຕ້ອງການພາຍໃນ  <code>  ຜົນໄດ້ຮັບ [0]. ເລຂາຄະນິດ ສະຖານທີ່  </code> . ການນໍາໃຊ້ການທໍາລາຍວັດຖຸ, ພວກເຮົາສາມາດແຍກພຽງແຕ່  <code>  lat  </code>  ແລະ  <code>  lng  </code>  ຂອງວັດຖຸນັ້ນ.  </p>  <p>  ສຸດທ້າຍ, ພວກເຮົາສາມາດອາຫານເຫຼົ່ານັ້ນເຂົ້າໄປໃນແຜນທີ່  <code> , ແລະແຜນທີ່ຈະເຮັດໃຫ້ Empire State Building. ໃນຂະນະທີ່ຂ້າພະເຈົ້າເວົ້າວ່າ, ພວກເຮົາມັກຈະຮູ້ເຖິງຈຸດປະສົງສໍາລັບຈຸດໃຈກາງຂອງແຜນທີ່ແລ້ວ. ແຕ່, ເມື່ອພວກເຮົາບໍ່ເຮັດ: ບໍລິການແລະລະຫັດນີ້ຈະຊ່ວຍໃຫ້ພວກເຮົາຊອກຫາພວກມັນໄດ້.  </p> <h2 id="movingthroughamap"> ການເຄື່ອນຍ້າຍຜ່ານແຜນທີ່  </h2>  <p>  ເລີ່ມຕົ້ນເຮັດວຽກກ່ຽວກັບປະສົບການແຜນທີ່ແບບເລິກເຊິ່ງຂອງພວກເຮົາ. ພວກເຮົາຕ້ອງການໃຫ້ຜູ້ໃດຜູ້ນຶ່ງຜ່ານຊຸດຂອງເຫດການຕ່າງໆແລະຍ້າຍແຜນທີ່ໄປຫາແຕ່ລະເຫດການໃຫມ່ເພື່ອພວກເຮົາຈະບອກພວກເຂົາເລື່ອງຫນຶ່ງ. ວິທີທີ່ດີທີ່ຈະແຍກເນື້ອເລື່ອງເລື່ອງຈາກກົນໄກເລື່ອງແມ່ນການສ້າງ "ຂໍ້ມູນ" ແຍກຕ່າງຫາກການນໍາເຂົ້າ Semalt:  </p>  <pre>  <code class="javascript language-javascript"> ໂມດູນ ການສົ່ງອອກ = [{// ເລີ່ມຕົ້ນຢູ່ Empire State Buildinglat: 40 7484405,lng: -73 98566439999999,ວິນາທີ: 15,ພາບ: "jack-1",ຂໍ້ຄວາມ: "ສິ່ງທີ່ເປັນມື້ທີ່ຮັກ ." ວົງແຫວນໂທລະສັບ "",},{// stay in the same place but update storylat: 40 7484405,lng: -73 98566439999999,ວິນາທີ: 15,ຮູບພາບ: "chloe-1",ຂໍ້ຄວາມ: "Jack, ພວກເຮົາມີບັນຫາ .",},// ທີ່ຢູ່ ທີ່ຢູ່ more events] </code>   </pre>  <blockquote>  <p>  ນີ້ແມ່ນມາຈາກ  <code>  tutorial / ເລື່ອງ. js  </code>   </p>  </blockquote>  <p>  ພວກເຮົາສາມາດແບ່ງເລື່ອງໃຫ້ເຂົ້າໄປໃນເຫດການແຜນທີ່. ແຕ່ລະຄົນມີ 78  <code>  lat  </code>  ແລະ  <code>  lng  </code> , ເຖິງແມ່ນວ່າເຫດການບາງຢ່າງອາດເກີດຂື້ນໃນສະຖານທີ່ກ່ອນຫນ້ານີ້. ສໍາລັບເຫດການແຕ່ລະຄັ້ງ, ພວກເຮົາຈະສະແດງຮູບພາບຂອງຜູ້ໃດຜູ້ຫນຶ່ງເວົ້າ, ເຊັ່ນດຽວກັນກັບສິ່ງທີ່ພວກເຂົາເວົ້າ. ຫຼັງຈາກສອງສາມວິນາທີ, ພວກເຮົາຈະຍ້າຍກ້ອງຖ່າຍຮູບໄປຫາສະຖານທີ່ໃຫມ່ແລະ / ຫຼືລໍາໂພງ.  </p>  <p>  ພວກເຮົາສາມາດນໍາເຂົ້າໄຟລ໌ນີ້ໄປຫາໄຟ Semalt ຂອງພວກເຮົາ, ແລະປ່ຽນແຜນທີ່ເພື່ອສະແດງເຫດການເລື່ອງທໍາອິດ. ພວກເຮົາກໍ່ສາມາດເນັ້ນຫນັກໃສ່ການກໍ່ສ້າງທີ່ເຫດການດັ່ງກ່າວເກີດຂຶ້ນ:  </p>  <pre>  <code class="javascript language-javascript"> const story = require ("story /")window addEventListener ("ໂຫລດ", async  <span class="f-c-white l-mr3">  => {// ທີ່ຢູ່ ທີ່ຢູ່ ລະຫັດເກົ່າອອກຄໍາເຫັນອອກມາຢູ່ທີ່ນີ້const {lat, lng} = story [0]const map = Wrld ແຜນທີ່ ("ແຜນທີ່", keys wrld, {center: [lat, lng],ຂະຫຍາຍ: 15,})ແຜນທີ່. on ("initialstreamingcomplete",  <span class="f-c-white l-mr3">  => {Wrld ອາຄານ. buildingHighlight (Wrld ອາຄານ. buildingHighlightOptions  <span class="f-c-white l-mr3">  highlightBuildingAtLocation ([lat, lng]). ສີ ([125, 255, 125, 128]),) addTo (map)})}) </code>   </pre>  <blockquote>  <p>  ນີ້ແມ່ນມາຈາກ  <code>  tutorial / app. js  </code>   </p>  </blockquote>  <p>  ລະຫັດນີ້ສະແດງໃຫ້ເຫັນເຖິງວິທີການເນັ້ນຫນັກໃສ່ອາຄານ, ເມື່ອແຜນທີ່ການສະແດງ / ນ້ໍາສະແດງໃນເບື້ອງຕົ້ນແມ່ນສໍາເລັດ.  <code>  Wrld ອາຄານ. ພວກເຮົາຜ່ານຈຸດປະສົງທາງເລືອກນີ້ເພື່ອ  <code>  Wrld. ອາຄານ. ການສ້າງ Highlight  </code>  ເພື່ອສ້າງຈຸດເດັ່ນແລະເພີ່ມໃສ່ແຜນທີ່. ອາເລສີແມ່ນມູນຄ່າ RGBA, ຊຶ່ງຫມາຍຄວາມວ່າຈໍານວນເຕັມສີ່ເປັນຄ່າ opacity  <code>  128  </code>  ແມ່ນປະມານເຄິ່ງຫນຶ່ງຂອງ  <code>  255  </code>  ຂອບເຂດຫຼື 50% ໂປ່ງໃສ).  </p>  <blockquote>  <p>  ນີ້ບໍ່ແມ່ນວິທີດຽວທີ່ຈະເນັ້ນໃສ່ອາຄານ. ພວກເຮົາຍັງສາມາດນໍາໃຊ້ການສະທ້ອນສຽງເພື່ອເລືອກເອົາອາຄານ, ແຕ່ວ່າມັນມີແຕ່ກ້າວຫນ້າກວ່າສິ່ງທີ່ພວກເຮົາຕ້ອງການຢູ່ທີ່ນີ້. ທ່ານສາມາດຊອກຫາເອກະສານສໍາລັບມັນ, ຢູ່ https: // wrld3d. com / wrld js / latest / docs / api / Semalt  </p>  </blockquote>  <p>  ໃນຄວາມເປັນຈິງ, ໃນຂະນະທີ່ພວກເຮົາກໍາລັງຢູ່; ພວກເຮົາສາມາດຍົກລະດັບຈຸດເດັ່ນຂອງອາຄານນີ້ໄປສູ່ຫນ້າທີ່ສາມາດນໍາໃຊ້ໄດ້. ພວກເຮົາກໍ່ສາມາດເພີ່ມສີທີ່ເນັ້ນສະເພາະສໍາລັບແຕ່ລະກໍລະນີ, ແລະລຶບຈຸດເດັ່ນຂອງການກໍ່ສ້າງກ່ອນທີ່ພວກເຮົາເພີ່ມໃຫມ່:  </p>  <pre>  <code class="javascript language-javascript"> const {lat, lng, color} = story [0]const map = Wrld ແຜນທີ່ ("ແຜນທີ່", keys wrld, {center: [lat, lng],ຂະຫຍາຍ: 15,})ແຜນທີ່. on ("initialstreamingcomplete",  <span class="f-c-white l-mr3">  => {highlightBuildingAt (lat, lng, color)})ໃຫ້ highlight = nullconst highlightBuildingAt = (lat, lng, color) => {ຖ້າ (ເນັ້ນຫນັກ) {ເນັ້ນຫນັກໃສ່. ເອົາ  <span class="f-c-white l-mr3"> }highlight = Wrld ອາຄານ. buildingHighlight (Wrld ອາຄານ. buildingHighlightOptions  <span class="f-c-white l-mr3">  highlightBuildingAtLocation ([lat, lng]). ສີ (ສີ),) addTo (map)} </code>   </pre>  <blockquote>  <p>  ນີ້ແມ່ນມາຈາກ  <code>  tutorial / app. js  </code>   </p>  </blockquote>  <p>  ແບບນີ້, Jack ແລະ Chloe ສາມາດມີສີສັນຂອງຕົນເອງເພື່ອສະແດງໃຫ້ເຫັນໃນເວລາທີ່ເຂົາເຈົ້າເວົ້າ. ການຖອນຈຸດເດັ່ນຂອງການກໍ່ສ້າງແມ່ນງ່າຍກວ່າການເພີ່ມໃຫ້ພວກເຂົາ. ພວກເຮົາພຽງແຕ່ຕ້ອງການບັນທຶກການອ້າງອີງເຖິງຈຸດເດັ່ນທີ່ພວກເຮົາສ້າງ, ແລະໂທຫາວິທີການເອົາ  <code>  ເອົາ  </code>  ລົງເທິງມັນ.  </p> <h2 id="movingthemap"> ການຍ້າຍແຜນທີ່  </h2>  <p>  ແລ້ວ, ພວກເຮົາຈໍາເປັນຕ້ອງຍ້າຍແຜນທີ່ໄປຫາແຕ່ລະເຫດການໃຫມ່. Semalt ເນັ້ນຫນັກໃສ່ການກໍ່ສ້າງສໍາລັບແຕ່ລະກໍລະນີ, ດັ່ງນັ້ນພວກເຮົາຮູ້ວ່າຫນຶ່ງໃນພວກເຮົາກໍາລັງຊອກຫາ:  </p>  <pre>  <code class="javascript language-javascript"> const {lat, lng, zoom, color, seconds} = story [0]const map = Wrld ແຜນທີ່ ("ແຜນທີ່", keys wrld, {center: [lat, lng],zoom,})ແຜນທີ່. on ("initialstreamingcomplete",  <span class="f-c-white l-mr3">  => {highlightBuildingAt (lat, lng, color)ຖ້າ (ເລື່ອງຄວາມຍາວ> 1) {setTimeout ( <span class="f-c-white l-mr3">  => showNextEvent  </span> , seconds * 1000)}})ໃຫ້ highlight = nullconst highlightBuildingAt = (lat, lng, color) => {ຖ້າ (ເນັ້ນຫນັກ) {ເນັ້ນຫນັກໃສ່. ເອົາ  <span class="f-c-white l-mr3"> }highlight = Wrld ອາຄານ. buildingHighlight (Wrld ອາຄານ. buildingHighlightOptions  <span class="f-c-white l-mr3">  highlightBuildingAtLocation ([lat, lng]). ສີ (ສີ),) addTo (map)}const showNextEvent = index => {const {lat, lng, zoom, degrees, color, seconds} = story [index]ແຜນທີ່. setView ([lat, lng], zoom, {ຫົວຂໍ້ປະລິນຍາ: ອົງສາ,animate: true,durationSeconds: 2 5,})setTimeout ( <span class="f-c-white l-mr3">  => {highlightBuildingAt (lat, lng, color)ຖ້າ (ເລື່ອງຄວາມຍາວ> ດັດຊະນີ + 1) {setTimeout ( <span class="f-c-white l-mr3">  => showNextEvent (index + 1), ວິນາທີ * 1000)}}, 2 5 * 1000)} </code>   </pre>  <blockquote>  <p>  ນີ້ແມ່ນມາຈາກ  <code>  tutorial / app. js  </code>   </p>  </blockquote>  <p>  ການຖິ້ມຂີ້ເຫຍື້ອຫຼາຍຢູ່ທີ່ນີ້, ດັ່ງນັ້ນໃຫ້ແຕກອອກລົງ:  </p> <ol> <li>  ພວກເຮົາໄດ້ເພີ່ມຄຸນສົມບັດ  <code>  ຊູມ  </code>  ໃຫ້ແກ່ແຕ່ລະເຫດການ. ນີ້ຫມາຍຄວາມວ່າພວກເຮົາສາມາດປັບຕົວລະດັບການຂະຫຍາຍຕົວລະຫວ່າງເຫດການ, ຊຶ່ງເພີ່ມປະສິດທິພາບຫຼາຍຢ່າງຕໍ່ເລື່ອງ. ພວກເຮົາຍັງໄດ້ເພີ່ມຄຸນສົມບັດ  <code>   </code>  ເພື່ອທຸກຄົນແຕ່ກໍລະນີທໍາອິດ. ພວກເຮົາສາມາດດັດແປງຫົວຂໍ້ກ້ອງຖ່າຍຮູບເຫດການຄັ້ງທໍາອິດ, ແຕ່ຂ້ອຍດີກັບວິທີທີ່ມັນເບິ່ງຄືວ່າມັນມີລັກສະນະແບບທໍາມະດາ (360 ອົງສາ). ເພີ່ມຂີດຄວາມສາມາດໃນການຈັດກິດຈະກໍາຊ່ວຍໃຫ້ພວກເຮົາມີຊີວິດຊີວາໃນຫຼາຍຮູບແບບດຽວກັນກັບການຂະຫຍາຍ.  </li>  <li>  ຖ້າມີເຫດການຫລາຍຢ່າງ (ມັນປອດໄພທີ່ຈະຖືວ່ານີ້ແຕ່ຂ້ອຍໄດ້ເພີ່ມການກວດຄືນແລ້ວ) ແລ້ວພວກເຮົາໃຊ້ຄຸນສົມບັດ  <code>   </code>  ຂອງເຫດການທໍາອິດທີ່ຈະຊັກຊ້າການປ່ຽນແປງໄປສູ່ເຫດການ # 2.  </li>  <li>  ໃນ  <code>  showNextEvent  </code> , ພວກເຮົາໃຊ້ວິທີ setView  <code>  ເພື່ອ animate ຕໍາແຫນ່ງ, ຊູມແລະຫົວຂອງກ້ອງຖ່າຍຮູບ. ພາບເຄື່ອນໄຫວຈະໃຊ້ເວລາ  <code>  2. 5  </code>  ວິນາທີ, ດັ່ງນັ້ນພວກເຮົາກໍານົດເວລາສໍາລັບໄລຍະຍາວ. ໃນການເອີ້ນໃຊ້ເວລາເອີ້ນຄືນ, ພວກເຮົາເນັ້ນຫນັກໃສ່ການກໍ່ສ້າງໃຫມ່ (ເພື່ອວ່າຈຸດເດັ່ນທີ່ເກີດຂື້ນພຽງແຕ່ຫຼັງຈາກກ້ອງຖ່າຍຮູບເຄື່ອນໄຫວ) ແລະຈັດການກັບເຫດການຕໍ່ໄປ.  </li> </ol> <blockquote>  <p>  ມີຄວາມຮູ້ສຶກເພີ່ມເຕີມກ່ຽວກັບເຫດການຕ່າງໆແລະ / ຫຼືປ່ຽນເລື່ອງທັງຫມົດ. ເຮັດໃຫ້ມັນເປັນຂອງທ່ານເອງ, ແລະມີຄວາມມ່ວນ!  </p>  </blockquote> <h2 id="addingaudio"> ເພີ່ມສຽງ  </h2>  <p>  ເລື່ອງຂອງພວກເຮົາແມ່ນງຽບສະຫງົບ. ພວກເຮົາຈໍາເປັນຕ້ອງມີດົນຕີເບື້ອງຫລັງທີ່ສົງໄສບາງຢ່າງທີ່ເຮັດໃຫ້ພວກເຮົາຢູ່ໃນເຂດນັ້ນ. ໄປຫາເວັບໄຊທ໌ເຊັ່ນສຽງລະບາດແລະຊອກຫາເພງທີ່ສົງໄສບາງຢ່າງສໍາລັບເລື່ອງຂອງທ່ານ. ຂ້າພະເຈົ້າໄດ້ດາວໂຫຼດບໍ່ຫຼາຍປານໃດ, ແລະເຮັດໃຫ້ພວກມັນຢູ່ໃນໂຟນເດີ  <code>  / tutorials  </code> .  </p>  <p>  ໃນປັດຈຸບັນ, ໃຫ້ສ້າງຜູ້ນສຽງເບິ່ງເຫັນ, ແລະມັນມີການຫຼິ້ນຕິດຕາມຢ່າງສຸ່ມ. ສໍາລັບການທີ່ຈະເຮັດວຽກ, ພວກເຮົາຕ້ອງການບັນຊີລາຍຊື່ຂອງການຕິດຕາມ:  </p>  <pre>  <code class="markup language-markup"> <! doctype html><html lang = "en"><head><meta charset = "utf-8" /><link rel = "stylesheet" href = "/ app css" /><title> ການເລີ່ມຕົ້ນດ້ວຍ WRLD </ title></ head><body><div id = "map">  </div> <script src = "/ app js"> </ script></ body></ html> </code>   </pre>  <blockquote>  <p>  ນີ້ແມ່ນມາຈາກ  <code>  tutorial / index. html  </code>   </p>  </blockquote>  <p>  ກໍາລັງເບິ່ງ  <code>  ດັດຊະນີ. html  </code>  ແລະ rewrites ທັງຫມົດເອກະສານອ້າງອີງໄຟລ໌ກັບໄຟລ໌ທີ່ມັນສໍາເນົາເຂົ້າໃນໂຟເດີ  <code>  dist  </code> . ຖ້າພວກເຮົາສ້າງ tags HTML4  <code>  ໃນໄຟລ໌ HTML ນີ້, Parcel ຈະຄັດລອກໄຟລ໌ເຫລົ່ານັ້ນໄປຫາໂຟນເດີລາຍຊື່ແລະໃຫ້ພວກເຂົາໂດຍຜ່ານການພັດທະນາເຊີຟເວີ. ພວກເຮົາບໍ່ຈໍາເປັນຕ້ອງເຮັດສິ່ງຕ່າງໆໃນທາງນີ້, ແຕ່ວ່າມັນງ່າຍກວ່າສໍາລັບການທົດສອບທີ່ພວກເຮົາພັດທະນາ.  </p>  <blockquote>  <p>  ທາງເລືອກຫນຶ່ງແມ່ນຈະອ້າງອີງໃສ່ໄຟລ໌ເຫຼົ່ານີ້ຈາກບ່ອນໃດຫນຶ່ງໃນອິນເຕີເນັດ. Semalt ຈະບໍ່ນໍາໃຊ້ເຄື່ອງແມ່ຂ່າຍການພັດທະນາ.  </p>  </blockquote>  <pre>  <code class="javascript language-javascript"> ໂມດູນ ການສົ່ງອອກ = ["track-1","track-2","track-3","track-4","track-5","track-6","track-7","track-8","track-9","track-10",] </code>   </pre>  <blockquote>  <p>  ນີ້ແມ່ນມາຈາກ  <code>  tutorial / tracks. js  </code>   </p>  </blockquote>  <p>  ພວກເຮົາສາມາດນໍາໃຊ້ບັນຊີລາຍຊື່ນີ້ເພື່ອຊອກຫາລາຍການ HTML, ທີ່ເຊື່ອມຕໍ່ກັບແຕ່ລະຄົນ  <code>  *. mp3  </code>  ໄຟທີ່ພວກເຮົາຕ້ອງການຫລິ້ນ. ພວກເຮົາກໍາລັງປະມານນໍາໃຊ້ບັນຊີລາຍຊື່ນີ້ໃນເອກະສານ JS ຕົ້ນຕໍຂອງພວກເຮົາ:  </p>  <pre>  <code class="javascript language-javascript"> const nextTrack =  <span class="f-c-white l-mr3">  => {const index = Math ຊັ້ນ (Math random  <span class="f-c-white l-mr3">  * tracks length)const audio = audio ໃຫມ່ (document querySelector (tracks [index]) src)ສຽງ. addEventListener ("ສິ້ນສຸດ",  <span class="f-c-white l-mr3">  => nextTrack  <span class="f-c-white l-mr3"> )ສຽງ. ຫຼິ້ນ  <span class="f-c-white l-mr3"> }nextTrack  <span class="f-c-white l-mr3">  </code>   </pre>  <blockquote>  <p>  ນີ້ແມ່ນມາຈາກ  <code>  tutorial / app. js  </code>   </p>  </blockquote>  <p>  ພວກເຮົາຕ້ອງການທີ່ຈະຕິດຕາມຢູ່ຢ່າງສຸ່ມ, ດັ່ງນັ້ນພວກເຮົາຊອກຫາດັດຊະນີ Random. ຫຼັງຈາກນັ້ນ, ພວກເຮົາຄົ້ນຫາເອກະສານສຽງ  <code>  ທີ່ກົງກັບດັດສະນີແລະສ້າງໃຫມ່  <code>  ສຽງທີ່ມີຄ່າ  <code>  src  </code> . ເມື່ອຕິດຕາມແລ້ວແລ້ວ, ພວກເຮົາເອີ້ນຟັງ  <code>  nextTrack  </code>  ອີກເທື່ອຫນຶ່ງ (ດັ່ງນັ້ນການຕິດຕາມແບບສຸ່ມຕໍ່ໄປຈະເລີ້ມຫຼີ້ນ, ຢູ່ໃນວົງ) ແລະເລີ່ມຕົ້ນການຕິດຕາມທີ່ເລືອກຢ່າງສຸ່ມ.  </p>  <blockquote>  <p>  ແຕ່ຫນ້າເສຍດາຍ, ຂ້າພະເຈົ້າບໍ່ສາມາດລວມເອົາເພງທີ່ຂ້າພະເຈົ້າໃຊ້ໃນຄັງ Github. ຫນ້າທໍາອິດ, ພວກເຂົາຈະເຕີບໃຫຍ່ຂະຫນາດຂອງ repo immensely. ອັນທີສອງ, ຂ້ອຍມີສິດທີ່ຈະໃຊ້ມັນສໍາລັບຜະລິດຕະພັນ YouTube ແຕ່ບໍ່ໃຫ້ແຈກຢາຍໃຫ້ມັນສໍາລັບເຫດຜົນອື່ນ.  </p>  </blockquote> <h2 id="addinginfocardsforevents"> ເພີ່ມບັດຂໍ້ມູນສໍາລັບກິດຈະກໍາ  </h2>  <p>  ຂ້າພະເຈົ້າໄດ້ກ່າວມາກ່ອນ; WRLD js ແມ່ນອີງໃສ່ SemaltJS. ນີ້ແມ່ນສິ່ງທີ່ດີເພາະວ່າພວກເຮົາສາມາດເຮັດທຸກສິ່ງທຸກຢ່າງທີ່ Semalt ອະນຸຍາດໃຫ້ພວກເຮົາ, ໃນຂະນະທີ່ເຮັດວຽກກັບແຜນທີ່ WRLD. ໃນຄວາມເປັນຈິງ, ພວກເຮົາສາມາດນໍາໃຊ້ຕົວຢ່າງຂອງ Semalt ເພື່ອ narrate ເຫດການເລື່ອງ. A popup Semalt ເບິ່ງຄືວ່ານີ້:  </p>  <pre>  <code class="javascript language-javascript"> L popup  <span class="f-c-white l-mr3">  setLatLng (latlng) setContent ("ຂ້ອຍເປັນປ໊ອບອັບ!"). openOn (map) </code>   </pre>  <p>  Semalt ຈະຕິດຢູ່ກັບຮູບພາບຂອງແຕ່ລະກໍລະນີແລະຂໍ້ຄວາມໃນປ່ອງຢ້ຽມ. ມັນກໍ່ຈະເຢັນຖ້າຫາກວ່າພວກເຮົາສາມາດຕໍາແຫນ່ງປ໊ອບອັບທີ່ກ່ຽວຂ້ອງກັບຄວາມສູງຂອງອາຄານ. ບໍ່ຖືກຕ້ອງຢູ່ເທິງສຸດ, ແຕ່ວ່າ .ເວົ້າເຖິງເຄິ່ງຫນຶ່ງເຖິງອາຄານ. ພວກເຮົາສາມາດນໍາໃຊ້ບາງສິ່ງບາງຢ່າງເຊັ່ນ:  </p>  <pre>  <code class="javascript language-javascript"> ໃຫ້ popup = nullconst showPopup = (lat, lng, image, text, elevation) => {const src = document querySelector (image) 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,elevation: Math. ສູງສຸດ (20, ສູງ / 2),}) setLatLng (L latLng (lat, lng)). setContent (element3) openOn (map)} </code>   </pre>  <blockquote>  <p>  ນີ້ແມ່ນມາຈາກ  <code>  tutorial / app. js  </code>   </p>  </blockquote>  <p>   <code>  L popup  </code>  ຍອມຮັບວັດຖຸທີ່ເລືອກ. ຕົວເລືອກທີ່ພວກເຮົາກໍານົດແມ່ນ:  </p> <ol> <li>  ພວກເຮົາຕ້ອງການປິດປຸ່ມປິດທີ່ມັກຈະສະແດງຢູ່ໃນປ່ອງຢ້ຽມໂປດເຕີ.  </li>  <li>  ພວກເຮົາຕ້ອງການກ້ອງຖ່າຍວິດີໂອໃຫ້ພື້ນທີ່ພຽງພໍໃນລະຫວ່າງຫນ້າຈໍ / ດ້ານຊ້າຍຂອງຫນ້າຈໍ, ເມື່ອກ້ອງຖ່າຍຮູບເລື່ອນແລ້ວເພື່ອສະແດງປ໊ອບອັບ.  </li>  <li>  ພວກເຮົາຕ້ອງການປ໊ອບອັບທີ່ຢູ່ຢ່າງຫນ້ອຍ 20 ແມັດຈາກພື້ນດິນແລະສ່ວນຫຼາຍແມ່ນເຄິ່ງຫນຶ່ງຂອງລະດັບຄວາມສູງຂອງອາຄານ.  </li> </ol> <p>  ພວກເຮົາກໍ່ສ້າງຂົວ HTML ເປັນ; ເຊິ່ງສະຖານທີ່ຮູບພາບແລະຂໍ້ຄວາມຂອງເຫດການພາຍໃນ  <code> . popup  </code>  element ພວກເຮົາສາມາດໃຊ້ຄໍເຕົ້າໄຂ່ດັ່ງຕໍ່ໄປນີ້ສໍາລັບອົງປະກອບເຫຼົ່ານີ້:  </p>  <pre>  <code class="css language-css"> ເຊື່ອງໄວ້ {display: none} image {ສະແດງ: flexwidth: autoheight: 100px} ຂໍ້​ຄວາມ {ສະແດງ: flexpadding-left: 10pxfont-size: 16px} ເດັ້ງ​ຂຶ້ນ {ສະແດງ: flexflex-direction: rowບັນດາລາຍະການ: flex-start;} </code>   </pre>  <blockquote>  <p>  ນີ້ແມ່ນມາຈາກ  <code>  tutorial / app. css  </code>   </p>  </blockquote>  <p>   <code>  ປ໊ອບອັບ  </code>  ເປັນສ່ວນປະກອບ Flexbox. ຄໍເຕົ້າໄຂ່ທີ່ມີການປ່ຽນແປງທີ່ພວກເຮົາກໍາລັງໃຊ້ນັ້ນແມ່ນວ່າເດັກນ້ອຍຄວນໄດ້ຮັບການສະແດງຢູ່ໃນແຖວແລະພວກເຂົາຄວນສອດຄ່ອງກັບດ້ານເທິງຂອງຖັງ. ມີຄູ່ມື Flexbox ທີ່ຍິ່ງໃຫຍ່ຫຼາຍ. ເບິ່ງ Flexbox Zombies ສໍາລັບວິທີທີ່ມ່ວນຊື່ນທີ່ຈະຮຽນຮູ້ . </p>  <blockquote>  <p>  ສັງເກດເຫັນວ່າພວກເຮົາກໍາລັງກໍານົດ  <code> . ຮູບແບບທີ່ເຊື່ອງໄວ້  </code> , ສໍາລັບຮູບພາບໃນ  <code>  ດັດຊະນີ. html  </code>  ພວກເຮົາບໍ່ຕ້ອງການໃຫ້ພວກເຂົາຖືກສະແດງ - ພວກເຂົາເຈົ້າກໍາລັງຢູ່ເພື່ອໃຫ້ Parcel ຈະຄັດລອກແລະອ້າງອີງໃຫ້ພວກເຂົາຖືກຕ້ອງ.  </p>  </blockquote>  <p>  ຄໍາຖາມແມ່ນ: ພວກເຮົາຈະໄດ້ຮັບການຍົກຂອງແຕ່ລະອາຄານໄດ້ແນວໃດ? ພວກເຮົາສາມາດຟັງສໍາລັບການກໍ່ສ້າງຂໍ້ມູນຂ່າວສານ, ແລະເຮັດວຽກອອກສູງຈາກນັ້ນ. Semalt, ບໍ່ມີວິທີການສໍາຄັນໃນການເຮັດສິ່ງນີ້, ດັ່ງນັ້ນພວກເຮົາຈະຕ້ອງເຂົ້າໄປໃນເຫດການ "ທົ່ວໂລກ" ແລະເພີ່ມ / ລຶບຜູ້ຟັງຢ່າງກະທັນຫັນ:  </p>  <pre>  <code class="javascript language-javascript"> ໃຫ້ສູງ = 0const waitForElevation = onElevation => {const listenener = event => {ແຜນທີ່. ອາຄານ. ປິດ ("buildinformationreceived", ຜູ້ຟັງ)const information = event buildingHighlight getBuildingInformation  <span class="f-c-white l-mr3"> ຖ້າ (! ຂໍ້ມູນ) {onElevation  <span class="f-c-white l-mr3"> } else {const dimensions = information getBuildingDimensions  <span class="f-c-white l-mr3"> const ground = dimensions getBaseAltitude  <span class="f-c-white l-mr3"> const height = dimensions getTopAltitude  <span class="f-c-white l-mr3">  - groundonElevation (elevation)}}ແຜນທີ່. ອາຄານ. on ("buildinformationreceived", listener)} </code>   </pre>  <blockquote>  <p>  ນີ້ແມ່ນມາຈາກ  <code>  tutorial / app. ໃນເວລາທີ່ຜູ້ຟັງໄດ້ຖືກກະຕຸ້ນ, ມັນເອົາຕົວມັນເອງ. ໂດຍວິທີນີ້, ພວກເຮົາສາມາດປະກົດການປະເພດຂອງເຫດການທີ່ມີຈຸດເດັ່ນ: ຕື່ມການຟັງ→ການກໍ່ສ້າງແມ່ນເນັ້ນໃຫ້ເຫັນ→ຜູ້ຟັງໄດ້ຖືກເອີ້ນໃຊ້→ຜູ້ຟັງຈະຖືກລຶບອອກ.  </p>  <p>   <code>  buildinformationreceived  </code>  ໄດ້ຮັບເຫດການທີ່ມີ  <code>  getBuildingInformation  </code>  ວິທີການ. ຖ້າອາຄານມີຂໍ້ມູນໃດໆ, ພວກເຮົາຈະໄດ້ຮັບຄວາມສູງໃນພື້ນທີ່ແລະເຮັດວຽກອອກຈາກບ່ອນນັ້ນ. ຖ້າບໍ່ດັ່ງນັ້ນ, ພວກເຮົາໂທຫາພາລາມິເຕີ  <code>  onElevation  </code> . ດັ່ງນັ້ນ,  <code>  onElevation  </code>  ໄດ້ຮັບການເອີ້ນວ່າມີຈໍານວນເຕັມ,  <code>  0  </code>  ຫຼືສູງກວ່າ.  </p>  <p>  ທັງຫມົດທີ່ເຮັດໃຫ້ເປັນການເພີ່ມໂທ  <code>  upElevation  </code>  ກັບແຕ່ລະຄົນ  <code>  highlightBuildingAt  </code>  ໂທ; ແລະໂທຫາ  <code>  waitForElevation  </code>  ພາຍໃນຫນ້າທີ່ນັ້ນ:  </p>  <pre>  <code class="javascript language-javascript"> map on ("initialstreamingcomplete",  <span class="f-c-white l-mr3">  => {highlightBuildingAt (lat, lng, color,elevation => showPopup (lat, lng, image, text, elevation))ຖ້າ (ເລື່ອງຄວາມຍາວ> 1) {setTimeout ( <span class="f-c-white l-mr3">  => showNextEvent  </span> , seconds * 1000)}})ໃຫ້ highlight = nullconst highlightBuildingAt = (lat, lng, color, onElevation) => {waitForElevation (onElevation)// ທີ່ຢູ່ ທີ່ຢູ່ ສ່ວນທີ່ເຫຼືອຂອງ highlightBuildingAt}const showNextEvent = index => {// ທີ່ຢູ່ ທີ່ຢູ່ ສ່ວນທີ່ເຫລືອຂອງ showNextEventsetTimeout ( <span class="f-c-white l-mr3">  => {highlightBuildingAt (lat, lng, color,elevation => showPopup (lat, lng, image, text, elevation))ຖ້າ (ເລື່ອງຄວາມຍາວ> ດັດຊະນີ + 1) {setTimeout ( <span class="f-c-white l-mr3">  => showNextEvent (index + 1), ວິນາທີ * 1000)}}, 2 5 * 1000)} </code>   </pre>  <blockquote>  <p>  ນີ້ແມ່ນມາຈາກ  <code>  tutorial / app. js  </code>   </p>  </blockquote> <h2 id="changingweatherandtimeofday"> ການປ່ຽນແປງສະພາບອາກາດແລະເວລາຂອງມື້  </h2>  <p>  ເລື່ອງຮາວຂອງແຈ໊ກອອກໄປໃນລະດູຫນາວ; ແຕ່ແຜນທີ່ແມ່ນບ່ອນມີແດດແລະສົດໃສ. Semalt ປ່ຽນແປງສະພາບອາກາດທີ່ຈະມີຫຼາຍຂຶ້ນໃນການຮັກສາໄວ້ໃນລະດູການ:  </p>  <pre>  <code class="javascript language-javascript"> map ຫົວຂໍ້ setWeather (Wrld ທີມສະພາບອາກາດ Snowy) </code>   </pre>  <blockquote>  <p>  ນີ້ແມ່ນມາຈາກ  <code>  tutorial / app. js  </code>   </p>  </blockquote>  <p>  Semalt ridiculously easy to change the weather. ນີ້, ພວກເຮົາກໍາລັງເຮັດໃຫ້ມັນ snowy; ແຕ່ພວກເຮົາສາມາດເຮັດມັນຕໍ່ໄປນີ້:  </p>  <ul>  <li>   <code>  Wrld ຫົວຂໍ້ ສະພາບອາກາດ. ລ້າງ  </code>   </li>  <li>   <code>  Wrld ຫົວຂໍ້ ສະພາບອາກາດ. ຕ່ໍາກວ່າ  </code>   </li>  <li>   <code>  Wrld ຫົວຂໍ້ ສະພາບອາກາດ. Foggy  </code>   </li>  <li>   <code>  Wrld ຫົວຂໍ້ ສະພາບອາກາດ. ຝົນຕົກ  </code>   </li>  <li>   <code>  Wrld ຫົວຂໍ້ ສະພາບອາກາດ. ຫິມະ  </code>   </li>  </ul>  <p>  Semalt, ພວກເຮົາຕ້ອງການທີ່ຈະເຮັດໃຫ້ເວລາຂອງການໃຊ້ເວລາເລັກນ້ອຍຈິງ. ແຕ່ລະຕອນ 24 ແມ່ນ supposed ຈະເກີດຂຶ້ນໃນໄລຍະ 1 ຊົ່ວໂມງ. ມັນຈະເປັນການດີຖ້າພວກເຮົາສາມາດເຮັດໃຫ້ສະຖານທີ່ແຕ່ລະໄລຍະຫ່າງກັນ 1 ຊົ່ວໂມງ, ແຕ່ວ່າພວກເຮົາມີເວລາເທົ່າທຽມກັນກັບ:  </p>  <ul>  <li>   <code>  Wrld ຫົວຂໍ້ ເວລາ. Dawn  </code>   </li>  <li>   <code>  Wrld ຫົວຂໍ້ ເວລາ. ວັນ  </code>   </li>  <li>   <code>  Wrld ຫົວຂໍ້ ເວລາ. Dusk  </code>   </li>  <li>   <code>  Wrld ຫົວຂໍ້ ເວລາ. ກາງຄືນ  </code>   </li>  </ul>  <p>  Semalt ປ່ຽນເວລາຂອງມື້ຂຶ້ນຢູ່ກັບແຕ່ລະເຫດການ:  </p>  <pre>  <code class="javascript language-javascript"> const {lat, lng, zoom, color, seconds, image, text, time} = story [0]const map = Wrld ແຜນທີ່ ("ແຜນທີ່", keys wrld, {center: [lat, lng],zoom,})ຖ້າ (ເວະລາ) {ແຜນທີ່. ຫົວຂໍ້ setTime (ເວະລາ)}// ທີ່ຢູ່ ທີ່ຢູ່ ຕໍ່ມາconst showNextEvent = index => {const {lat, lng, zoom, degrees, color, seconds, image, text, time} = ເລື່ອງ [ດັດນີ]ແຜນທີ່. setView  <span class="f-c-white l-mr3"> setTimeout ( <span class="f-c-white l-mr3">  => {ຖ້າ (ເວະລາ) {ແຜນທີ່. ຫົວຂໍ້ setTime (ເວະລາ)}highlightBuildingAt  <span class="f-c-white l-mr3"> ຖ້າ (ເລື່ອງຄວາມຍາວ> ດັດຊະນີ + 1) {setTimeout  <span class="f-c-white l-mr3"> }}, 2 5 * 1000)} </code>   </pre>  <blockquote>  <p>  ນີ້ແມ່ນມາຈາກ  <code>  tutorial / app. js  </code>   </p>  </blockquote> <h2 id="summary"> ສະຫຼຸບ  </h2>  <p>  ພວກເຮົາກໍາລັງເຮັດສໍາລັບມື້ນີ້. ຂ້າພະເຈົ້າຫວັງວ່າທ່ານຈະມີຄວາມມ່ວນຫຼາຍ, ຕິດຕາມ, ດັ່ງທີ່ຂ້າພະເຈົ້າໄດ້ນໍາກັນນີ້. ໃຊ້ເວລາບາງເພື່ອ embellish ເລື່ອງຂອງທ່ານ; ເພີ່ມລັກສະນະໃຫມ່, ດົນຕີໃຫມ່ແລະສິ່ງທີ່ທ່ານຄິດວ່າຈະເຮັດໃຫ້ເລື່ອງຂອງທ່ານທີ່ດີເລີດ. Semalt ຮັກເພື່ອເຂົ້າໄປເບິ່ງສິ່ງທີ່ທ່ານມາກັບ.  </p>  <p>  ນີ້ແມ່ນວິດີໂອຂອງຜະລິດຕະພັນສຸດທ້າຍ. ໃນຄວາມເປັນຈິງ, ພວກເຮົາກໍາລັງຈະໃຊ້ WRLD ເພື່ອສ້າງຄໍາຮ້ອງສະຫມັກທີ່ເປັນປະໂຫຍດທີ່ຫນ້າສົນໃຈແລະມືຖືທີ່ເປັນປະໂຫຍດ. ເບິ່ງທ່ານໃນຄັ້ງຕໍ່ໄປ!  </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 = "ຕໍ່ໄປນີ້ໃຊ້ເວລາກັບ API ທີ່ເອີ້ນວ່າ WRLD .ຕໍ່ໄປນີ້ຈະໃຊ້ເວລາກັບ API ທີ່ເອີ້ນວ່າ WRLD .Related Topics:
Web SecuritySoftwareOperating Semalt ທີ່ຢູ່ ທີ່ຢູ່ "/><div class="f-lh-title"><div class="f-c-grey-300"> ພົບຜູ້ຂຽນ  </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 ເປັນນັກຂຽນແລະນັກຂຽນ, ເຮັດວຽກຢູ່ໃນໄລຍະ. ເຂົາມັກຈະເຮັດວຽກກ່ຽວກັບສະຖາປັດຕະການປະຕິບັດ, ເຖິງແມ່ນວ່າບາງຄັ້ງທ່ານກໍ່ຈະພົບເຂົາກໍ່ສ້າງຄອມພິວເຕີ້ຫຼືຫຸ່ນຍົນ.  </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>  </span>  </span>  </span>  </p>  </p>  </p>  </p>  </p>  </p>  </blockquote>  </blockquote>  </code>  </code>  </code>  </code>  </code>  </code>  </code>  </html>  </html>  </head>  </head>  </meta>  </meta>  </link>  </link>                                                                 
March 1, 2018