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

แนวทางปฏิบัติแนะนำสำหรับแผนที่ 3 มิติ

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

ตัวอย่างกรณีการใช้งานสำหรับการค้นหาสถานที่และการค้นหาเส้นทาง — ตัวอย่างการค้นหาสถานที่และการค้นหาเส้นทาง

ข้อควรพิจารณาเกี่ยวกับประสิทธิภาพ

โปรดพิจารณาวิธีการต่อไปนี้เพื่อให้มั่นใจว่าการโต้ตอบและองค์ประกอบภาพจะราบรื่นและตอบสนองได้ดี

โหลดแผนที่

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

การโหลด API: ใช้การโหลดแบบไดนามิกแบบไม่พร้อมกันของแผนที่ 3 มิติ เพื่อโหลด Maps JavaScript API เมื่อโหลดหน้าเว็บครั้งแรก
ไลบรารี: โหลดไลบรารีแบบเป็นโปรแกรมเมื่อจำเป็น เช่น google.maps.importLibrary("maps3d") หรือหากคุณใช้คอมโพเนนต์เว็บ เช่น <gmp-map-3d> ในหน้า HTML โดยตรงด้วยการโหลดสคริปต์โดยตรง ไลบรารีจะโหลดโดยอัตโนมัติในเวลาที่เหมาะสม
จัดการฟีเจอร์แผนที่ฐาน: ใช้ mapId ที่กำหนดเองเพื่อกรองจุดที่น่าสนใจของแผนที่ฐาน (โหมด HYBRID) และควบคุมความหนาแน่น โดยเฉพาะอย่างยิ่งหากแอปพลิเคชันมี ชุดองค์ประกอบที่กำหนดเอง เช่น เครื่องหมายหรือเส้นหลายเส้น ซึ่งจะช่วยป้องกัน ความรกของภาพและการทับซ้อนที่อาจเกิดขึ้น หรือจะปิดใช้ฟีเจอร์ไทล์เวกเตอร์ของแผนที่ฐาน เช่น จุดที่น่าสนใจ เส้นหลายเหลี่ยมของถนน ชื่อถนน ชื่อถนน (โหมดดาวเทียม) ก็ได้
เหตุการณ์: ฟังเหตุการณ์ gmp-steadystate หรือ gmp-error เพื่อสร้างตรรกะที่ตามมา เช่น การโหลดเครื่องหมาย การเคลื่อนไหวของ กล้อง

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

