کاشی‌های کیفیت هوا و گرده گیاهان

هدف اصلی

میاناهای برنامه‌سازی کاربردی کیفیت هوا و گرده فرصت‌های عالی برای افزودن اطلاعات آماری بیشتر به سفر یا نقشه در هر مکان مشخصی ارائه می‌دهند. دو روش برای استفاده از داده‌های دردسترس از آن میاناهای برنامه‌سازی کاربردی وجود دارد: نمایه به‌عنوان نوشتار یا کاشی‌های نقشه حرارتی به‌عنوان تصاویر شطرنجی.

هنگام استفاده از نقاط پایانی میاناهای برنامه‌سازی کاربردی کاشی‌های نقشه حرارتی، ممکن است هنگام بار کردن کاشی‌های شطرنجی تکی با چند چالش مواجه شوید، ازجمله:

• چگونه کاشی‌ها را در «نقشه Google» در «وب» بار کنم؟ (همچنین برای رعایت شرایط استفاده از میاناهای برنامه‌سازی کاربردی)
• چگونه تعداد درخواست‌ها را درطول تجربه مدیریت کنیم؟
• چگونه مقادیر کاشی‌ها را بخوانم؟

موارد استفاده نمونه

نمونه‌هایی از موارد استفاده به شما ارائه می‌شود تا سعی کنید به سؤالات بالا پاسخ دهید.

• کیفیت هوا و گردهدر یک منطقه: داده‌های شطرنجی (شرایط کنونی) را در یک یا چند چندضلعی سفارشی به‌صورت کاشی‌های نقشه حرارتی تجسم کنید.
• کیفیت هوا و گرده درطول مسیر: داده‌های شطرنجی (شرایط کنونی) را که روی ایستگاه‌های مسیر نقشه‌برداری شده است به‌صورت کاشی‌های نقشه حرارتی تجسم کنید.

پیاده‌سازی

خواهید دید که چه کاشی‌هایی دردسترس است و چگونه می‌توان آن‌ها را در تجربه وب بار کرد. همچنین خواهید دید که در سناریویی که کاشی‌ها روی نقشه بارگذاری می‌شوند، چه کارهایی می‌توان برای مدیریت تعداد درخواست‌ها انجام داد. درنهایت، نحوه خواندن کاشی‌ها به شما نشان داده می‌شود.

کاشی‌های نقشه حرارتی دردسترس براساس نوع

Air Quality API

- UAQI_RED_GREEN (UAQI، پالت قرمز-سبز): پالت قرمز-سبز «شاخص جهانی کیفیت هوا».
- UAQI_INDIGO_PERSIAN (UAQI، پالت نیلی-ایرانی): «شاخص کیفیت هوای جهانی» پالت نیلی-ایرانی.
- PM25_INDIGO_PERSIAN: PM2.5 index indigo-persian palette.
- GBR_DEFRA: پالت رنگ «شاخص کیفیت هوای روزانه» (پادشاهی متحد).
- DEU_UBA: پالت رنگی «شاخص کیفیت هوای محلی آلمان».
- CAN_EC: پالت رنگ شاخص سلامتی کیفیت هوا در کانادا.
- FRA_ATMO: پالت رنگ شاخص کیفیت هوای فرانسه.
- US_AQI: پالت رنگ «شاخص کیفیت هوا» در ایالات متحده.

Pollen API

- TREE_UP: نوع نقشه حرارتی نشان‌دهنده نقشه گرافیکی شاخص درخت خواهد بود.
- GRASS_UPI: نوع نقشه حرارتی نشان‌دهنده نقشه گرافیکی شاخص چمن خواهد بود.
- WEED_UPI: نوع نقشه حرارتی نشان‌دهنده نقشه گرافیکی شاخص علف هرز خواهد بود.

نمایش کاشی‌های نقشه حرارتی در وب

کاشی‌ها را بار کنید و ماسک برداری اعمال کنید تا فقط نواحی موردنظر از نمای نقشه نمایش داده شود.

