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

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

จำนวนแท็กซี่ในนิวยอร์กซิตี้ตามรหัสไปรษณีย์
จำนวนแท็กซี่แบบเคลื่อนไหวในนิวยอร์กซิตี้ตามขอบเขตรหัสไปรษณีย์ (จำลองเวลาที่ผ่านไป):
จำนวนแท็กซี่ในนิวยอร์กซิตีตามรหัสไปรษณีย์ (ไทม์แลปส์) คำอธิบายแผนที่

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

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

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

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

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

แนวทางเชิงสถาปัตยกรรมสู่โซลูชัน

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

สถาปัตยกรรม
แผนภาพสถาปัตยกรรมการประยุกต์ใช้ของวิธีการมีดังนี้
สถาปัตยกรรมแอปพลิเคชัน

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

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

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

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

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

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

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

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

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

การดำเนินการถัดไป

ผู้ร่วมให้ข้อมูล

ผู้เขียนหลัก:

Jim Leflar | วิศวกรโซลูชัน Google Maps Platform