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