การเริ่มต้นใช้งานเครื่องมือสํารวจพื้นที่ 3 มิติ

รูปภาพ

ภาพรวม

โซลูชันเครื่องมือสำรวจพื้นที่ 3 มิติช่วยให้คุณค้นพบและ สัมผัสประสบการณ์ในสถานที่ต่างๆ ได้ในรูปแบบใหม่ โซลูชันนี้ใช้ประโยชน์จากความสามารถของไทล์ 3 มิติสมจริงของ Google Maps Platform และ Places API เพื่อสร้างสภาพแวดล้อม 3 มิติแบบอินเทอร์แอกทีฟที่น่าสนใจ

โปรแกรมสำรวจพื้นที่ 3 มิติออกแบบมาเพื่อวัตถุประสงค์หลายอย่าง ดังนี้

  • เพิ่มประสิทธิภาพการสำรวจพื้นที่: ผู้ใช้สามารถสำรวจย่านใกล้เคียงแบบเสมือนจริงด้วย รายละเอียดภาพระดับสูง เพื่อรับข้อมูลเชิงลึกเกี่ยวกับฟีเจอร์และ สถานที่สำคัญในท้องถิ่น

  • โปรโมตเรื่องราวตามสถานที่: ความสามารถในการผสานรวมจุดที่น่าสนใจ (Point of Interest) เข้ากับคำอธิบายที่สมบูรณ์ช่วยให้สร้าง ประสบการณ์ที่ขับเคลื่อนด้วยเรื่องราวซึ่งให้ความรู้และแจ้งข้อมูลแก่ผู้ใช้เกี่ยวกับสถานที่ตั้งที่เฉพาะเจาะจง ได้

  • สร้างแรงบันดาลใจในการพัฒนาโดยใช้ความสามารถ 3 มิติของ Google Maps: แสดงให้เห็นถึงศักยภาพของข้อมูลการทำแผนที่ 3 มิติของ Google ในการสร้างแผนที่แบบอินเทอร์แอกทีฟที่สมจริง

เริ่มต้นใช้งาน

เปิดใช้

เทคโนโลยีหลัก

โซลูชันนี้สร้างขึ้นโดยใช้เทคโนโลยีหลัก 2 อย่าง ได้แก่

Google Maps Platform API:

เราใช้ API หลายรายการจาก Google Maps Platform เพื่อรับแผนที่ฐานและข้อมูล เพื่อสร้างประสบการณ์นี้

  • ชิ้นส่วนแผนที่ 3 มิติแบบสมจริงของ Google Maps: โมเดล 3 มิติความละเอียดสูงของอาคารและภูมิประเทศช่วยให้เห็นภาพสภาพแวดล้อมในเมืองได้อย่างสมจริงและน่าสนใจ
  • Places API: แอปสามารถระบุและแสดงข้อมูลโดยละเอียดเกี่ยวกับจุดที่น่าสนใจ (POI) ภายในพื้นที่ที่สำรวจ ซึ่งจะช่วยเพิ่มประสบการณ์ของผู้ใช้ด้วยความรู้ในท้องถิ่น
  • การเติมข้อความอัตโนมัติ ช่วยให้ผู้ใช้ค้นหาสถานที่หรือพื้นที่ที่เฉพาะเจาะจง ซึ่งเป็นที่สนใจ

CesiumJS

CesiumJS มีหน้าที่ในการแสดงผลและแสดงลูกโลก 3 มิติความละเอียดสูง โดยจะจัดการการโหลดและการแสดงภาพของกระเบื้อง 3 มิติสมจริงของ Google ซึ่งมีโมเดลตาข่าย 3 มิติของอาคารและภูมิประเทศ

การจัดการกล้อง: CesiumJS มีเครื่องมือในการควบคุมตำแหน่ง การวางแนว และการเคลื่อนไหวของกล้อง ซึ่งรวมถึงเนื้อหาต่อไปนี้

  • การตั้งค่ามุมมองเริ่มต้นให้โฟกัสที่ย่านที่ระบุเมื่อโหลดแอป
  • การใช้การเคลื่อนไหวของกล้องแบบไดนามิก เช่น ภาพเคลื่อนไหววงโคจรอัตโนมัติ สำหรับการสำรวจ
  • การจัดการการโต้ตอบของผู้ใช้กับลูกโลกหากมีฟีเจอร์ดังกล่าว (การเลื่อน การซูม การหมุน)

ดูวิธีที่ชิ้นส่วนแผนที่ 3 มิติแบบสมจริงสามารถ ทำงานร่วมกับโปรแกรมแสดงผลชิ้นส่วนแผนที่ 3 มิติ

คอมโพเนนต์หลัก

แอปพลิเคชันแบ่งออกเป็น 2 แอปที่แตกต่างกัน ได้แก่

  • แอปผู้ดูแลระบบ
  • แอปเดโม

