การรับรู้คุณภาพอากาศสำหรับ Places โดยใช้ Air Quality API

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

Use Case และคุณค่าเพิ่ม

สัญญาณ Air Quality API สามารถใช้กับประสบการณ์การค้นหาที่หลากหลาย เช่น เมื่อผู้ใช้กําลังมองหาสถานที่ที่จะไป Air Quality API มีบริการต่อไปนี้

  • เรียลไทม์ * และข้อมูลประวัติ - ข้อมูลสดใหม่ที่ถูกต้องซึ่งแสดงสถานะปัจจุบัน รวมถึงข้อมูลย้อนเวลาภายในกรอบเวลา 30 วันในความละเอียดรายชั่วโมง (* ภาพรวมคุณภาพอากาศภายนอกอาคารรายชั่วโมง)
  • ข้อมูลทั่วโลกและข้อมูลระดับท้องถิ่น - ครอบคลุมพื้นที่ทั้งหมดในกว่า 100 ประเทศ แต่ข้อมูล Air Quality API มีการแปลเป็นภาษาท้องถิ่นอย่างละเอียด (สูงสุด 500 เมตร) ซึ่งจะเป็นสัญญาณสําคัญสําหรับผู้ใช้ในการเปรียบเทียบและตัดสินใจเลือกสถานที่ที่เหมาะสมที่สุด

คุณภาพอากาศอาจแตกต่างกันอย่างมากแม้ในสถานที่ใกล้เคียง

ตัวอย่างคำแนะนำแบบทีละขั้น

แสดงข้อมูลคุณภาพอากาศตั้งแต่เนิ่นๆ

การแสดงข้อมูล Air Quality API มีอยู่ 2 วิธีหลักๆ ดังนี้

แสดงข้อมูล Air Quality API ในหมุดตำแหน่ง

  • เลือกดัชนีตำแหน่ง: AQI สากลหรือ AQI ในพื้นที่ (มีดัชนีคุณภาพอากาศ (AQI) ที่แตกต่างกันสูงสุด 70 รายการ) ดัชนีคุณภาพอากาศ (AQI) คือมาตราส่วนที่ใช้จัดหมวดหมู่ระดับคุณภาพอากาศที่แตกต่างกันในแต่ละประเทศ เช่น EPA ของสหรัฐอเมริกา โดยอิงตามวิธีการคํานวณ แหล่งข้อมูล และวัตถุประสงค์ที่กําหนดไว้
  • เริ่มแสดงค่าหลักของ Air Quality API และโค้ดสีได้โดยตรงจากประสบการณ์การค้นหาสถานที่

การแสดงผลเริ่มต้นอาจมีเฉพาะรหัสสีเท่านั้น


แสดงข้อมูลเพิ่มเติมเกี่ยวกับ Air Quality API เมื่อเลือกหมุด

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

ตัวอย่างการแสดงส่วนคุณภาพอากาศ

การตอบสนองเกี่ยวกับคุณภาพอากาศ

{
    "dateTime": "2023-08-09T10:00:00Z",
    "regionCode": "fr",
    "indexes": [
       {
            "code": "uaqi",
            "displayName": "Universal AQI",
            "aqi": 76,
            "aqiDisplay": "76",
            "color": {
                "red": 0.4117647,
                "green": 0.77254903,
                "blue": 0.20392157
            },
            "category": "Good air quality",
            "dominantPollutant": "pm10"
        },
       …
    ],
    "pollutants": [
       {
            "code": "co",
            "displayName": "CO",
            "fullName": "Carbon monoxide",
            "concentration": {
                "value": 95.18,
                "units": "PARTS_PER_BILLION"
            }...
        },
       …
    ],
    "healthRecommendations": -{
        "generalPopulation": "With this level of air quality, you have no limitations. Enjoy the outdoors!",
        "elderly": "If you start to feel respiratory discomfort such as coughing or breathing difficulties, consider red ...",
        "lungDiseasePopulation": …
    }
}
  • หรือคุณจะค้นหาข้อมูลคุณภาพอากาศเมื่อมีการโต้ตอบกับสถานที่หนึ่งๆ เท่านั้นก็ได้

  • คุณสามารถใช้ดัชนี Air Quality API เพื่อกรองสถานที่ใกล้เคียง เช่น หากกำลังมองหาสวนสาธารณะในพื้นที่ของคุณ ระบบจะแสดงเฉพาะสวนสาธารณะที่มีคุณภาพอากาศดี

การตอบสนองเกี่ยวกับคุณภาพอากาศ

...
"color":{
  "red": 0.9490196,
  "green": 0.98039216,
  "blue": 0.019607844
}
...
 แปลงเป็น RGB 
  var red = parseInt(colorResponse.red*255)|| 1;
  var green = parseInt(colorResponse.green*255)|| 1;
  var blue = parseInt(colorResponse.blue*255)|| 1; 
  // --> output rgb(241,250,5)

