การแสดงข้อมูลด้วยภาพด้วย BigQuery

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ใช้ Cloud Shell หรือ BigQuery Cloud Console เพื่อค้นหาตารางโดยใช้ 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 แสดงผลในการค้นหา

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

หากต้องการส่งออกตารางไปยังไฟล์ CSV ใน Bucket ของ Google Cloud Storage ให้ใช้คำสั่ง bq extract ใน 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 ในโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของ Google และอ่านเอกสารประกอบ ของ API โดยมีไลบรารีของไคลเอ็นต์ Python และ Node.js สำหรับเรียก Datasets API จากตรรกะในแบ็กเอนด์ของแอป นอกจากนี้ ยังมี Datasets GUI สำหรับสร้าง Datasets ด้วยตนเองใน Cloud Console

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

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

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

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

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

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

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

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,
           }
     }
}

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

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

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

บทสรุป

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

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

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

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

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

  • Ryan Baumann, Google Maps Platform Solutions Engineering Manager