درحال بار کردن کاشی‌ها

• از Maps JavaScript API برای بار کردن نقشه پایه Google و از کتابخانه deckgl برای آماده‌سازی بار کردن تصاویر کاشی شطرنجی استفاده کنید.
• از deck.gl TileLayer برای بار کردن کاشی‌های کیفیت هوا نقشه حرارتی استفاده کنید. این کار برچسب‌های نقشه پایه Google Maps را در بالای کاشی‌های نقشه حرارتی نمایش می‌دهد (برخلاف پوشش‌های سفارشی جاوا اسکریپت Maps)

import { TileLayer } from "deck.gl";
import { GoogleMapsOverlay } from "@deck.gl/google-maps";

// const TileLayer = deck.TileLayer;
// const GoogleMapsOverlay = deck.GoogleMapsOverlay;

// Initialize and add the map
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40, lng: -110 },
    zoom: 4,
  });

  const apiKey = 'YOUR_API_KEY';
 const airqualityType = 'UAQI_RED_GREEN' // AirQuality API heatmap type
  const deckOverlay = new GoogleMapsOverlay({
    layers: [
       // Heatmap Tiles layer
new TileLayer({
    id: 'heatmap-tiles',
    data: 'https://airquality.googleapis.com/v1/mapTypes/'+ heatmapType + +'/heatmapTiles/{z}/{x}/{y}?key=' + apiKey,
...
 })
    ],
  });

  deckOverlay.setMap(map);
}

window.initMap = initMap;

درحال اعمال ماسک برداری

می‌توانید هر بخشی از کاشی‌های نقشه حرارتی را به‌صورت دیداری پنهان یا نمایش دهید. مهم: باید داده‌هایی را که برای ایجاد ماسک برداری اعمال‌شده بر کاشی‌های نقشه حرارتی استفاده می‌شود به‌دست آورید.

• در یک منطقه:

از GeoJson deck.gl برای ایجاد «ماسک» روی Air Quality TileLayer استفاده کنید.

مثال زیر از یک geojson چندضلعی از فرانسه استفاده می‌کند

// geojson sample

{  "type": "Feature",
  "geometry": {
    "type": "MultiPolygon",
    "coordinates": [[[[-54.111527,2.11427],...[-54.194491,2.163073]]]]
  },
  "properties": {
    "name": "France"
  }
}

در اینجا مرجعی برای پیاده‌سازی deckgl آورده شده است:

  // Loaded layers in maps overlay
  const deckOverlay = new GoogleMapsOverlay({ layers: layers });
  const MaskExtension = deck.MaskExtension; // or import extension
  ...

  // As part of object containing the different layers
  const layers = [
    // Masking layer
  new GeoJsonLayer({
    id: 'country-vector',
    operation: 'mask',
    data: "geojson.json", // <-- any custom geometry
  })
  ...
  ...

  // Heatmap Tiles layer
  new TileLayer({
      id: 'heatmap-tiles',
      maskId: 'country-vector', // <-- same as mask id
    extensions: [new MaskExtension()],  // <-- enable mask extension
  ...
  })
  ]

• درطول مسیر: از deck.gl با TripsLayer آن برای ایجاد ماسک روی Air Quality TileLayer استفاده کنید

کاشی نقشه حرارتی کیفیت هوا روی سفر

مدیریت درخواست‌های میانای برنامه‌سازی کاربردی و هزینه

اگرچه رفتار پیش‌فرض مرورگر معمولاً این است که همه کاشی‌های بارشده را در فضای ذخیره‌سازی محلی (در همان جلسه) ذخیره کند، می‌توانید آن را بیشتر بهینه‌سازی کنید:

• محدود کردن ناحیه بارگیری: چارگوش محدودکننده‌ای (به رنگ قرمز) ایجاد کنید و آن را به لایه اختصاص دهید، فقط کاشی‌های نقشه حرارتی (به رنگ آبی) که چارگوش محدودکننده را پوشش می‌دهند در هر سطح بزرگ‌نمایی بارگیری خواهند شد