แผนภาพนี้แสดงภาพรวมของความแตกต่างและความสัมพันธ์ระหว่าง แอปพลิเคชันทั้ง 2 รายการ

รูปภาพ

คุณควรตรวจสอบแต่ละแอปเพิ่มเติม

แอปผู้ดูแลระบบ

แอปพลิเคชันนี้มีอินเทอร์เฟซที่ใช้งานง่ายซึ่งช่วยให้คุณปรับแต่ง ประสบการณ์ 3 มิติได้

  • การค้นหาสถานที่ : ใช้แถบค้นหาการเติมข้อความอัตโนมัติของ Google Maps Platform แบบผสานรวม เพื่อค้นหาพื้นที่ที่ต้องการแสดง เมื่อเลือก ตำแหน่งแล้ว กล้องจะบินไปยังพื้นที่นั้นโดยอัตโนมัติ

  • กล้อง: ปรับความเร็วการเคลื่อนที่ของกล้องและประเภทวงโคจรเพื่อสร้าง ประสบการณ์การรับชมที่เลือก

  • สถานที่ (POI): กำหนดความหนาแน่น รัศมีการค้นหา และประเภทจุดที่น่าสนใจ (เช่น ร้านอาหาร คาเฟ่ สถานที่สำคัญ) ที่คุณต้องการแสดง

ใช้แอปนี้เพื่อปรับแต่งประสบการณ์การใช้งานสำหรับผู้ใช้ปลายทาง

มีคำอธิบายโดยละเอียดของการปรับแต่งทั้งหมด การปรับแต่ง 3D Area Explorer

แอปเดโม

นี่คือแอปพลิเคชันสุดท้ายที่ผู้ใช้จะเห็น ซึ่งจะโหลดการกำหนดค่าที่คุณสร้างไว้ในแอปผู้ดูแลระบบ ในสภาพแวดล้อม 3 มิติที่สมจริงนี้ ผู้ใช้จะสามารถสำรวจพื้นที่ที่เลือกและค้นพบสถานที่ที่คุณไฮไลต์ไว้

เมื่อปรับแต่งรูปลักษณ์และความรู้สึกโดยใช้แอปผู้ดูแลระบบแล้ว คุณจะ ดาวน์โหลดการกำหนดค่าและเรียกใช้แอปพลิเคชันที่กำหนดเองจากซอร์สโค้ดได้

ประสบการณ์ของผู้ใช้

รูปภาพ

ฟีเจอร์หลักบางส่วนของแอปพลิเคชันมีดังนี้

  1. ผู้ใช้สามารถสำรวจพื้นที่แบบ 3 มิติได้แบบอินเทอร์แอกทีฟ ซึ่งรวมถึงอาคาร สถานที่สำคัญ และภูมิประเทศ
  2. ผู้ใช้สามารถค้นหาและสำรวจสถานที่ใกล้เคียง (เช่น พิพิธภัณฑ์ สวนสาธารณะ ร้านอาหาร)

  3. เมื่อเลือกสถานที่แล้ว ผู้ใช้จะดูข้อมูลหรือเรื่องราวโดยละเอียด ที่เกี่ยวข้องกับสถานที่นั้นได้

  4. นักพัฒนาแอปสามารถปรับเปลี่ยนประสบการณ์การสำรวจของตนเองผ่านการตั้งค่าและ การควบคุม (หากใช้แอปผู้ดูแลระบบ)

  5. เปิดใช้การหมุนอัตโนมัติเพื่อให้กล้องหมุนรอบ กึ่งกลางของพื้นที่ที่เลือกโดยอัตโนมัติ

ข้อกำหนดเบื้องต้น

  1. คีย์ API ของ Google Maps: คุณจะต้องมีคีย์ API ที่ถูกต้องซึ่งเปิดใช้ API ต่อไปนี้

  2. เว็บเซิร์ฟเวอร์: คุณสามารถแสดงแอปพลิเคชันจากที่ใดที่หนึ่งต่อไปนี้

    • เว็บเซิร์ฟเวอร์ภายใน (เช่น ใช้ Node.js, http-server)
    • บริการเว็บโฮสติ้งแบบคงที่ (แอปพลิเคชันมาพร้อมกับ Dockerfile)

คุณดูคำอธิบายโดยละเอียดเกี่ยวกับตัวเลือกการติดตั้งใช้งานได้ในส่วน README ของโปรเจ็กต์ GitHub

การทำให้ใช้งานได้

คุณสามารถนำแอปไปใช้งานเป็นแอปพลิเคชันโหนดหรือคอนเทนเนอร์ Docker ในสภาพแวดล้อมคอนเทนเนอร์ใดก็ได้ เช่น GKE หรือ GAE เดโมที่โฮสต์ใช้สถาปัตยกรรมต่อไปนี้