แสดงเลเยอร์แผนที่ความหนาแน่นของ API คุณภาพอากาศบนแผนที่

ไทล์สีของแผนที่ความร้อนเป็นวิธีที่ยอดเยี่ยมในการดำเนินการต่อไปนี้

  • เพื่อแสดงภาพรวมพื้นที่ขนาดใหญ่
  • เพื่อแสดงความแตกต่างเล็กๆ น้อยๆ ภายในพื้นที่นั้นอย่างรวดเร็ว

ใช้ Maps JavaScript API กับ ImateMapType เพื่อแสดงชิ้นส่วนแต่ละชิ้นที่จำเป็นต้องใช้ให้ครอบคลุมวิวพอร์ตทั้งหมดของแผนที่ Google ของคุณ ไทล์แผนที่ความร้อนจะรีเฟรชเมื่อผู้ใช้โต้ตอบกับแผนที่ด้วยการเลื่อน ซูม หรือเปลี่ยนตำแหน่ง

โปรดทราบว่าค่าระดับการซูมที่อนุญาตมีได้สูงสุด 16
เลเยอร์แผนที่ความร้อนของ Air Quality API อาจหายไปเมื่อทำการค้นหาในพื้นที่ใกล้เคียง

คุณสามารถเลือกประเภทแผนที่ความหนาแน่นภายในชุดดัชนีคุณภาพอากาศแบบจำกัด ดังนี้

  • UAQI_RED_GREEN - ชุดสีแดง/เขียวสำหรับดัชนีคุณภาพอากาศสากล
  • UAQI_INDIGO_PERSIAN - Universal Air Quality Index ชุดสีคราม-เปอร์เซีย
  • PM25_INDIGO_PERSIAN - ชุดสีคราม-เปอร์เซียของ PM2.5
  • GBR_DEFRA - ชุดสีของดัชนีคุณภาพอากาศรายวัน (สหราชอาณาจักร)
  • DEU_UBA - ชุดสีดัชนีคุณภาพอากาศในพื้นที่ของเยอรมนี
  • CAN_EC - จานสีดัชนีคุณภาพอากาศและสุขภาพของแคนาดา
  • FRA_ATMO - ชุดสีดัชนีคุณภาพอากาศของฝรั่งเศส
  • US_AQI - ชุดสีดัชนีคุณภาพอากาศของสหรัฐอเมริกา

    • อย่าลืมระบุรูปแบบสีเพื่อให้ผู้ใช้เข้าใจค่าและการจัดอันดับสีของค่านั้นๆ

    • สเกลการไล่ระดับสี UAQI (0-100): แย่ / ยอดเยี่ยม

    ข้อมูลโค้ด CSS ของพาเลตสี 

    .gradient-scale { 
background: linear-gradient(to right, 
    rgb(99, 20, 161) 0%, /* purple */
    rgb(149, 0, 25) 20%, /* red */
    rgb(248, 47, 21) 40%, /* orange */
    rgb(255, 248, 35) 60%, /* yellow */
    rgb(34,163,120) 80%, /* steelblue */
    rgb(255,255,255) 100% /* white */
   );
}

    • สีทึบเพื่อแสดงจุดสำคัญในมาตราส่วน UAQI (0-100) ดังนี้ แย่ / ดีมาก

    จำนวนคำค้นหาและค่าใช้จ่ายที่เกี่ยวข้อง

    • Maps JavaScript API: แผนที่ 1 รายการขณะโหลดประสบการณ์นี้
    • Air Quality API:
      • 1 ข้อความค้นหาทุกที่ (ทั้งหมดในการโหลดแผนที่หรือเฉพาะการเลือกของผู้ใช้)
      • เลเยอร์ของชิ้นส่วนแผนที่ความหนาแน่น: ภาพของไทล์ทุกภาพมีขนาด 256*256 พิกเซล และเพื่อให้ครอบคลุมแผนที่มาตรฐานที่แสดงบนอุปกรณ์เคลื่อนที่หรือเว็บ คุณต้องมีการ์ด 12-14 ชิ้น ระบบจะนับการ์ดแต่ละใบที่ดึงมาเป็นหน่วย SKU 1 หน่วย
    • Nearby Search (ใหม่) API: แสดงการค้นหา 1 รายการในทุกๆ 20 รายการ การเรียกเก็บเงินที่แตกต่างกันตามข้อมูลสถานที่ที่เป็นส่วนหนึ่งของคำตอบการค้นหา

    บทสรุป

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

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

    แหล่งข้อมูลอื่นๆ ที่แนะนํา

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

    Google เป็นผู้ดูแลบทความนี้ ผู้เขียนเนื้อหาต้นฉบับมีดังนี้
    ผู้แต่งหลัก:

    Thomas Anglaret | วิศวกรโซลูชัน