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

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

กรณีการใช้งานและมูลค่าเพิ่ม

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

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

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

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

แสดงข้อมูลคุณภาพอากาศตั้งแต่เนิ่นๆ ในประสบการณ์การใช้งาน

คุณแสดงข้อมูล Air Quality API ได้ 2 วิธีหลักๆ ดังนี้

แสดงข้อมูล Air Quality API บนหมุดสถานที่

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


แสดงข้อมูล Air Quality API เพิ่มเติมเมื่อเลือกหมุด:

  • ความหมายของ AQI สากล / 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)

แสดงเลเยอร์ฮีตแมป Air Quality API บนแผนที่

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

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

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

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

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

  • UAQI_RED_GREEN - ชุดสีแดง-เขียวของดัชนีคุณภาพอากาศสากล
  • UAQI_INDIGO_PERSIAN - ชุดสีคราม-เปอร์เซียของดัชนีคุณภาพอากาศสากล
  • 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 (New) API: 1 การค้นหาในบริเวณใกล้เคียงต่อสถานที่ 20 แห่งที่แสดง การเรียกเก็บเงินจะแตกต่างกันไปตามข้อมูลสถานที่ที่เป็นส่วนหนึ่งของการตอบสนองการค้นหา

    บทสรุป

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

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

    อ่านเพิ่มเติมที่แนะนำ

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

    Google เป็นผู้ดูแลบทความนี้ ผู้ร่วมให้ข้อมูลต่อไปนี้เป็นผู้เขียนบทความนี้ในตอนแรก
    ผู้เขียนหลัก

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