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

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

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