เครื่องมือสำรวจพื้นที่ 3 มิติ: คู่มือการปรับแต่ง

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

วิธีการเริ่มต้นใช้งาน

เปิดใช้

ปรับแต่งประสบการณ์การใช้งาน

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

พร้อมปรับแต่งไหม โดยทำดังนี้

ตำแหน่ง

กําหนดจุดเริ่มต้นของประสบการณ์โดยปรับละติจูดและลองจิจูดในไฟล์ config.json

การควบคุมกล้อง

ควบคุมเส้นทางของคุณโดยเลือกประเภทการโคจรของกล้อง ซึ่งได้แก่ เส้นทางวงกลมแบบคลาสสิกหรือคลื่นไซน์ที่น่าสนใจ

  • วงโคจรแบบคงที่

    ซึ่งเป็นวิถีโคจรเป็นวงกลมที่ความสูงคงที่รอบๆ จุดสนใจที่เฉพาะเจาะจง

    ดูการทํางานของวงโคจรคงที่โดยสํารวจสำนักงานของ Google ในซิดนีย์

  • วงโคจรแบบไดนามิก

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

    ดูการโคจรแบบไดนามิกในการใช้งานจริงโดยสำรวจหอไอเฟล

จุดที่น่าสนใจ (POI):

  • ปรับแต่งการสํารวจโดยระบุประเภทสถานที่ที่ต้องการค้นพบ เลือกจากพิพิธภัณฑ์ สวนสาธารณะ โรงเรียน และอื่นๆ โดยใช้อาร์เรย์ types ใน config.json
  • กำหนดจำนวนจุดที่น่าสนใจสูงสุดที่จะแสดงโดยการปรับพารามิเตอร์ density
  • แก้ไข searchRadius (in meters) เพื่อรวมสถานที่น่าสนใจที่ซ่อนอยู่หรือมุ่งเน้นไปที่พื้นที่หนึ่งๆ
  • ตั้งค่าความเร็วที่เลือกไว้สำหรับการเคลื่อนไหวของกล้องด้วยพารามิเตอร์ speed (in revolutions per minute)

โหลดการสํารวจล่วงหน้า: เจาะลึกยิ่งขึ้นด้วยการปรับเปลี่ยน URL

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

การสร้าง URL ที่สมบูรณ์แบบ:

เพียงเพิ่มพารามิเตอร์ที่เฉพาะเจาะจงต่อท้าย URL ของเครื่องมือสํารวจพื้นที่เพื่อตั้งค่าสถานที่ตั้งและการตั้งค่าอื่นๆ ล่วงหน้า เช่น

https://{base-url}/#location.coordinates.lat=40.7424396&location.coordinates.lng=-74.0061439

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

  • location.coordinates.lat: ละติจูดของสถานที่ที่คุณเลือก
  • location.coordinates.lng: ลองจิจูดของสถานที่ที่คุณเลือก
  • poi.types: รายการประเภทจุดที่น่าสนใจที่คั่นด้วยคอมมาเพื่อแสดง
  • poi.density: จำนวนจุดที่น่าสนใจสูงสุดที่เลือก
  • poi.searchRadius: รัศมีในการค้นหาจุดที่น่าสนใจที่อยู่ใกล้เคียง
  • camera.speed: ความเร็วของกล้องในการหมุนรอบ
  • camera.orbitType: ประเภทการโคจรของกล้อง ("fixed-orbit" หรือ "dynamic-orbit")

ประโยชน์ของการปรับเปลี่ยน URL

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

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

การปรับแต่งเพิ่มเติม

ส่วนก่อนหน้านี้อธิบายการปรับที่เข้าถึงได้ผ่าน UI หรือไฟล์การกําหนดค่า อย่างไรก็ตาม ยังมีพารามิเตอร์อื่นๆ ในตัวอีกหลายรายการที่คุณแก้ไขเพื่อปรับแต่งแอปพลิเคชันเพิ่มเติมได้

หากต้องการทําการปรับแต่งขั้นสูงเหล่านี้ คุณจะต้องดูโค้ดในไฟล์ src/utils/cesium.js ซึ่งอยู่ในไดเรกทอรี src คุณเปลี่ยนแปลงตัวแปรต่อไปนี้เพื่อเปลี่ยนรูปลักษณ์ของแอปพลิเคชันได้

ความสูงของกล้อง

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

