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

3D Area Explorer เป็นโซลูชันที่ช่วยให้คุณสำรวจชุมชนต่างๆ ในรูปแบบ 3 มิติที่น่าสนใจ โซลูชันนี้ใช้ประโยชน์จาก: Photorealistic 3D Tiles, Places Search, รายละเอียดสถานที่, และ Autocomplete API ของ Google

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

เปิดใช้

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

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

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

ตำแหน่ง

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

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

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

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

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

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

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

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

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

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

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

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

3D Area Explorer ช่วยให้คุณกำหนดการสำรวจล่วงหน้าด้วยการปรับแต่ง URL ได้ ซึ่งช่วยลดความจำเป็นในการกำหนดค่าด้วยตนเองและปรับปรุงประสบการณ์การใช้งานของผู้ใช้

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

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

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

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

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

ประโยชน์ของการปรับแต่ง URL

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

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

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

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

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

รูปภาพ

การกำหนดค่านี้จะใช้เครื่องมือ Geocoding เพื่อกำหนดพิกัดของสำนักงานใหญ่ของ Google ใน Mountain View, California โดยอัตโนมัติ และเปิดแอปพลิเคชัน 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

หากต้องการนำส่วน 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);

บทสรุป

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

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