จำนวนแท็กซี่แบบเคลื่อนไหวในนิวยอร์กซิตี้ตามขอบเขตของรหัสไปรษณีย์ (จำลอง, แบบไทม์แลปส์):
การจัดรูปแบบตามข้อมูลเป็นความสามารถของ Google Maps Platform ที่ช่วยให้คุณใช้รูปหลายเหลี่ยมขอบเขตการปกครองของ Google, ใช้การจัดรูปแบบกับรูปหลายเหลี่ยมเหล่านั้นเพื่อแสดงบนแผนที่ และรวมข้อมูลของคุณเองเพื่อสร้างแผนที่ที่สมบูรณ์และปรับแต่งได้ ซึ่งสามารถใช้สำหรับการวิเคราะห์ด้วยภาพและการทำความเข้าใจข้อมูลได้ดียิ่งขึ้น เอกสารนี้จะกล่าวถึงกรณีการใช้งานบางกรณีที่อธิบายเหตุผลและวิธีแสดงข้อมูลเป็นภาพด้วยการจัดรูปแบบตามข้อมูลบนแผนที่แบบเกือบเรียลไทม์โดยการผสานรวมฟีดข้อมูลแบบไดนามิก
การจัดรูปแบบตามข้อมูลช่วยให้คุณสร้างแผนที่ที่แสดงการกระจายทางภูมิศาสตร์ของข้อมูล ปรับแต่งรูปแบบรูปหลายเหลี่ยมแบบไดนามิก และโต้ตอบกับข้อมูลผ่านเหตุการณ์การคลิกได้ คุณสามารถใช้ฟีเจอร์เหล่านี้เพื่อสร้างแผนที่ที่ให้ข้อมูลและน่าสนใจสำหรับกรณีการใช้งานและอุตสาหกรรมที่หลากหลาย
ต่อไปนี้คือตัวอย่างกรณีการใช้งานที่อาจใช้ได้กับแผนที่ที่แสดงข้อมูลอัปเดตแบบไดนามิกในการจัดรูปแบบตามข้อมูล
- การแชร์รถ: คุณสามารถใช้ข้อมูลอัปเดตแบบเรียลไทม์เพื่อระบุพื้นที่ที่มีความต้องการสูง ซึ่งในกรณีนี้ผู้ให้บริการบางรายอาจมีการกำหนดราคาแบบเพิ่มขึ้น
- การขนส่ง: คุณสามารถใช้ข้อมูลอัปเดตแบบเรียลไทม์เพื่อระบุพื้นที่ที่มีการจราจรติดขัด ซึ่งจะช่วยในการกำหนดเส้นทางเลือกที่ดีที่สุด
- การเลือกตั้ง: ในคืนวันเลือกตั้ง คุณสามารถใช้ข้อมูลการหยั่งเสียงแบบเรียลไทม์เพื่อแสดงผลการเลือกตั้งเป็นภาพเมื่อมีการประกาศผล
- ความปลอดภัยของคนงาน: คุณสามารถใช้ข้อมูลอัปเดตแบบเรียลไทม์เพื่อติดตามเหตุการณ์ที่เกิดขึ้นแบบเรียลไทม์ ระบุพื้นที่ที่มีความเสี่ยงสูง และให้ข้อมูลสถานการณ์แก่ผู้ตอบสนองในพื้นที่
- สภาพอากาศ: คุณสามารถใช้ข้อมูลอัปเดตแบบเรียลไทม์เพื่อติดตามการเคลื่อนที่ของพายุ ระบุอันตรายในปัจจุบัน และแสดงคำเตือนและการแจ้งเตือน
- สิ่งแวดล้อม: คุณสามารถใช้ข้อมูลอัปเดตแบบเรียลไทม์เพื่อติดตามการเคลื่อนที่ของเถ้าภูเขาไฟและมลพิษอื่นๆ ระบุพื้นที่ที่สิ่งแวดล้อมเสื่อมโทรม และตรวจสอบผลกระทบจากกิจกรรมของมนุษย์
ในทุกสถานการณ์เหล่านี้ ลูกค้าจะได้รับประโยชน์เพิ่มเติมโดยการรวมฟีดข้อมูลแบบเรียลไทม์เข้ากับขอบเขตของ Google เพื่อแสดงข้อมูลเป็นภาพบนแผนที่ได้อย่างรวดเร็วและง่ายดาย ซึ่งจะช่วยให้ลูกค้าได้รับข้อมูลเชิงลึกแบบเกือบจะทันทีเพื่อการตัดสินใจที่รอบคอบมากขึ้น
แนวทางด้านสถาปัตยกรรมของโซลูชัน
ตอนนี้มาดูขั้นตอนการสร้างแผนที่โดยใช้การจัดรูปแบบตามข้อมูลเพื่อแสดงข้อมูลแบบไดนามิกเป็นภาพ ดังที่แสดงให้เห็นก่อนหน้านี้ กรณีการใช้งานคือจำนวนแท็กซี่ในนิวยอร์กซิตี้ที่แสดงเป็นภาพตามรหัสไปรษณีย์ ซึ่งจะเป็นประโยชน์สำหรับผู้ใช้ในการทำความเข้าใจว่าการเรียกรถแท็กซี่จะง่ายเพียงใด
ต่อไปนี้คือแผนภาพสถาปัตยกรรมแอปพลิเคชันของแนวทางนี้:
โซลูชันการจัดรูปแบบตามข้อมูลแบบไดนามิก
โซลูชันนี้ช่วยให้คุณแสดงชุดข้อมูลสมมติของความหนาแน่นของแท็กซี่แบบเรียลไทม์รอบๆ นิวยอร์กซิตี้ตามรหัสไปรษณีย์เป็นภาพได้ แม้ว่าข้อมูลนี้อาจไม่ใช่ข้อมูลจริง แต่ก็มีการใช้งานจริงและช่วยให้คุณเห็นภาพถึงประสิทธิภาพและความสามารถในการแสดงข้อมูลแบบไดนามิกเป็นภาพบนแผนที่ด้วยการจัดรูปแบบตามข้อมูล
ขั้นตอนที่ 1: เลือกข้อมูลที่จะแสดงเป็นภาพและเข้าร่วมกับรหัสสถานที่ของขอบเขต
ขั้นตอนแรกคือการระบุข้อมูลที่ต้องการแสดงและตรวจสอบว่าข้อมูลดังกล่าวสามารถจับคู่กับขอบเขตของ Google ได้ คุณสามารถทำการจับคู่ฝั่งไคลเอ็นต์ได้โดยการเรียกใช้เมธอด Callback findPlaceFromQuery สำหรับรหัสไปรษณีย์แต่ละรายการ โปรดทราบว่ารหัสไปรษณีย์ในสหรัฐอเมริกามีชื่อที่แตกต่างกัน แต่ระดับการปกครองอื่นๆ ไม่มี คุณควรเลือก รหัสสถานที่ ที่ถูกต้องสำหรับการค้นหาในกรณีที่ผลลัพธ์อาจไม่ชัดเจน
const request = {
query: postalCode,
fields: ['place_id'],
};
function findPlaceId() {
placesService.findPlaceFromQuery(request, function (results, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
console.log(results[0]);
}
});
}
หากข้อมูลมีค่าละติจูดและลองจิจูด คุณยังใช้ Geocoding API กับการกรองคอมโพเนนต์เพื่อแปลงค่าละติจูด/ลองจิจูดเหล่านั้นเป็นค่ารหัสสถานที่สำหรับเลเยอร์ของฟีเจอร์ที่คุณสนใจในการจัดรูปแบบได้ด้วย ในตัวอย่างนี้ คุณจะจัดรูปแบบเลเยอร์ของฟีเจอร์ POSTAL_CODE
ขั้นตอนที่ 2: เชื่อมต่อกับข้อมูลแบบเรียลไทม์
คุณเชื่อมต่อกับแหล่งข้อมูลได้หลายวิธี และการใช้งานที่ดีที่สุดจะขึ้นอยู่กับความต้องการเฉพาะและโครงสร้างพื้นฐานทางเทคนิคของคุณ ในกรณีนี้ ให้สมมติว่าข้อมูลของคุณอยู่ในตาราง BigQuery ที่มี 2 คอลัมน์ ได้แก่ "zip_code" และ "taxi_count" และคุณจะค้นหาข้อมูลผ่าน Firebase Cloud Function
async function queryNycTaxis() {
// Queries the NYC Taxis dataset.
// Create a client
const bigqueryClient = new BigQuery();
// The SQL query to run
const sqlQuery = 'SELECT zip_code, taxi_count
FROM \'YOUR_DATASET_ID.TABLE\' LIMIT 100';
const options = {
query: sqlQuery,
// Location must match that of the dataset(s)
// referenced in the query.
location: 'US',
};
// Run the query
const [rows] = await bigqueryClient.query(options);
rows.forEach(row => {
const postalCode = row['zip_code'];
const taxiCount = row['taxi_count'];
});
}
จากนั้นคุณจะต้องตรวจสอบว่าข้อมูลเป็นข้อมูลล่าสุด วิธีหนึ่งในการทำเช่นนี้คือการเรียกใช้การค้นหาข้างต้นโดยใช้ Web Worker และตั้งค่าตัวจับเวลาเพื่อรีเฟรชข้อมูลโดยใช้ฟังก์ชัน setInterval คุณสามารถตั้งค่าช่วงเวลาเป็นค่าที่เหมาะสม เช่น รีเฟรชแผนที่ทุก 15 วินาที เมื่อเวลาช่วงเวลาผ่านไป Web Worker จะขอค่า taxiCount ที่อัปเดตต่อรหัสไปรษณีย์
ตอนนี้เราสามารถค้นหาและรีเฟรชข้อมูลได้แล้ว มาตรวจสอบกันว่าลักษณะที่ปรากฏของรูปหลายเหลี่ยมบนแผนที่จะแสดงการเปลี่ยนแปลงเหล่านี้
ขั้นตอนที่ 3: จัดรูปแบบแผนที่ด้วยการจัดรูปแบบตามข้อมูล
ตอนนี้คุณมีค่าข้อมูลแบบไดนามิกที่จำเป็นในการสร้างและใช้รูปแบบภาพกับขอบเขตของรหัสไปรษณีย์ในอินสแตนซ์ Maps JavaScript เป็นออบเจ็กต์ JSON แล้ว ก็ถึงเวลาจัดรูปแบบให้เป็นแผนที่โคโรเพลท
ในตัวอย่างนี้ คุณจะจัดรูปแบบแผนที่ตามจำนวนแท็กซี่ในรหัสไปรษณีย์แต่ละรายการ เพื่อให้ผู้ใช้เห็นภาพความหนาแน่นและความพร้อมให้บริการของแท็กซี่ในพื้นที่ของตน รูปแบบจะแตกต่างกันไปตามค่าจำนวนแท็กซี่ พื้นที่ที่มีแท็กซี่น้อยที่สุดจะใช้การจัดรูปแบบสีม่วง และการไล่ระดับสีจะเปลี่ยนเป็นสีแดง สีส้ม และสิ้นสุดที่สีเหลืองของแท็กซี่ในนิวยอร์กซิตี้สำหรับพื้นที่ที่มีความหนาแน่นสูงสุด สำหรับรูปแบบสีนี้ คุณจะใช้ค่าสีเหล่านี้กับ fillColor และ strokeColor การตั้งค่า fillOpacity เป็น 0.5 ช่วยให้ผู้ใช้เห็นแผนที่ด้านล่าง และการตั้งค่า strokeOpacity เป็น 1.0 ช่วยให้ผู้ใช้แยกความแตกต่างระหว่างขอบเขตของรูปหลายเหลี่ยมที่มีสีเดียวกันได้
const featureLayer = map.getFeatureLayer(
google.maps.FeatureType.POSTAL_CODE
);
featureLayer.style = (featureStyleFunctionOptions) => {
const placeFeature = featureStyleFunctionOptions.feature;
// taxiCount per (postal_code) PlaceID
const taxiCount = zips[placeFeature.placeId];
let fillColor;
let strokeColor;
// Apply colors to features based on taxiCount values
if (taxiCount < 8) {
fillColor = "#571845";
strokeColor = "#571845";
} else if (taxiCount < 13) {
fillColor = "#900c3e";
strokeColor = "#900c3e";
} else if (taxiCount < 21) {
fillColor = "#c60039";
strokeColor = "#c60039";
} else if (taxiCount < 34) {
fillColor = "#fe5733";
strokeColor = "#fe5733";
// keep else if or the whole map gets this style with else
} else if (taxiCount >= 34) {
fillColor = "#fec30f";
strokeColor = "#fec30f";
}
return {
fillColor,
strokeColor,
fillOpacity: 0.5,
strokeOpacity: 1.0,
};
บทสรุป
การจัดรูปแบบตามข้อมูลสำหรับขอบเขตของ Google ช่วยให้คุณใช้ข้อมูลเพื่อจัดรูปแบบแผนที่สำหรับการใช้งานที่หลากหลายในอุตสาหกรรมและกลุ่มต่างๆ ได้ การเชื่อมต่อกับข้อมูลแบบเรียลไทม์ช่วยให้คุณสื่อสารได้ว่า เกิดอะไรขึ้น ที่ไหน และ เมื่อเกิดเหตุการณ์ขึ้น ความสามารถนี้มีศักยภาพในการปลดล็อกคุณค่าของข้อมูลแบบเรียลไทม์และช่วยให้ผู้ใช้เข้าใจข้อมูลได้ดียิ่งขึ้นแบบเรียลไทม์ในโลกแห่งความจริง
การดำเนินการถัดไป
- ดูการสัมมนาผ่านเว็บเรื่องวิธีใช้การจัดรูปแบบตามข้อมูลเพื่อจัดรูปแบบขอบเขตของ Google Maps
- ยกระดับการแสดงภาพไปอีกขั้นด้วยเหตุการณ์การคลิกสำหรับการจัดรูปแบบตามข้อมูล
- พิจารณาเพิ่มมาร์กเกอร์ขั้นสูงลงในแผนที่
ผู้ร่วมให้ข้อมูล
ผู้เขียนหลัก
Jim Leflar | วิศวกรโซลูชัน Google Maps Platform