// Camera height (in meters) above the target when flying to a point.
const CAMERA_HEIGHT = 100;
  • การตั้งค่า: CAMERA_HEIGHT
  • ค่าเริ่มต้น: 100
  • คําอธิบาย: กําหนดความสูงของกล้องเหนือตําแหน่งเป้าหมายเมื่อบินไปยังจุดหนึ่งๆ
  • ค่าตัวอย่าง
    • 50: ภาพระยะใกล้ที่เน้นรายละเอียด
    • 200: มุมมองแบบพาโนรามามากขึ้น

การเอียงกล้อง

การเอียงกล้องเริ่มต้นจะกำหนดโดย BASE_PITCH ใช้ค่าลบสำหรับการเอียงลง และค่าบวกสำหรับการมองขึ้น หากต้องการเพิ่มการเคลื่อนไหวแบบไดนามิกเล็กน้อยในการสํารวจ ให้เปลี่ยน AUTO_ORBIT_PITCH_AMPLITUDE

// Pitch 30 degrees downwards
const BASE_PITCH = -30;
// change the pitch by 10 degrees over time
const AUTO_ORBIT_PITCH_AMPLITUDE = 10;
  • การตั้งค่า: BASE_PITCH และ AUTO_ORBIT_PITCH_AMPLITUDE
  • ค่าเริ่มต้น:
    • BASE_PITCH: -30 (เอียงลง 30 องศา)
    • AUTO_ORBIT_PITCH_AMPLITUDE: 10 (เปลี่ยนระดับความสูง 10 องศาเมื่อเวลาผ่านไป)

คำอธิบาย: ระดับความสูงต่ำของกล้องคือระดับการเอียงของแผนที่ ซึ่งวัดเป็นองศา หรือที่เรียกว่า "การเอียง" การตั้งค่าเหล่านี้จะกำหนดระดับความลาดเอียงเริ่มต้นของกล้องและการปรับระดับความลาดเอียงแบบไดนามิกระหว่างการหมุนอัตโนมัติ

ค่าตัวอย่าง:

  • BASE_PITCH: 0 (ระดับกล้อง)
  • AUTO_ORBIT_PITCH_AMPLITUDE: 0 (ไม่มีการเปลี่ยนแปลงระดับเสียง)

ระยะและระยะการซูมของกล้อง

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

// Distance variation relative to initial range.
const RANGE_AMPLITUDE_RELATIVE = 0.55;

// Determines how much the camera should zoom in or out
const ZOOM_FACTOR = 20;

การตั้งค่า: RANGE_AMPLITUDE_RELATIVE และ ZOOM_FACTOR

ค่าเริ่มต้น

  • RANGE_AMPLITUDE_RELATIVE: 0.55 (ความแปรปรวนของระยะทางสัมพัทธ์)
  • ZOOM_FACTOR: 20 (ปัจจัยการซูมกล้อง)

คำอธิบาย: การตั้งค่าเหล่านี้จะกำหนดช่วงความหลากหลายในระหว่างการเคลื่อนไหวของกล้องและระดับการซูมเพื่อดูภาพให้ใกล้ขึ้น

ค่าตัวอย่าง

  • RANGE_AMPLITUDE_RELATIVE: 1 (รูปแบบเต็มช่วง)
  • ZOOM_FACTOR: 10 (การซูมออก)
// Camera heading (rotation), pitch (tilt), and range (distance) for resetting view.
const CAMERA_OFFSET = {
  heading: 0, // No rotation offset.
  pitch: Cesium.Math.toRadians(BASE_PITCH),
  range: 800, // 800 meters from the center.
};

รีเซ็ตกล้อง

เมื่อผู้ใช้ต้องการรีเซ็ตกล้องกลับไปยังตำแหน่งเดิม ระบบจะใช้ค่า CAMERA_OFFSET การตั้งค่านี้ประกอบด้วยทิศทาง (การหมุน), ระดับ (การเอียง) และระยะ (ระยะห่างจากกล้องถึงจุดศูนย์กลาง)

  • การตั้งค่า: CAMERA_OFFSET
  • ค่าเริ่มต้น:
    • heading: 0 (ไม่มีออฟเซ็ตการหมุน)
    • pitch: Cesium.Math.toRadians(-30) (การเอียงลง 30 องศา)
    • range: 800 (800 เมตรจากศูนย์กลาง)
  • คําอธิบาย: กําหนดทิศทาง การเอียง และระยะของกล้องเพื่อรีเซ็ตมุมมอง
  • ค่าตัวอย่าง
    • heading: 45 (องศา มุมมองตะวันตกเฉียงเหนือ)
    • range: 1,500 เมตร (ไกลจากศูนย์กลาง)

พิกัดเริ่มต้น:

START_COORDINATES จะกำหนดลองจิจูด ละติจูด และความสูงเริ่มต้นของกล้อง พื้นที่นี้จะเริ่มต้นการสํารวจ ดังนั้นให้ตั้งค่าเป็นพื้นที่ที่คุณต้องการให้ผู้ใช้เห็นก่อน

// Default camera start position in longitude, latitude, and altitude.
const START_COORDINATES = {
  longitude: 0,
  latitude: 60,
  height: 15000000, // 15,000 km above the surface
};
  • การตั้งค่า: START_COORDINATES

  • ค่าเริ่มต้น

    • longitude: 0
    • latitude: 60
    • height: 15000000 (15,000 กม. เหนือพื้นผิว)

  • ค่าตัวอย่าง

    • longitude: -122.4934, latitude: 37.7951 (สะพานโกลเด้นเกท)
    • height: 2000 (ตำแหน่งเริ่มต้นที่ใกล้กว่า)

โหลดสถานที่ที่กําหนดไว้ล่วงหน้า

วัตถุ location ใน config.json จะกำหนดจุดกึ่งกลางของพื้นที่ ซึ่งเป็นจุดเริ่มต้นของมุมมองกล้องในโปรแกรมดู Cesiumcoordinates กําหนดละติจูด (lat) และลองจิจูด (lng) ของตําแหน่งที่ต้องการให้กล้องแพนไปยังจุดแรก ปรับค่าเหล่านี้เพื่อตั้งค่ากล้องไปยังตำแหน่งใดก็ได้ทั่วโลก

  {
  "location": {
    "coordinates": { "lat": null, "lng": null }
  },

การกําหนดค่านี้ช่วยให้คุณเริ่มแอปพลิเคชัน 3D Place Navigator ได้โดยซูมเข้าที่ตําแหน่งที่ต้องการ คุณสามารถใช้เครื่องมือการแปลงที่อยู่เป็นพิกัดภูมิศาสตร์ของ Google เพื่อรับพิกัดละติจูดและลองจิจูดของที่อยู่หรือชื่อสถานที่โดยระบุไว้ในออบเจ็กต์สถานที่ ดังนี้

  1. เข้าถึงเครื่องมือการแปลงที่อยู่เป็นพิกัดภูมิศาสตร์
  2. สร้างคำขอการแปลงพิกัดภูมิศาสตร์ คลิกส่วน "ลองใช้ด้วยตนเอง" แล้วป้อนสถานที่ที่เลือกในช่อง "ที่อยู่" คุณสามารถระบุที่อยู่ ชื่อสถานที่ หรือแม้แต่จุดสังเกตได้
  3. สร้างพิกัด คลิกปุ่ม "เรียกใช้" เพื่อส่งคําขอ เครื่องมือจะแสดงผลลัพธ์ที่มีข้อมูลต่างๆ เกี่ยวกับสถานที่ รวมถึงพิกัดละติจูดและลองจิจูดที่แสดงในส่วนgeometry.location
  4. ใช้พิกัดภูมิศาสตร์ คัดลอกค่าละติจูดและลองจิจูดที่ดึงมาจากคําตอบ แล้ววางลงในออบเจ็กต์ coordinates ภายในการกําหนดค่า

หมายเหตุ: พิกัดภูมิศาสตร์ที่ใช้ด้วยวิธีนี้ต้องเป็นไปตามข้อกำหนดที่ระบุไว้ในข้อกำหนดในการให้บริการของ Google Maps Platform ส่วนที่ 3.4 กล่าวคือ ต้องไม่มีการแคชไว้นานกว่า 30 วันและต้องรีเฟรชหลังจากนั้น

รูปภาพ

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

การปรับแต่งขั้นสูง

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

เพิ่มเส้นทางของกล้องใหม่

โซลูชันนี้ใช้เส้นทางกล้อง 2 แบบโดยค่าเริ่มต้น ดังนี้

fixed-orbit" | "dynamic-orbit"

แต่หากต้องการ คุณสามารถสร้างเส้นทางของกล้องใหม่ได้โดยใช้

/src/utils/cesium.js ในฟังก์ชัน calculateAutoOrbitFrame

หากต้องการใช้การคํานวณเส้นทางใหม่นี้ในแผงการกําหนดค่า โปรดดูการใช้งานใน demo/src/camera-settings.js.

เพิ่มสถานที่ประเภทอื่นๆ

คุณปรับรายการประเภทสถานที่สําหรับการกําหนดค่าได้ในไฟล์ demo/src/place-settings.js บรรทัดที่ 4 เป็นต้นไปคือประเภทสถานที่ที่มีให้ใช้งานในเดโม

หากต้องการใช้สถานที่ประเภทใดประเภทหนึ่งโดยไม่เปลี่ยนแหล่งที่มาของข้อมูลเดโม คุณก็เพิ่มสถานที่นั้นลงในไฟล์ config.json ในส่วน poi.types ได้

ปรับแต่งสไตล์ (css)

สำหรับรูปแบบที่เราใช้ตัวแปร CSS เบราว์เซอร์หลักทุกรุ่นรองรับคำสั่งนี้ ซึ่งช่วยให้คุณเปลี่ยนบรรทัดเดียวในตำแหน่งส่วนกลางและอัปเดตพร็อพเพอร์ตี้ CSS ที่เฉพาะเจาะจงได้ ตัวแปร CSS ของเราได้รับการกําหนดไว้ใน src/main.css. ซึ่งคุณสามารถปรับสี การตั้งค่าแบบอักษร และระยะห่างจากขอบหรือระยะขอบสําหรับทั้งแอปพลิเคชันได้

วางซ้อนข้อมูลเพิ่มเติม

หากต้องการวางซ้อนข้อมูลเพิ่มเติม คุณต้องอัปเดตไฟล์ src/utils/cesium.js และอ่านเอกสารประกอบของ Cesium เกี่ยวกับวิธีเพิ่ม GeoJSON หรือข้อมูลอื่นๆ ที่มีการอ้างอิงภูมิศาสตร์ลงในลูกโลก

นำส่วนการกําหนดค่าออก

แอปพลิเคชัน JavaScript ของเรามีส่วนหลัก 3 ส่วนในไฟล์การกําหนดค่า ได้แก่ demo/src/[config-panel.js](config-panel.js): location, poi และ camera ส่วนต่างๆ เหล่านี้มีตัวเลือกการกำหนดค่าสำหรับแง่มุมต่างๆ ของแอปพลิเคชัน นักพัฒนาแอปสามารถปรับแต่งส่วนเหล่านี้ตามความต้องการเฉพาะของตนได้

1.นำส่วนใดส่วนหนึ่งออกจากการกําหนดค่า

  • ส่วนสถานที่ตั้ง

หากต้องการนำส่วน location ออก ให้ค้นหาบรรทัดต่อไปนี้ในโค้ด แล้วcomment หรือลบบรรทัดนั้น

const locationConfig = { ...config.location, ...customConfig.location };
  • ส่วนจุดที่น่าสนใจ

หากต้องการนําส่วน poi ออก ให้ค้นหาบรรทัดต่อไปนี้ในโค้ดและใส่ความคิดเห็นหรือลบบรรทัดนั้น

const poiConfig = { ...config.poi, ...customConfig.poi };
  • ส่วนกล้อง

หากต้องการนําส่วน camera ออก ให้ค้นหาบรรทัดต่อไปนี้ในโค้ดและคอมเมนต์หรือลบออก

const cameraConfig = { ...config.camera, ...customConfig.camera };

2. อัปเดตการกำหนดค่าแบบรวม

หลังจากนําส่วนออกแล้ว คุณต้องอัปเดตออบเจ็กต์การกําหนดค่าแบบรวม ออบเจ็กต์นี้จะผสานการกำหนดค่าเริ่มต้นเข้ากับการปรับแต่ง นำพร็อพเพอร์ตี้ที่เกี่ยวข้องออกจากออบเจ็กต์ combinedConfig

const combinedConfig = {
 location: { ...config.location, ...customConfig.location }, // Remove if location section is removed

 poi: { ...config.poi, ...customConfig.poi }, // Remove if poi section is removed
 camera: { ...config.camera, ...customConfig.camera }, // Remove if camera section is removed
};

3. ปรับองค์ประกอบ UI

หากการนำส่วนออกหมายถึงการนำองค์ประกอบ UI ที่เกี่ยวข้องออกด้วย ให้อัปเดตโค้ดในโค้ด html ตามความเหมาะสม ตัวอย่างเช่น หากต้องการนำส่วนใดส่วนหนึ่งออกจากแผงการดูแลระบบ เช่น ความเร็วของกล้อง คุณต้องอัปเดตทั้งโค้ด js และ html ของส่วนนั้น

4. นำส่วนการตั้งค่ากล้องออก

หากต้องการนำส่วนการตั้งค่ากล้องออกจาก UI ให้ค้นหาบรรทัดต่อไปนี้แล้วcomment หรือลบออก

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

การนำสรุปส่วนสถานที่ตั้งออก

const locationSection = await getLocationSettingsSection(locationConfig);

บทสรุป

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

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