การโต้ตอบของผู้ใช้: รอเหตุการณ์ gmp-steadystate ก่อนที่จะทำการเปลี่ยนแปลงเนื้อหาของแผนที่ หากผู้ใช้เริ่มโต้ตอบ (เลื่อน ซูม) กับแผนที่ก่อนเหตุการณ์ gmp-steadystate เริ่มต้น เหตุการณ์จะทริกเกอร์หลังจากที่ผู้ใช้หยุดโต้ตอบเท่านั้น หลีกเลี่ยงการแสดงหรืออัปเดตเนื้อหาซ้อนทับ (เช่น เครื่องหมายหรือรูปหลายเหลี่ยม) ขณะที่ผู้ใช้เลื่อนหรือซูมแผนที่ หลีกเลี่ยงการแสดงหรืออัปเดตเนื้อหาซ้อนทับ (เช่น เครื่องหมายหรือรูปหลายเหลี่ยม) โดยการฟัง gmp-centerchange, gmp-headingchange gmp-rangechange gmp-rollchange gmp-tiltchange
ใช้ requestAnimationFrame() (rAF) เพื่ออัปเดตอย่างต่อเนื่องและ แยกการคำนวณที่ซับซ้อนออกจากคำสั่งวาดอย่างเคร่งครัด
- ใช้ rAF: ซิงค์การอัปเดตกับอัตราการแสดงผลของเบราว์เซอร์เพื่อให้ ภาพเคลื่อนไหว 60FPS ราบรื่นและลดการใช้พลังงาน
- หลีกเลี่ยงการทำงานที่ต้องใช้การวาดภาพอย่างหนัก: อย่าทำงานหนักที่ไม่ใช่การวาดภาพในระหว่างการอัปเดตขั้นสุดท้าย
- ตรรกะแยก: ดำเนินการตรรกะที่ซับซ้อนทั้งหมดก่อนการเรียกการอัปเดตคอมโพเนนต์เว็บแบบมินิมอล ภายในลูป rAF
การตั้งค่าฉากเริ่มต้น: <gmp-map-3d> การตั้งค่ากล้อง เช่น การเอียง จะ ส่งผลต่อความเร็วในการโหลด ยิ่งซูมหรือเอียงฉากมากเท่าใด ระบบก็จะแสดงรูปหลายเหลี่ยมที่มีรายละเอียดมากขึ้นเท่านั้น และต้องโหลด ระดับรายละเอียด จะขึ้นอยู่กับสถานที่ด้วย (เช่น เมืองที่มีอาคารจำนวนมากเทียบกับ ชนบทที่มีเพียงลักษณะทางธรรมชาติ)
- ต้องการมุมมองที่ซูมน้อยลง (ระดับความสูงสูง) มุมมองที่เอียงเล็กน้อยหรือไม่เอียง
- เพิ่มขอบเขต (ตัวอย่าง) ลงในแผนที่เพื่อให้ผู้ใช้มุ่งเน้นไปที่พื้นที่ใดพื้นที่หนึ่งและโหลดไทล์ ได้อย่างเต็มที่
ภาพของตัวโหลดล่วงหน้า: แม้ว่า <gmp-map-3d> จะโหลดเร็วมาก แต่อาจใช้เวลาสักครู่ในการแสดงผลที่ความละเอียดเต็มสำหรับผู้ใช้ที่มีอุปกรณ์ระดับล่าง (GPU ต่ำ) หรือแบนด์วิดท์ต่ำ (4G ช้า) ในกรณีนี้ คุณสามารถสร้างตัวโหลดล่วงหน้าด้วย รูปภาพ ภาพเคลื่อนไหว หรือข้อความพร้อมฉาก 3 มิติที่โหลดในพื้นหลัง ดู เหตุการณ์สําคัญที่จะใช้ด้านล่าง

ตัวอย่างตัวโหลดล่วงหน้า — ตัวอย่าง Preloader

// create the map in the background and wait for gmp-steadystate event
async function initMap() {
    await google.maps.importLibrary("maps3d");
    const map = document.querySelector('gmp-map-3d');
    const div = document.querySelector('div'); // preloader "
    map.addEventListener('gmp-steadystate', ({isSteady}) => {
        if (isSteady) {
            div.style.display = 'none';
        }
    });
}
initMap();

แผนที่ 2 มิติ:
- ระบบจะแสดงแผนที่ 2 มิติทางเลือก (SATELLITE) แก่ผู้ใช้เหล่านี้พร้อมกับข้อมูลทางภูมิศาสตร์ เช่น เครื่องหมาย

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

ประสิทธิภาพและการจัดการองค์ประกอบภาพ

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

เครื่องหมาย

