เอกสารนี้จะอธิบายเหตุผลและวิธีใช้งานการจัดรูปแบบตามข้อมูลแบบไดนามิกของ Google Boundaries โดยใช้ Maps JavaScript API ซึ่งเป็นประโยชน์ในกรณีการใช้งานที่หลากหลายในอุตสาหกรรมและกลุ่มต่างๆ
จำนวนแท็กซี่แบบเคลื่อนไหวในนิวยอร์กซิตี้ตามขอบเขตรหัสไปรษณีย์ (จำลองแบบไทม์แลปส์):
![จำนวนแท็กซี่ในนิวยอร์กตามรหัสไปรษณีย์ (ไทม์แลปส์) จำนวนแท็กซี่ในนิวยอร์กตามรหัสไปรษณีย์ (ไทม์แลปส์)](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/architecture/dds-real-time/images/nyc.gif?authuser=19&hl=th)
![คำอธิบายแผนที่ คำอธิบายแผนที่](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/architecture/dds-real-time/images/legend.png?authuser=19&hl=th)
การจัดรูปแบบตามข้อมูลคือความสามารถของ Google Maps Platform ที่ช่วยให้คุณสามารถใช้รูปหลายเหลี่ยมขอบเขตการดูแลระบบของ Google ใช้การจัดรูปแบบกับรูปหลายเหลี่ยมเหล่านั้นเพื่อแสดงบนแผนที่ของคุณ และรวมข้อมูลของคุณเองเพื่อสร้างแผนที่ที่สมบูรณ์แบบกำหนดเอง ซึ่งสามารถใช้เพื่อวิเคราะห์ภาพและทำความเข้าใจข้อมูลของคุณให้ดียิ่งขึ้น เอกสารนี้จะพูดถึงกรณีการใช้งานบางส่วนที่อธิบายเหตุผลและวิธีที่คุณจะแสดงข้อมูลเป็นภาพด้วยการจัดรูปแบบจากข้อมูลบนแผนที่ในแบบเกือบเรียลไทม์โดยการผสานรวมฟีดข้อมูลแบบไดนามิก
การจัดรูปแบบตามข้อมูลช่วยให้คุณสามารถสร้างแผนที่ที่แสดงการกระจายทางภูมิศาสตร์ของข้อมูล ปรับแต่งรูปแบบรูปหลายเหลี่ยมแบบไดนามิก และโต้ตอบกับข้อมูลของคุณผ่านเหตุการณ์การคลิก คุณลักษณะเหล่านี้สามารถใช้เพื่อสร้างแผนที่ที่ให้ข้อมูลและน่าสนใจสำหรับกรณีการใช้งานและอุตสาหกรรมที่หลากหลาย
ต่อไปนี้เป็นตัวอย่างกรณีการใช้งานที่เกี่ยวข้องกับแผนที่ที่แสดงการอัปเดตข้อมูลแบบไดนามิกในการจัดรูปแบบจากข้อมูล
- บริการร่วมเดินทาง: การอัปเดตแบบเรียลไทม์ใช้เพื่อระบุพื้นที่ที่มีความต้องการเดินทางสูงได้ ซึ่งในกรณีนี้ผู้ให้บริการบางรายอาจมีราคาเพิ่มขึ้นอย่างรวดเร็ว
- การขนส่ง: การอัปเดตแบบเรียลไทม์ใช้ระบุพื้นที่ที่มีการจราจรแออัดได้ ซึ่งจะช่วยกำหนดเส้นทางอื่นที่ดีที่สุด
- การเลือกตั้ง: ในคืนวันเลือกตั้ง ระบบอาจใช้ข้อมูลแบบสำรวจแบบเรียลไทม์เพื่อแสดงผลลัพธ์ออกมาเป็นภาพ
- ความปลอดภัยของผู้ปฏิบัติงาน: การอัปเดตแบบเรียลไทม์สามารถใช้เพื่อติดตามเหตุการณ์ที่เกิดขึ้นในแบบเรียลไทม์ ระบุพื้นที่ที่มีความเสี่ยงสูง และทำให้ผู้ปฏิบัติการฉุกเฉินได้ทราบตามสถานการณ์
- สภาพอากาศ: การอัปเดตแบบเรียลไทม์สามารถใช้เพื่อติดตามการเคลื่อนที่ของพายุ ระบุอันตรายในปัจจุบัน รวมถึงแสดงคำเตือนและการแจ้งเตือน
- สภาพแวดล้อม: การอัปเดตแบบเรียลไทม์สามารถใช้เพื่อติดตามการเคลื่อนที่ของเถ้าภูเขาไฟและสารมลพิษอื่นๆ ระบุพื้นที่ที่เสื่อมสภาพของสิ่งแวดล้อม และตรวจสอบผลกระทบของกิจกรรมของมนุษย์
ในทุกสถานการณ์เหล่านี้ ลูกค้าจะได้รับคุณค่าเพิ่มเติมโดยการรวมฟีดข้อมูลแบบเรียลไทม์เข้ากับขอบเขตของ Google เพื่อแสดงภาพข้อมูลบนแผนที่อย่างรวดเร็วและง่ายดาย เพิ่มพลังอันทรงประสิทธิภาพในข้อมูลเชิงลึกที่เกือบจะทันที เพื่อให้ตัดสินใจได้ดีขึ้น
แนวทางเชิงสถาปัตยกรรมสู่โซลูชัน
ต่อไปเราจะเริ่มต้นด้วยการสร้างแผนที่โดยใช้การจัดรูปแบบตามข้อมูลเพื่อแสดงข้อมูลแบบไดนามิก ตามที่แสดงให้เห็นก่อนหน้านี้ กรณีการใช้งานคือจำนวนแท็กซี่ในนิวยอร์กที่แสดงภาพตามรหัสไปรษณีย์ ซึ่งข้อมูลนี้จะเป็นประโยชน์อย่างยิ่งต่อผู้ใช้ในการเข้าใจว่าการเรียกรถแท็กซี่นั้นทำได้ง่ายเพียงใด
แผนภาพสถาปัตยกรรมแอปพลิเคชันของวิธีการมีดังนี้
![แผนภาพสถาปัตยกรรมแอปพลิเคชัน สถาปัตยกรรมแอปพลิเคชัน](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/architecture/dds-real-time/images/architecture.png?authuser=19&hl=th)
โซลูชันการจัดรูปแบบตามข้อมูลแบบไดนามิก
ต่อไปเรามาดูขั้นตอนที่จำเป็นในการใช้แผนที่ Choropleth การจัดรูปแบบตามข้อมูลแบบไดนามิกสำหรับชุดข้อมูล
โซลูชันนี้ช่วยให้คุณเห็นภาพชุดข้อมูลสมมติของความหนาแน่นของแท็กซี่แบบเรียลไทม์รอบนครนิวยอร์กโดยใช้รหัสไปรษณีย์ได้ แม้ว่าจะไม่ใช่ข้อมูลจริง แต่ก็มีการประยุกต์ใช้ในโลกแห่งความเป็นจริง และช่วยให้เห็นถึงพลังและความสามารถของวิธีแสดงข้อมูลแบบไดนามิกบนแผนที่ด้วยการจัดรูปแบบตามข้อมูล
ขั้นตอนที่ 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'];
});
}
ขั้นต่อไปคืออัปเดตข้อมูลให้สดใหม่ วิธีหนึ่งในการทำเช่นนี้คือการเรียกคำค้นหาข้างต้นโดยใช้เว็บเวิร์กทำงาน แล้วตั้งตัวจับเวลาเพื่อรีเฟรชข้อมูลโดยใช้ฟังก์ชัน setInterval คุณสามารถกำหนดช่วงเวลาให้เป็นค่าที่เหมาะสม เช่น การรีเฟรชแผนที่ทุก 15 วินาที แต่ละครั้งที่ช่วงเวลาผ่านไป ผู้ปฏิบัติงานทำงานจะขอค่า TaxiCount ที่อัปเดตตามรหัสไปรษณีย์
เมื่อเราค้นหาและรีเฟรชข้อมูลได้แล้ว ให้ตรวจสอบว่าลักษณะของรูปหลายเหลี่ยมบนแผนที่แสดงถึงการเปลี่ยนแปลงเหล่านี้
ขั้นตอนที่ 3: จัดรูปแบบแผนที่ด้วยการจัดรูปแบบตามข้อมูล
ตอนนี้คุณได้ค่าข้อมูลแบบไดนามิกที่ต้องใช้ในการสร้างและใช้รูปแบบภาพกับขอบเขตของรหัสไปรษณีย์ในอินสแตนซ์ JavaScript ของ Maps เป็นออบเจ็กต์ JSON แล้ว ตอนนี้ก็ถึงเวลาสร้างรูปแบบเป็นแผนที่ Choropleth
ในตัวอย่างนี้ คุณจะจัดรูปแบบแผนที่ตามจำนวนแท็กซี่ในแต่ละรหัสไปรษณีย์ ทำให้ผู้ใช้ทราบความหนาแน่นของรถแท็กซี่และความพร้อมในการให้บริการในพื้นที่ของตน รูปแบบจะแตกต่างกันไปตามค่าจำนวนแท็กซี่ พื้นที่ที่มีรถแท็กซี่น้อยที่สุดจะใช้สีม่วง และการไล่ระดับสีจะเคลื่อนผ่านสีแดง ส้ม และไปสิ้นสุดที่รถแท็กซี่ในนิวยอร์กเป็นสีเหลืองในพื้นที่ที่มีประชากรหนาแน่นที่สุด สำหรับรูปแบบสีนี้ คุณจะใช้ค่าสีเหล่านี้กับอัตราการส่งโฆษณาและสีเส้นโครงร่าง การตั้งค่า FillOpacity เป็น 0.5 ทำให้ผู้ใช้ของคุณดูแผนที่เบื้องหลัง และการตั้งค่า เส้นทึบเป็น 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
- ยกระดับการแสดงข้อมูลผ่านภาพไปอีกขั้นด้วยกิจกรรมการคลิกสำหรับการจัดรูปแบบตามข้อมูล
- พิจารณาเพิ่มเครื่องหมายขั้นสูงลงในแผนที่ของคุณ
ผู้ร่วมให้ข้อมูล
ผู้เขียนหลัก:
จิม เลฟลาร์ | วิศวกรโซลูชัน Google Maps Platform