หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

หมายเหตุ: ลองใช้ URL ที่ปรับแต่งแบบเต็มต่อไปนี้ https://js-3d-area-explorer-demo-dev-t6a6o7lkja-uc.a.run.app/#camera.orbitType=fixed-orbit&camera.speed=2.2&poi.types=restaurant&poi.types=parking&poi.types=movie_theater&poi.types=bus_station&poi.density=40&poi.searchRadius=5100

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

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

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

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

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

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

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