ตัวเลือกการปรับแต่งที่เหมาะสมที่สุด
- PinElement: หากต้องการเปลี่ยนเครื่องหมายพื้นฐาน (สี ขนาด เส้นขอบ ข้อความ กลีฟ) ให้ใช้องค์ประกอบ <gmp-pin> หรือคลาส PinElement ซึ่งเป็น วิธีการปรับแต่งที่มีประสิทธิภาพมากที่สุด
- ใช้เครื่องหมาย HTMLImageElement หรือ SVGElement อย่างประหยัด: ใช้เพื่อการปรับแต่งเพิ่มเติม เช่น การเพิ่มความโปร่งใสหรือการแทรกรูปภาพ เช่น ไอคอน ลงใน SVGElement (ต้องใช้การเข้ารหัส base64) โดยจะ แปลงเป็นรูปภาพเมื่อโหลดและทำให้เกิดโอเวอร์เฮดด้านประสิทธิภาพ ต้องห่อ HTMLImageElement และ SVGElement ในองค์ประกอบ <template> ก่อนที่จะกำหนด ให้กับช่องเริ่มต้นของ Marker3DElement
- ขณะนี้ยังไม่พร้อมให้เพิ่ม HTML หรือ CSS ธรรมดา
จัดการลักษณะการทำงานเมื่อเกิดการทับซ้อน: ใช้ประโยชน์จากพร็อพเพอร์ตี้ collisionBehavior ของเครื่องหมาย สําหรับเครื่องหมายสําคัญที่ต้องมองเห็นอยู่เสมอ ให้ตั้งค่าลักษณะการทํางาน ตามนั้น สำหรับเครื่องหมายที่มีความสำคัญน้อยกว่า ให้ซ่อนเครื่องหมายเหล่านั้นเพื่อรักษา ประสบการณ์การใช้งานแผนที่ที่สะอาดและไม่รก โดยเฉพาะที่ระดับการซูมสูง
POI ที่สำคัญเท่านั้น: ใช้ drawsWhenOccluded (หรือตั้งค่าพร็อพเพอร์ตี้แบบเป็นโปรแกรม) สำหรับเครื่องหมายที่ต้องมองเห็น ผ่านอาคารหรือภูมิประเทศ (เช่น เป้าหมายการช่วยเหลือ สายสาธารณูปโภคที่ฝังอยู่ หรืออวตารของผู้ใช้) เท่านั้น
ทดสอบการบดบัง: เนื่องจากแผนที่เป็นแบบ 3 มิติ เครื่องหมายจึงอาจถูกบดบังด้วยสายตา (ถูกบดบัง) โดยอาคารหรือภูมิประเทศ (ถูกบดบัง) โดยอาคารหรือภูมิประเทศ ทดสอบมุมกล้องและความสูงของเครื่องหมายต่างๆ เพื่อให้แน่ใจว่าจุดที่น่าสนใจที่สำคัญยังคงมองเห็นได้ หรือใช้ตรรกะเพื่อปรับความสูงและการมองเห็นเมื่อถูกบดบัง
ใช้ประโยชน์จากระดับความสูง: ในแผนที่ 3 มิติ เครื่องหมายควรใช้ตำแหน่งที่มีค่าระดับความสูง สำหรับเครื่องหมายที่เชื่อมโยงกับภูมิประเทศหรืออาคาร ให้ใช้ altitudeMode: 'RELATIVE_TO_GROUND', 'RELATIVE_TO_MESH' หรือการตั้งค่าที่คล้ายกัน เพื่อให้แน่ใจว่าเครื่องหมายยึดอย่างถูกต้องเมื่อเอียงหรือหมุนแผนที่

รูปหลายเหลี่ยมและเส้นหลายส่วน

ตัวอย่างการโหลดรูปหลายเหลี่ยม — สถานการณ์ตัวอย่าง: 100-150 มิลลิวินาทีในการโหลดรูปหลายเหลี่ยม 1,000 รูป (แล็ปท็อปสมัยใหม่: macOS M3 Pro, Chrome)

