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

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

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

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

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

หากต้องการส่งออกตารางไปยังไฟล์ CSV ในที่เก็บข้อมูล 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 จากตรรกะในแบ็กเอนด์ของแอป นอกจากนี้ ยังมี GUI ของชุดข้อมูลสำหรับสร้างชุดข้อมูลด้วยตนเองใน Cloud Console

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

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

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

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

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

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

คุณสามารถปรับแต่งสไตล์ เพิ่มตัวแฮนเดิลเหตุการณ์เพื่อเปลี่ยนสไตล์แบบไดนามิก และอื่นๆ โดยใช้ Maps JS API ดูตัวอย่างในเอกสาร ด้านล่างนี้เราจะกำหนดฟังก์ชัน 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