แสดงข้อมูลด้วย BigQuery และ Datasets API

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

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

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

สถาปัตยกรรมอ้างอิง

การพัฒนาแอปที่มีการแสดงภาพข้อมูลขนาดใหญ่จำเป็นต้องใช้องค์ประกอบหลัก 2 องค์ประกอบ

  1. แบ็กเอนด์ของลูกค้า - ข้อมูลและบริการแบ็กเอนด์ทั้งหมด เช่น การประมวลผลและพื้นที่เก็บข้อมูล
  2. ลูกค้าของลูกค้า - อินเทอร์เฟซผู้ใช้แอปของคุณที่มีคอมโพเนนต์การแสดงภาพแผนที่

ด้านล่างคือแผนภาพระบบที่อธิบายว่าองค์ประกอบ 2 อย่างนี้มีปฏิสัมพันธ์กับผู้ใช้แอป, Google Cloud และ Google Maps Platform เพื่อสร้างแอปแสดงข้อมูลขนาดใหญ่อย่างไร

แผนภาพสถาปัตยกรรม

⭐ หมายเหตุ: Maps Datasets API เป็นผลิตภัณฑ์ก่อนเวอร์ชันสำหรับผู้ใช้ทั่วไป ดูรายละเอียดในข้อกำหนดในการให้บริการ

ข้อควรพิจารณาในการออกแบบ

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

  1. ขนาดข้อมูลต้นฉบับและความถี่ในการอัปเดต
    1. หากข้อมูลต้นฉบับในรูปแบบ Geojson มีขนาดน้อยกว่า 5MB หรือมีการปรับปรุงบ่อยมาก เช่น การพยากรณ์เรดาร์สภาพอากาศแบบเรียลไทม์ ให้ลองแสดงข้อมูลเป็นฝั่งไคลเอ็นต์ออบเจ็กต์ Geojson ในแอปและแสดงผลด้วยเลเยอร์ deck.gl
    2. หากข้อมูลมีขนาดเกิน 5MB และมีการอัปเดตไม่เร็วกว่า 1 ครั้งต่อชั่วโมง โปรดพิจารณาสถาปัตยกรรมของ Datasets API ในเอกสารนี้
      1. ชุดข้อมูลรองรับไฟล์ขนาดไม่เกิน 350 MB
      2. หากข้อมูลมีขนาดใหญ่กว่า 350mb ลองตัดหรือลดความซับซ้อนของข้อมูลเรขาคณิตในไฟล์ต้นฉบับก่อนส่งไปยังชุดข้อมูล (ดูการตัดข้อมูลด้านล่าง)
  2. สคีมาและรูปแบบ
    1. ตรวจสอบว่าข้อมูลมีพร็อพเพอร์ตี้รหัสที่ไม่ซ้ำกันทั่วโลกสำหรับแต่ละฟีเจอร์ รหัสที่ไม่ซ้ำกันช่วยให้คุณเลือกและจัดรูปแบบสถานที่หนึ่งๆ หรือรวมข้อมูลกับฟีเจอร์เพื่อแสดงภาพได้ เช่น จัดรูปแบบฟีเจอร์ที่เลือกในเหตุการณ์ผู้ใช้ "คลิก"
    2. จัดรูปแบบข้อมูลเป็น CSV หรือ GeoJSON ตามข้อกำหนดของ Datasets API ที่มีชื่อคอลัมน์ ประเภทข้อมูล และประเภทของออบเจ็กต์ GeoJSON ที่ถูกต้อง
    3. เพื่อให้สร้างชุดข้อมูลจาก BigQuery ได้ง่ายขึ้น ให้สร้างคอลัมน์ชื่อ wkt ในการส่งออก CSV ของ SQL ชุดข้อมูลรองรับการนำเข้าเรขาคณิตจาก CSV ในรูปแบบข้อความที่รู้จักกันดี (WKT) จากคอลัมน์ชื่อ wkt
    4. ตรวจสอบว่าข้อมูลเป็นเรขาคณิตและประเภทข้อมูลที่ถูกต้อง ตัวอย่างเช่น GeoJSON ต้องอยู่ในระบบพิกัด WGS84, ลำดับการขดลวดของเรขาคณิต ฯลฯ
    5. ใช้เครื่องมือ เช่น geojson-validate เพื่อตรวจสอบว่าเรขาคณิตทั้งหมดในไฟล์ต้นฉบับถูกต้อง หรือ ogr2ogr เพื่อแปลงไฟล์ต้นฉบับระหว่างรูปแบบหรือระบบพิกัด
  3. การตัดข้อมูล
    1. ลดจำนวนคุณสมบัติขององค์ประกอบ คุณผนวกพร็อพเพอร์ตี้เพิ่มเติมกับฟีเจอร์ในระหว่างรันไทม์ของคีย์ตัวระบุที่ไม่ซ้ำกันได้ (ตัวอย่าง)
    2. ใช้ประเภทข้อมูลที่เป็นจำนวนเต็มสำหรับออบเจ็กต์พร็อพเพอร์ตี้หากเป็นไปได้ เพื่อลดพื้นที่เก็บข้อมูลแบบไทล์เพื่อให้การ์ดยังคงโหลดผ่าน HTTPS ในแอปไคลเอ็นต์ได้อย่างมีประสิทธิภาพ
    3. ลดความซับซ้อนและ/หรือรวมเรขาคณิตของจุดสนใจที่ซับซ้อนมาก ลองใช้ฟังก์ชัน BigQuery เช่น ST_Simplify บนรูปเรขาคณิตหลายเหลี่ยมที่ซับซ้อนเพื่อลดขนาดไฟล์แหล่งข้อมูลและปรับปรุงประสิทธิภาพของแผนที่
  4. การเรียงฉลุ
    1. Google Maps Datasets API จะสร้างชิ้นส่วนแผนที่จากไฟล์ข้อมูลต้นฉบับเพื่อใช้ใน Maps JS API
    2. แผนที่ย่อยเป็นระบบการจัดทำดัชนีแบบซูมที่ให้วิธีที่มีประสิทธิภาพมากขึ้นในการโหลดข้อมูลลงในแอปภาพ
    3. ชิ้นส่วนแผนที่อาจมีจุดสนใจที่หนาแน่นหรือซับซ้อนเมื่อระดับการซูมต่ำลง เมื่อผู้ใช้ซูมออกไปยังรัฐหรือประเทศใดประเทศหนึ่ง (เช่น z5-z12) อาจดูต่างจากเมื่อซูมเข้าในเมืองหรือย่านใกล้เคียง (เช่น z13-z18)

