แสดงข้อมูลด้วย 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. หากข้อมูลมีขนาดใหญ่กว่า 5 MB และอัปเดตไม่เร็วกว่า 1 ครั้งต่อชั่วโมง ให้พิจารณาใช้สถาปัตยกรรม Datasets API ในเอกสารนี้
      1. ชุดข้อมูลรองรับไฟล์ขนาดไม่เกิน 350 MB
      2. หากข้อมูลมีขนาดใหญ่กว่า 350 MB ให้ลองตัดแต่งหรือลดความซับซ้อนของข้อมูลเรขาคณิตในไฟล์ต้นฉบับก่อนส่งไปยังชุดข้อมูล (ดูการตัดทอนข้อมูลด้านล่าง)
  2. สคีมาและรูปแบบ
    1. ตรวจสอบว่าข้อมูลมีพร็อพเพอร์ตี้รหัสที่ไม่ซ้ำกันทั่วโลกสำหรับแต่ละฟีเจอร์ รหัสที่ไม่ซ้ำกันจะช่วยให้คุณเลือกและกำหนดสไตล์ของฟีเจอร์บางอย่างหรือผูกข้อมูลกับสถานที่หนึ่งๆ เพื่อแสดงภาพได้ เช่น การจัดรูปแบบฟีเจอร์ที่เลือกในเหตุการณ์ "คลิก" ของผู้ใช้
    2. จัดรูปแบบข้อมูลเป็น CSV หรือ GeoJSON ตามข้อกำหนดของ Datasets API พร้อมด้วยชื่อคอลัมน์ ประเภทข้อมูล และประเภทของออบเจ็กต์ GeoJSON ที่ถูกต้อง
    3. เพื่อให้สร้างชุดข้อมูลจาก BigQuery ได้อย่างง่ายดาย ให้สร้างคอลัมน์ชื่อ wkt ในการส่งออก CSV ของ SQL ชุดข้อมูลรองรับการนำเข้าเรขาคณิตจาก 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 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 Cloud Console(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 รูปแบบมาตรฐานที่แสดงผลในการค้นหา

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

หากต้องการส่งออกตารางเป็นไฟล์ CSV ในที่เก็บข้อมูล Google Cloud Storage ให้ใช้คำสั่ง bqPLURAL ใน 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 - เชื่อมโยงชุดข้อมูลกับรหัสแผนที่

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

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

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

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

หมายเหตุ - โปรดใช้เวอร์ชัน v=beta สําหรับการใช้งาน 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 การใช้สถาปัตยกรรมอ้างอิงนี้ช่วยให้คุณสร้างแอปการแสดงภาพข้อมูลตำแหน่งจากข้อมูลใดก็ได้ใน BigQuery ของ GCP ที่มีประสิทธิภาพบนอุปกรณ์ใดก็ได้โดยใช้ Google Maps Datasets API

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

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

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

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

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