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

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

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

เปิดใช้

ปรับแต่งประสบการณ์

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

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

ตำแหน่ง

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

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

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

  • วงโคจรคงที่:

    นี่คือวงโคจรทรงกลมที่มีความสูงคงที่และรอบจุดที่เฉพาะเจาะจงของ ความสนใจ

    ดูวงโคจรแบบคงที่ของจริงด้วยการสำรวจ Google Sydney Office

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

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

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

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

  • ปรับแต่งการสํารวจด้วยการระบุประเภทสถานที่ที่ต้องการ ค้นพบ เลือกจากพิพิธภัณฑ์ สวนสาธารณะ โรงเรียน และอื่นๆ โดยใช้ types ใน config.json
  • กำหนดจำนวนจุดที่น่าสนใจสูงสุดที่จะแสดงโดยการปรับพารามิเตอร์ density
  • แก้ไข searchRadius (in meters) เพื่อรวม Gem หรือโฟกัสที่ซ่อนอยู่ในบริเวณใกล้เคียง เกี่ยวกับเรื่องนี้โดยเฉพาะ
  • ตั้งค่าความเร็วที่เลือกสำหรับการเคลื่อนไหวของกล้องด้วยพารามิเตอร์ 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 องศาในช่วง เวลา)

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

ค่าตัวอย่าง

  • 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 เพื่อรับพิกัดละติจูดและลองจิจูดของที่อยู่หรือชื่อสถานที่โดยระบุไว้ในออบเจ็กต์สถานที่ ดังนี้

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

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

รูปภาพ

การกำหนดค่านี้จะใช้เครื่องมือ Geocoding เพื่อระบุโดยอัตโนมัติ พิกัดของสำนักงานใหญ่ของ 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 ออก ให้หาบรรทัดต่อไปนี้ในโค้ดของคุณและ แสดงความคิดเห็นหรือลบ:

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 ตามความเหมาะสม เช่น หากต้องการนำ จากแผงการดูแลระบบ เช่น ความเร็วกล้อง คุณจะต้องอัปเดตทั้ง และโค้ด html สำหรับสิ่งนั้น

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

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

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

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

const locationSection = await getLocationSettingsSection(locationConfig);

บทสรุป

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

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