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

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

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

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

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

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

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

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

ลองเลย: ไปที่คอนโซล Google Cloud และเปิดใช้ Maps JavaScript API

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

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

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

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

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

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

ขั้นตอนที่ 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'];
   });
}

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

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

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

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

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