หน้านี้มีข้อมูลเกี่ยวกับฟีเจอร์หลักในแผนที่ 3 มิติที่เหมือนภาพถ่ายใน Maps JavaScript ซึ่งช่วยให้คุณสร้างประสบการณ์ 3 มิติแบบอินเทอร์แอกทีฟและสมจริงได้ เอกสารประกอบต่อไปนี้ครอบคลุมถึง
- การจัดการเหตุการณ์อินเทอร์เฟซผู้ใช้เพื่อการโต้ตอบที่ราบรื่น
- รวมถึงการควบคุมการสำรวจเพื่อไปยังส่วนต่างๆ ของพื้นที่ 3 มิติ
- การใช้เส้นทางกล้องที่กำหนดไว้ล่วงหน้าสำหรับทัวร์ชมพร้อมไกด์
- การใช้ข้อจำกัดของกล้องเพื่อรักษาโฟกัสไว้ที่บริเวณที่ต้องการ
เหตุการณ์อินเทอร์เฟซผู้ใช้
ส่วนนี้จะอธิบายเหตุการณ์แบบอินเทอร์แอกทีฟและการแจ้งเตือนการเปลี่ยนแปลงสถานะที่คุณรับฟังและจัดการแบบเป็นโปรแกรมได้เมื่อทำงานกับแผนที่ 3 มิติ JavaScript ในเบราว์เซอร์จะทำงานแบบอิงตามเหตุการณ์ ซึ่งหมายความว่าจะตอบสนองต่อการโต้ตอบของผู้ใช้ด้วยการสร้างเหตุการณ์ที่โปรแกรมสามารถรับฟังและเรียกใช้โค้ดตามความเหมาะสม
เหตุการณ์หลักๆ มี 2 ประเภท ได้แก่
- ระบบจะส่งเหตุการณ์การโต้ตอบของผู้ใช้ (เช่น การคลิกเมาส์) จากวิวพอร์ตแผนที่ 3 มิติไปยังโค้ดของคุณ เหตุการณ์เหล่านี้ช่วยให้คุณตอบสนองต่อการกระทำโดยตรงของผู้ใช้ภายในสภาพแวดล้อมแผนที่ 3 มิติได้ ดูตัวอย่าง
- การแจ้งเตือนการเปลี่ยนแปลงสถานะแสดงการอัปเดตโมเดลข้อมูลแผนที่ 3 มิติพื้นฐานและสถานะการแสดงผล โดยใช้
property_changedรูปแบบการตั้งชื่อแบบดั้งเดิม
ออบเจ็กต์การแมป 3 มิติ API แต่ละรายการจะแสดงชุดเหตุการณ์ที่มีชื่อซึ่งโปรแกรมสามารถลงทะเบียนโปรแกรมรับฟังเหตุการณ์และดำเนินการตามตรรกะเมื่อเหตุการณ์เหล่านั้นเกิดขึ้นได้โดยใช้ฟังก์ชัน addEventListener() ในตัว ตัวอย่างต่อไปนี้แสดงเหตุการณ์ทั่วไปที่ทริกเกอร์เมื่อผู้ใช้โต้ตอบกับแผนที่ 3 มิติ
ตัวอย่างต่อไปนี้แสดงเหตุการณ์ที่ทริกเกอร์เมื่อผู้ใช้โต้ตอบกับแผนที่
การควบคุมการสํารวจ
แผนที่ที่แสดงในแผนที่ 3 มิติที่เหมือนภาพถ่ายใน Maps JavaScript API มีองค์ประกอบ UI ที่รองรับการโต้ตอบของผู้ใช้กับแผนที่ องค์ประกอบเหล่านี้เรียกว่าการควบคุมของผู้ใช้ การควบคุมการสํารวจจะรวมอยู่ด้วยโดยค่าเริ่มต้น แต่คุณเลือกที่จะระงับการควบคุมเหล่านี้ได้ในแอปพลิเคชัน
รูปภาพต่อไปนี้แสดงการควบคุมเริ่มต้นที่แสดงโดยแผนที่ 3 มิติที่เหมือนภาพถ่ายจริงใน Maps JavaScript
ด้านล่างนี้คือรายการการควบคุมทั้งหมดในแผนที่ 3 มิติที่เหมือนภาพถ่ายใน Maps JavaScript
- ตัวควบคุมการซูมจะแสดงปุ่ม "+" และ "-" สำหรับเปลี่ยนระดับการซูมของแผนที่
- การควบคุมการเอียงช่วยให้คุณเปลี่ยนการเอียงของกล้องได้
- การควบคุมการหมุนช่วยให้คุณเปลี่ยนทิศทางของกล้องได้
- ตัวควบคุมการย้ายจะแสดงปุ่ม "←", "→", "↑" และ "↓" สำหรับเปลี่ยนจุดศูนย์กลางของแผนที่
การควบคุมกล้องและภาพเคลื่อนไหว
เส้นทางกล้องที่กำหนดล่วงหน้า
แผนที่ 3 มิติที่เหมือนจริงใน Maps JavaScript มีเส้นทางของกล้องที่กำหนดล่วงหน้า 2 เส้นทาง คุณปรับแต่งเส้นทางของกล้องได้โดยการเปลี่ยนระยะเวลาของภาพเคลื่อนไหว (ซึ่งจะเพิ่มหรือลดความเร็ว) หรือจะรวมเส้นทางเข้าด้วยกันเพื่อสร้างประสบการณ์ที่เหมือนภาพยนตร์มากขึ้นก็ได้
แผนที่ 3 มิติที่เหมือนจริงใน Maps JavaScript รองรับเส้นทางของกล้องต่อไปนี้
- ภาพเคลื่อนไหว
FlyCameraToบินจากศูนย์กลางของแผนที่ไปยังจุดหมายที่ระบุ - ภาพเคลื่อนไหว
FlyCameraAroundหมุนรอบจุดบนแผนที่ตามจำนวนครั้งที่คุณระบุ
คุณอาจรวมเส้นทาง 2 เส้นทางที่มีอยู่เพื่อไปยังจุดที่น่าสนใจ หมุนรอบจุดนั้น แล้วหยุดเมื่อต้องการ
ข้อจํากัดของกล้อง
คุณอาจต้องควบคุมการแพนกล้อง ความสูงสูงสุด หรือสร้างขอบเขตละติจูด/ลองจิจูดที่จำกัดการเคลื่อนไหวของผู้ใช้ในแผนที่หนึ่งๆ ซึ่งทำได้โดยใช้ข้อจำกัดของกล้อง
ดูตัวอย่างวิธีการทำงานของข้อจำกัดกล้องและวิธีติดตั้งใช้งานได้ที่การสาธิต