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

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

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

อย่างไรก็ตาม นักพัฒนาแอปอาจประสบปัญหาในการสร้างการแสดงภาพข้อมูลแผนที่ขนาดใหญ่ที่มีประสิทธิภาพและมอบประสบการณ์การใช้งานที่ยอดเยี่ยมให้แก่ผู้ใช้ ต้องโหลดข้อมูลขนาดใหญ่ลงในหน่วยความจําฝั่งไคลเอ็นต์ ซึ่งทําให้เวลาในการโหลดแผนที่ครั้งแรกช้า การแสดงภาพต้องมีประสิทธิภาพบนอุปกรณ์ทุกเครื่อง รวมถึงโทรศัพท์มือถือรุ่นล่างที่มีข้อจำกัดด้านหน่วยความจำและ 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 ในการส่งออก 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 SDK บนเว็บหรืออุปกรณ์เคลื่อนที่
    2. ไทล์แผนที่เป็นระบบการจัดทำดัชนีตามการซูมที่ให้วิธีโหลดข้อมูลไปยังแอปภาพอย่างมีประสิทธิภาพมากขึ้น
    3. แผนที่อาจไม่แสดงองค์ประกอบที่หนาแน่นหรือซับซ้อนเมื่อซูมระดับต่ำ เมื่อผู้ใช้ซูมออกไปยังรัฐหรือประเทศ (เช่น z5-z12) แผนที่อาจดูแตกต่างจากเมื่อซูมเข้าเมืองหรือย่าน (เช่น z13-z18)

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

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

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

  1. สิทธิ์เข้าถึงแซนด์บ็อกซ์ BigQuery และ 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(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 ให้ใช้คําสั่ง 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 ในโปรเจ็กต์ GCP และอ่านเอกสาร API มีไลบรารีของไคลเอ็นต์ Python และ Node.js สําหรับการเรียก Datasets API จากตรรกะในแบ็กเอนด์ของแอป นอกจากนี้ ยังมี GUI ของชุดข้อมูลสําหรับสร้างชุดข้อมูลด้วยตนเองใน Cloud Console

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

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

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

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

ขั้นตอนที่ 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,
           }
     }
}

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

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

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

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

บทสรุป

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

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

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

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

ผู้แต่งหลัก

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