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

รูปภาพ

ภาพรวม

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

3D Area Explorer ได้รับการออกแบบมาเพื่อวัตถุประสงค์หลายประการ ดังนี้

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

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

  • สร้างแรงบันดาลใจในการพัฒนาโดยใช้ความสามารถ 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)

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

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

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

รูปภาพ

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

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

โซลูชัน 3D Area Explorer ใช้บริการ 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 Pricing

Google Maps Platform - Autocomplete API

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

CesiumJS

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

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

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

บทสรุป

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

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

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

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