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

รูปภาพ

ภาพรวม

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

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

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

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

  • สร้างแรงบันดาลใจในการพัฒนาโดยใช้ความสามารถแบบ 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 ชิ้นส่วนแผนที่เป็นโมเดล Mesh แบบ 3 มิติของอาคารและภูมิประเทศ

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

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

ดูว่าการ์ด 3 มิติแบบภาพเสมือนจริงสามารถ ใช้งานตัวแสดงผลการ์ด 3 มิติ

องค์ประกอบสำคัญ

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

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

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

รูปภาพ

การตรวจสอบแต่ละแอปเพิ่มเติมจะเป็นประโยชน์อย่างยิ่ง

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

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

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

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

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

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

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

แอปเดโม

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

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

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

รูปภาพ

คุณลักษณะสำคัญบางประการของแอปพลิเคชัน ได้แก่:

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

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

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

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

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

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

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

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

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

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

รูปภาพ

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

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

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

Google Maps Platform - API การ์ด 3 มิติ:

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

Google Maps Platform - Places API:

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

Google Maps Platform - API เติมข้อความอัตโนมัติ:

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

CesiumJS:

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

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

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

บทสรุป

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

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

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

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