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

โปรแกรมสำรวจพื้นที่แบบ 3 มิติเป็นโซลูชันที่ช่วยให้คุณสำรวจชุมชนได้ในรูปแบบ 3 มิติที่สวยงาม โซลูชันนี้ใช้ประโยชน์จาก ชิ้นส่วนแผนที่ 3 มิติแบบภาพเสมือนจริงของ Google, Places Search, รายละเอียดสถานที่ และ 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: ประเภทวงโคจรของกล้อง ("วงโคจรคงที่" หรือ "วงโคจรแบบไดนามิก")

ประโยชน์ของการกำหนดค่า URL มีดังนี้

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

คุณสามารถใช้การปรับแต่ง 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 องศาเมื่อเวลาผ่านไป)

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

ค่าตัวอย่าง

  • 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 (ปัจจัยการซูมของกล้อง)

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

ค่าตัวอย่าง

  • 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 กำหนดศูนย์กลางของพื้นที่ ซึ่งเป็นมุมมองเริ่มต้นของกล้องในโปรแกรมดูซีเซียมcoordinates: กำหนดละติจูด (lat) และลองจิจูด (lng) ของสถานที่ที่คุณต้องการให้กล้องเลื่อนไปก่อน ปรับค่าเหล่านี้เพื่อตั้งค่ากล้องไปยังตำแหน่งที่เจาะจงบนโลก

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

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

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

หมายเหตุ: รหัสพิกัดภูมิศาสตร์ที่ใช้ในลักษณะนี้ต้องเป็นไปตามข้อกำหนดที่ระบุไว้ในข้อกำหนดในการให้บริการของแพลตฟอร์ม Google Maps ส่วนที่ 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 ซึ่งรองรับในเบราว์เซอร์หลักๆ ทุกเบราว์เซอร์ และทำให้สามารถเปลี่ยนบรรทัด 1 บรรทัดในพื้นที่ส่วนกลางและอัปเดตพร็อพเพอร์ตี้ CSS ที่เจาะจงได้ เรากำหนดตัวแปร CSS ไว้ใน src/main.css. ซึ่งคุณจะปรับสี การตั้งค่าแบบอักษร และระยะห่างจากขอบหรือระยะขอบสำหรับทั้งแอปพลิเคชันได้

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

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

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

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

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

  • ส่วนสถานที่

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

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 ให้ค้นหาบรรทัดต่อไปนี้แล้วแสดงความคิดเห็นหรือลบออก

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

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

const locationSection = await getLocationSettingsSection(locationConfig);

บทสรุป

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

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