چارگوش محصورکننده (به‌رنگ قرمز)، کاشی‌های نقشه حرارتی (به‌رنگ آبی)

 // Heatmap Tile layer
 new TileLayer({
    id: 'heatmap-tiles',
    extent: [minX, minY, maxX, maxY] // bounding box: southwest lat, southwest lng, northeast lat, northeast lng
    ...
 })

• اندازه کاشی نمایشگر دیداری را طوری تنظیم کنید که کل ناحیه نمایش را در هر سطح بزرگ‌نمایی پوشش دهد؛ توصیه می‌شود: بین ۲۵۶ تا ۱۰۲۴.

  مهم: کاشی‌های API در وضوح ۲۵۶×۲۵۶ باقی می‌مانند اما تنظیم نمایش دیداری به شما امکان می‌دهد تعداد درخواست‌های کاشی را برای پوشش دادن کل «نمای نقشه» افزایش/کاهش دهید

  (مطمئن شوید که با minZoom و maxZoom «نقشه Google» کار می‌کند، یعنی: tilesize:1024 کاشی‌ها در بزرگ‌نمایی ۰ یا ۱ بار نمی‌شوند).

نمای با کاشی‌های ۲۵۶×۲۵۶ پیکسل دربرابر ۵۱۲×۵۱۲ پیکسل

    // Heatmap Tile layer
    new TileLayer({
        id: 'heatmap-tiles',
        tilesize:256, // <-- change to 512 for instance
        ...
    })

نکته: تنظیمات پردازش کاشی لایه را با refinementStrategy:'no-overlap' به‌جای 'best-available' پالایش کنید تا از تداخل بصری بین کاشی‌ها جلوگیری شود.

خواندن مقادیر پیکسل

هشدار: می‌توانید کاشی‌های نقشه حرارتی یا هر مقداری را که از پیکسل‌های تکی موجود در کاشی‌های Air Quality API یا Pollen API خوانده می‌شود به‌مدت ۱ ساعت (نه به‌طور نامحدود) بخوانید و ذخیره موقت کنید. برای اعتبارسنجی پیاده‌سازی‌تان، به شرایط خاص API که در بخش «۱۶ ای‌پی‌آی کیفیت هوا» شرح داده شده است مراجعه کنید

برای نمایش مقدار مربوطه در مقیاس رنگ

می‌توانید از کتابخانه Luma.gl و روش readPixelsToArray آن در رویداد onClick که به‌عنوان prop به لایه deck.gl اختصاص داده شده است استفاده کنید.

مقدار پیکسل: rgba(128,0,0,255)

کم زیاد

  // Uint8Array pixel sample
  import { readPixelsToArray } from "@luma.gl/core";
  ...

  // assign on the TileLayer
  new TileLayer({
      id: 'heatmap-tiles',
  ...
    onClick: ({
    bitmap,
    layer
  }) => {
    if (bitmap) {
      const pixel = readPixelsToArray(layer.props.image, {
        sourceX: bitmap.pixel[0],
        sourceY: bitmap.pixel[1],
        sourceWidth: 1,
        sourceHeight: 1
      });
      // console.log("color picked:"+ pixel);
    }
  }
  })

نتیجه‌گیری

متوجه شدید که چگونه نقاط پایانی API کاشی‌های نقشه حرارتی کیفیت هوا و گرده می‌تواند:

• در «نقشه Google» در «وب» بارگذاری شده است و همچنین با شرایط خدمات مطابقت دارد
• بهینه‌سازی‌شده برای مطابقت با مورد استفاده شما
• خواندن مقادیر کاشی‌ها

کنش‌های بعدی

مطالعه بیشتر پیشنهادی:

• آگاهی از کیفیت هوا برای «مکان‌ها» بااستفاده از Air Quality API

همیاران

نویسندگان اصلی:

توماس آنگلارت | مهندس راه‌حل‌های «پلاتفرم Google Maps»