การจัดรูปแบบตามข้อมูลแบบเรียลไทม์

เอกสารนี้อธิบายเหตุผลและวิธีใช้การจัดรูปแบบตามข้อมูลแบบไดนามิกของขอบเขต Google โดยใช้ Maps JavaScript API ซึ่งมีประโยชน์สำหรับ Use Case ที่หลากหลายในอุตสาหกรรมและกลุ่มต่างๆ

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

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

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

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

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

แนวทางด้านสถาปัตยกรรมสำหรับโซลูชัน

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

โซลูชันการจัดรูปแบบตามข้อมูลแบบไดนามิก

ตอนนี้เรามาดูขั้นตอนที่จำเป็นในการใช้แผนที่โคโรเพลทที่มีการจัดรูปแบบตามข้อมูลแบบไดนามิกสำหรับชุดข้อมูลของคุณกัน

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

ขั้นตอนที่ 1: เลือกข้อมูลที่จะแสดงภาพและรวมเข้ากับรหัสสถานที่ของขอบเขต

ขั้นตอนแรกคือการระบุข้อมูลที่ต้องการแสดงและตรวจสอบว่าข้อมูลดังกล่าวตรงกับขอบเขตของ Google คุณสามารถทำการจับคู่นี้ฝั่งไคลเอ็นต์ได้โดยเรียกใช้เมธอด Callback findPlaceFromQuery สำหรับ postalCode แต่ละรายการ โปรดทราบว่ารหัสไปรษณีย์ในสหรัฐอเมริกามีชื่อที่แตกต่างกัน แต่ระดับการบริหารอื่นๆ ไม่มี คุณจะต้องตรวจสอบว่าได้เลือกรหัสสถานที่ที่ถูกต้องสำหรับคำค้นหาในกรณีที่อาจมีผลลัพธ์ที่กำกวม

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 ที่อัปเดตแล้วต่อ postalCode

เมื่อเราค้นหาและรีเฟรชข้อมูลได้แล้ว มาตรวจสอบว่าลักษณะที่ปรากฏของรูปหลายเหลี่ยมในแผนที่แสดงการเปลี่ยนแปลงเหล่านี้

ขั้นตอนที่ 3: จัดรูปแบบแผนที่ด้วยการจัดรูปแบบตามข้อมูล

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

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