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

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

ตัวอย่างการค้นหาสถานที่และการค้นหาเส้นทาง

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

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

โหลดแผนที่

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

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

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

// 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 มิติเสริมในโหมด SATELLITE ให้ผู้ใช้เห็นภาพสถานที่ที่ต้องการขณะโหลดก็ได้

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

ประสิทธิภาพและการจัดการองค์ประกอบที่มองเห็น

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

เครื่องหมาย

สถานการณ์ตัวอย่าง: ใช้เวลา 150-300 มิลลิวินาทีในการโหลดตัวทำเครื่องหมาย 300 รายการที่มีรูปอักขระเครื่องหมาย SVG 41 แบบ (แล็ปท็อปรุ่นใหม่: macOS M3 Pro, Chrome)

• ตัวเลือกการปรับแต่งที่เหมาะสมที่สุด:
  • 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;) มีประสิทธิภาพมากกว่าการอัปเดตแบบวนซ้ำหลายครั้ง
• หลีกเลี่ยงเส้นหลายเส้นที่ยื่นออกมา (หากเป็นไปได้): แม้ว่าเส้นหลายเส้นจะใช้ ค่าความสูงเพื่อวางในพื้นที่ 3 มิติได้ แต่การยื่นเส้นหลายเส้นออกมา (เช่น การกำหนด ความกว้างของเส้นขีดและช่วงความสูงขนาดใหญ่) อาจต้องใช้ทรัพยากรในการแสดงผลกราฟิกจำนวนมาก ใช้เส้นหลายเส้น 2 มิติบนพื้น (RELATIVE_TO_GROUND) หรือความกว้างของเส้นขีดน้อยที่สุดเมื่อเป็นไปได้ เพื่อประสิทธิภาพที่ดีขึ้น
• ใช้ drawsOccludedSegments สำหรับองค์ประกอบการกำหนดเส้นทางที่สำคัญเท่านั้น สำหรับรูปร่างพื้นหลังหรือรูปร่างตามบริบท ให้ระบบบดบังรูปร่างเหล่านั้นตามธรรมชาติด้วยรูปทรงเรขาคณิต 3 มิติของแผนที่ การแสดงรูปทรงเรขาคณิตที่ซ่อนอยู่ซึ่งไม่สำคัญจะเพิ่มความซับซ้อนในการแสดงผลโดยไม่จำเป็น

โมเดล 3 มิติ

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

สถานการณ์ตัวอย่าง: ใช้เวลาประมาณ 2 วินาทีในการแสดงโมเดล 3 มิติ แบบเบา (200 KB) 1,000 รายการที่เคลื่อนที่ไปตามเส้นทาง (แล็ปท็อปรุ่นใหม่: macOS M3 Pro, Chrome)

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