รูปภาพ

  • ในสถาปัตยกรรมนี้ โค้ดจะอยู่ในโปรเจ็กต์ GitHub
  • Cloud Build จะเลือกโค้ดเมื่อมีการพุชไปยัง main และทริกเกอร์การดำเนินการบิลด์
  • ในขั้นตอนการสร้าง ระบบจะแทรกคีย์ API และสร้างอิมเมจ จากนั้น จัดเก็บไว้ใน Artifact Registry
  • สุดท้ายก็ติดตั้งใช้งานอิมเมจเสถียรล่าสุดจาก Artifact Registry ไปยัง Cloud Run
  • นอกจากนี้ เรายังมีการตรวจสอบประสิทธิภาพการทำงานและการตรวจสอบบางอย่างที่ทำงานอยู่เพื่อตรวจสอบประสิทธิภาพการทำงาน ของแอปที่ติดตั้งใช้งาน

ข้อมูลสำหรับการเรียกเก็บเงิน

โซลูชันสำรวจพื้นที่ 3 มิติใช้บริการ Google Maps Platform เพื่อมอบประสบการณ์แบบ สมจริงและไดนามิก API บางรายการอาจมีค่าใช้จ่าย ต่อไปนี้คือภาพรวม ของ API และลิงก์ไปยังราคา

Google Maps Platform - 3D Tiles API:

โซลูชันการเล่าเรื่องใช้ 3D Tiles API เพื่อปรับปรุงประสบการณ์การมองเห็น ด้วยข้อมูลเชิงพื้นที่ ดูรายละเอียดราคาที่เกี่ยวข้องกับ 3D Tiles API ได้ที่ Google Maps Platform - 3D Tiles API Pricing

Google Maps Platform - Places API:

เราใช้ Places API สำหรับข้อมูลตามตำแหน่ง เพื่อเพิ่มข้อมูลที่สมบูรณ์ให้กับ ประสบการณ์การเล่าเรื่อง หากต้องการทราบค่าใช้จ่ายที่เกี่ยวข้องกับ Google Places API โปรดไปที่ Google Maps Platform - การกำหนดราคาของ Places API

Google Maps Platform - Autocomplete API:

ฟีเจอร์การเติมข้อความอัตโนมัติช่วยเพิ่มการโต้ตอบของผู้ใช้ โปรดดูรายละเอียดราคา เกี่ยวกับ Google Maps Autocomplete API ที่ Google Maps Platform - การกำหนดราคาของ Places Autocomplete

CesiumJS:

CesiumJS ใช้สำหรับการแสดงภาพลูกโลก 3 มิติ แม้ว่า CesiumJS จะเป็นโอเพนซอร์ส แต่ฟีเจอร์หรือบริการเพิ่มเติมอาจมีค่าใช้จ่ายที่เกี่ยวข้อง โปรดดูข้อเสนอพรีเมียมในเอกสารประกอบของ CesiumJS

คุณควรตรวจสอบรายละเอียดราคาของ API แต่ละรายการ เนื่องจากระบบจะกำหนดค่าใช้จ่ายแยกกันตามการใช้งาน โปรดทราบว่า Google Maps Platform มี Free Tier ที่ให้ใช้งานได้ในปริมาณหนึ่งโดยไม่มีค่าใช้จ่าย และรายละเอียดราคา อาจแตกต่างกันไปโดยขึ้นอยู่กับปัจจัยต่างๆ เช่น จำนวนคำขอและภูมิภาคการใช้งาน

โปรดดูหน้าการกำหนดราคาอย่างเป็นทางการเสมอเพื่อดูข้อมูลล่าสุดและถูกต้องที่สุดเกี่ยวกับค่าใช้จ่ายในการใช้งาน Google Maps Platform และ CesiumJS ตรวจสอบว่าคุณปฏิบัติตามข้อกำหนดและเงื่อนไขที่ระบุไว้ในบริการเหล่านี้เพื่อจัดการและทำความเข้าใจค่าใช้จ่ายที่เกี่ยวข้องอย่างมีประสิทธิภาพ

บทสรุป

เอกสารนี้จะให้ภาพรวมของความสามารถ คอมโพเนนต์ ประสบการณ์ของผู้ใช้ และข้อกำหนดทางเทคนิคของเครื่องมือสำรวจพื้นที่ 3 มิติ

การใช้ประโยชน์จากไทล์ 3 มิติแบบสมจริงและ Places API ของ Google ทำให้สามารถ สำรวจย่านใกล้เคียงแบบเสมือนจริง ค้นพบจุดที่น่าสนใจ และ เรียนรู้เกี่ยวกับประวัติศาสตร์ท้องถิ่น

ไม่ว่าจะแสดงพื้นที่ เพิ่มการสำรวจ หรือโปรโมตการเล่าเรื่องแบบดิจิทัล 3D Area Explorer ก็เป็นแพลตฟอร์มที่สวยงามตระการตา

ลองใช้เดโมและปรับแต่งโดยใช้แอปผู้ดูแลระบบเพื่อสร้างประสบการณ์ 3 มิติที่น่าสนใจและ ให้ข้อมูล