ลดความซับซ้อนของเรขาคณิต: ก่อนที่จะแสดงผล ให้ใช้อัลกอริทึมการลดความซับซ้อนกับ ข้อมูลเส้นทาง ซึ่งจะช่วยลดจำนวนจุดยอดมุมในขณะที่ยังคงรูปร่างทั่วไปไว้ ทำให้ความเร็วในการแสดงผลเพิ่มขึ้นอย่างมาก โดยเฉพาะสำหรับขอบเขตหรือเส้นทางที่ซับซ้อน
การลดความละเอียดตามระดับการซูม: สำหรับชุดข้อมูลขนาดใหญ่มาก ให้พิจารณาโหลดรูปทรงที่มีรายละเอียดสูงขึ้นเฉพาะเมื่อผู้ใช้ซูมเข้าไปในพื้นที่ ที่ระดับการซูมต่ำ คุณจำเป็นต้องใช้เฉพาะเวอร์ชันที่เรียบง่ายมากของเส้นหลายเส้นหรือรูปหลายเหลี่ยม
คำนวณล่วงหน้าสำหรับรูปหลายเหลี่ยมที่อัดขึ้นรูป: หากรูปหลายเหลี่ยมอัดขึ้นรูป (extruded: true) ข้อมูลเส้นทางจะกำหนดปริมาตร 3 มิติ (ตาข่าย) การประมวลผลรูปหลายเหลี่ยมที่ซับซ้อนและมีจุดยอดสูงต้องใช้การคำนวณที่มีค่าใช้จ่ายสูง ตรวจสอบว่าข้อมูลต้นทางสำหรับรูปหลายเหลี่ยมนั้นเรียบง่ายที่สุด
ทดสอบประสิทธิภาพของเส้นประกอบและรูปหลายเหลี่ยม: เมื่อเพิ่มเส้นประกอบ/รูปหลายเหลี่ยมจำนวนมากหรือมีความซับซ้อน โดยเฉพาะเมื่อมีการอัดขึ้นรูปเป็น 3 มิติ ให้ตรวจสอบว่าองค์ประกอบดังกล่าวไม่ทำให้เฟรมเรตลดลง จำกัดจำนวนจุดยอดหรือใช้อัลกอริทึมการลดความซับซ้อน หากจำเป็น
เมื่ออัปเดตรูปร่าง ให้แก้ไขอาร์เรย์เส้นทางทั้งหมดในการดำเนินการเดียว แทนที่จะวนซ้ำและแก้ไขแต่ละองค์ประกอบ การดำเนินการกำหนดค่าครั้งเดียว (เช่น polyline.path = newPathArray;) มีประสิทธิภาพมากกว่าการอัปเดตแบบวนซ้ำหลายครั้งมาก
หลีกเลี่ยง Polyline ที่มีการอัดขึ้นรูป (หากเป็นไปได้): แม้ว่า Polyline จะใช้ค่า ระดับความสูงเพื่อวางในพื้นที่ 3 มิติได้ แต่การอัดขึ้นรูป Polyline (เช่น การกำหนด ความกว้างของเส้นและการกำหนดช่วงระดับความสูงขนาดใหญ่) อาจทำให้เกิดการประมวลผลกราฟิกอย่างหนัก ใช้เส้นหลายเหลี่ยม 2 มิติบนพื้น (RELATIVE_TO_GROUND) หรือ ความกว้างของเส้นที่น้อยที่สุดเพื่อประสิทธิภาพที่ดีขึ้นทุกครั้งที่เป็นไปได้
ใช้ drawsOccludedSegments สำหรับองค์ประกอบการกำหนดเส้นทางที่สำคัญเท่านั้น สำหรับรูปร่างพื้นหลังหรือรูปร่างตามบริบท ให้ ซ่อนรูปร่างเหล่านั้นตามธรรมชาติด้วยรูปทรงเรขาคณิต 3 มิติของแผนที่ การแสดงรูปทรงเรขาคณิตที่ซ่อนอยู่ซึ่งไม่สำคัญจะเพิ่มความซับซ้อนในการแสดงผลโดยไม่จำเป็น

โมเดล 3 มิติ

การแสดงผลโมเดล 3 มิติ .glb และการโต้ตอบ เช่น เหตุการณ์ gmp-click จะรวดเร็วมาก ใน <gmp-map-3d>

ลดขนาดไฟล์ด้วยการบีบอัด: เพื่อให้โหลดได้อย่างรวดเร็ว โดยเฉพาะในเครือข่ายมือถือ ให้เก็บไฟล์โมเดล .glb ที่ซับซ้อนไว้ไม่เกิน 5 MB (ควรมีขนาดเล็กกว่านั้น) วิธีหลักในการดำเนินการนี้คือการใช้การบีบอัด Draco Compression กับข้อมูลตาข่ายภายในไฟล์ .glb ซึ่งจะช่วยลดขนาดไฟล์ได้อย่างมาก (มักจะลดลงกว่า 50%) โดยที่คุณภาพของภาพลดลงน้อยที่สุด
จุดเริ่มต้นของโมเดลตรงกลาง: ตรวจสอบว่าซอฟต์แวร์การสร้างโมเดล 3 มิติส่งออกโมเดล โดยมีจุดเริ่มต้น (จุด 0, 0, 0) อยู่ตรงกลางที่ฐานของโมเดล ซึ่งจะช่วยให้การวางตำแหน่งและการหมุนบนแผนที่ง่ายขึ้น เพื่อให้มั่นใจว่าโมเดลจะยึด กับพิกัดละติจูดและลองจิจูดได้อย่างถูกต้อง
จัดการ CORS: หากไฟล์โมเดลโฮสต์อยู่ในโดเมนหรือ CDN อื่น ที่ไม่ใช่เว็บแอปพลิเคชัน คุณต้องกำหนดค่าเซิร์ฟเวอร์โฮสติ้งให้รวม ส่วนหัวการแชร์ทรัพยากรข้ามโดเมน (CORS) ที่จำเป็น (เช่น Access-Control-Allow-Origin: * มิฉะนั้นแผนที่จะโหลดโมเดลไม่ได้