ตัวอย่าง - รถไฟในลอนดอน

ในตัวอย่างนี้ เราจะใช้สถาปัตยกรรมอ้างอิงเพื่อสร้างเว็บแอปพลิเคชันด้วย GCP และ Google Maps ซึ่งแสดงภาพรถไฟทั้งหมดในลอนดอนจากข้อมูล Open Street Map (OSM)

ข้อกำหนดเบื้องต้น

  1. การเข้าถึง BigQuery Sandbox และ Cloud Console
  2. ตรวจสอบว่าคุณได้ตั้งค่าโปรเจ็กต์ GCP และบัญชีสำหรับการเรียกเก็บเงินแล้ว

ขั้นตอนที่ 1 - ค้นหาข้อมูลใน BigQuery

ไปที่ชุดข้อมูลสาธารณะของ BigQuery ชุดข้อมูล "bigquery-public-data" และตาราง geo_openstreetmap.planet_features มีข้อมูล Open Street Map (OSM) ที่มีมูลค่าทั้งโลก รวมถึงฟีเจอร์ที่เป็นไปได้ทั้งหมด ค้นพบฟีเจอร์ทั้งหมดที่สามารถค้นหาได้ใน OSM Wiki รวมถึง amenity, road และ landuse

ใช้ Cloud Shell หรือคอนโซลระบบคลาวด์ของ BigQuery(https://console.cloud.google.com) เพื่อค้นหาตารางโดยใช้ SQL การตัดโค้ดด้านล่างใช้คำสั่ง bq query เพื่อค้นหารถไฟทั้งหมดที่กรองให้เหลือเพียงลอนดอนโดยใช้กรอบล้อมรอบและฟังก์ชัน ST_Intersects()

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

bq query --use_legacy_sql=false \
--destination_table PROJECTID:DATASET.TABLENAME \
--replace \
'SELECT
osm_id, 
feature_type,
(SELECT value
         FROM   unnest(all_tags)
         WHERE  KEY = "name") AS name,
(SELECT value
         FROM   unnest(all_tags)
         WHERE  KEY = "railway") AS railway,
geometry as wkt
FROM   bigquery-public-data.geo_openstreetmap.planet_features
WHERE ("railway") IN (SELECT key FROM unnest(all_tags)) 
    AND ST_Intersects(
    geometry,
ST_MakePolygon(ST_MakeLine(
      [ST_GeogPoint(-0.549370, 51.725346),
      ST_GeogPoint(-0.549370, 51.2529407),
      ST_GeogPoint(0.3110581, 51.25294),
      ST_GeogPoint(0.3110581, 51.725346),
      ST_GeogPoint(-0.549370, 51.725346)]
    ))
   )'

การค้นหาจะแสดงผลดังนี้

  1. ตัวระบุที่ไม่ซ้ำกันสำหรับแต่ละฟีเจอร์ osm_id
  2. feature_type เช่น จุด เส้น ฯลฯ
  3. name ของฟีเจอร์ เช่น Paddington Station
  4. ประเภท railway เช่น หลัก การท่องเที่ยว การทหาร ฯลฯ
  5. wkt ของจุดสนใจ - เรขาคณิตของจุด เส้น หรือรูปหลายเหลี่ยมในรูปแบบ WKT WKT คือคอลัมน์ BigQuery Geography รูปแบบข้อมูลมาตรฐานซึ่งแสดงผลในการค้นหา

หมายเหตุ - คุณแสดงภาพข้อมูลในหน้าแดชบอร์ดจาก BigQuery ได้อย่างรวดเร็วโดยใช้ Looker Studio ในการตรวจสอบผลการค้นหาด้วยสายตาก่อนสร้างชุดข้อมูล

หากต้องการส่งออกตารางเป็นไฟล์ CSV ในที่เก็บข้อมูล Google Cloud Storage ให้ใช้คำสั่ง bqExtract ใน Cloud Shell ดังนี้

bq extract \
--destination_format "CSV" \
--field_delimiter "," \
--print_header=true \
PROJECTID:DATASET.TABLENAME \
gs://BUCKET/FILENAME.csv

หมายเหตุ: คุณทำให้แต่ละขั้นตอนเป็นอัตโนมัติได้โดยใช้ Cloud Scheduler เพื่ออัปเดตข้อมูลเป็นประจำ

ขั้นตอนที่ 2 - สร้างชุดข้อมูลจากไฟล์ CSV

จากนั้นสร้างชุดข้อมูล Google Maps Platform จากเอาต์พุตการค้นหาใน Google Cloud Storage (GCS) เมื่อใช้ Datasets API คุณจะสร้างชุดข้อมูล แล้วอัปโหลดข้อมูลไปยังชุดข้อมูลจากไฟล์ที่โฮสต์บน GCS ได้

ในการเริ่มต้นใช้งาน ให้เปิดใช้ Maps Datasets API ในโปรเจ็กต์ GCP และตรวจสอบเอกสาร API มีไลบรารีของไคลเอ็นต์ Python และ Node.js สำหรับเรียกใช้ Datasets API จากตรรกะในแบ็กเอนด์ของแอป นอกจากนี้ยังมี GUI ชุดข้อมูลสำหรับสร้างชุดข้อมูลด้วยตนเองใน Cloud Console

หลังจากอัปโหลดชุดข้อมูลเสร็จแล้ว คุณจะดูตัวอย่างชุดข้อมูลได้ใน GUI ของชุดข้อมูล

ตัวอย่างชุดข้อมูล

ขั้นตอนที่ 4 - เชื่อมโยงชุดข้อมูลกับรหัสแผนที่

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

ขั้นตอนที่ 5 - สร้างการแสดงภาพแผนที่แอปไคลเอ็นต์

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

คุณสามารถปรับแต่งรูปแบบ เพิ่มเครื่องจัดการเหตุการณ์เพื่อเปลี่ยนรูปแบบแบบไดนามิก และอื่นๆ โดยใช้ Maps JS API ดูตัวอย่างในdocs ด้านล่างเราจะกำหนดฟังก์ชัน setStyle เพื่อสร้างรูปแบบจุดและเส้นสำหรับตัวอย่างนี้โดยอิงตามแอตทริบิวต์ “feature_type”

หมายเหตุ - อย่าลืมใช้v=beta channel เพื่อติดตั้งใช้งาน Maps JS API

function setStyle(params) {
  const map.getDatasetFeatureLayer("your-dataset-id");
  const datasetFeature = params.feature;
  const type = datasetFeature.datasetAttributes["feature_type"];
if (type == "lines") {
           return {
             fillColor: "blue",
             strokeColor: "blue",
             fillOpacity: 0.5,
             strokeWeight: 1,
           }
         } else if (type == "points") {
           return {
             fillColor: "black",
             strokeColor: "black",
             strokeOpacity: 0.5,
             pointRadius: 2,
             fillOpacity: 0.5,
             strokeWeight: 1,
           }
     }
}

หมายเหตุ - อย่าลืมเพิ่มการระบุแหล่งที่มาของชุดข้อมูลลงในแอปแผนที่เสมอ ในการเพิ่มการระบุแหล่งที่มาของ OSM ให้ทำตามตัวอย่างรหัสการระบุแหล่งที่มาในเอกสาร โดยปฏิบัติตามหลักเกณฑ์ของ OSM

โค้ดข้างต้นนี้เมื่อเริ่มต้นในเว็บแอปในหน้าเดียวจะแสดงผลข้อมูลแผนที่ต่อไปนี้

แผนที่รถไฟลอนดอน

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

บทสรุป

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

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

อ่านเพิ่มเติม:

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

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

  • Ryan Bauman ผู้จัดการฝ่ายวิศวกรรมโซลูชัน Google Maps Platform