این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

کیفیت هوا و میزان گرده در مناطق و مسیرهای مختلف

هدف

رابط‌های برنامه‌نویسی کاربردی (API) مربوط به کیفیت هوا و گرده ، فرصت‌های بسیار خوبی را برای افزودن بینش‌های بیشتر به یک سفر یا نقشه در هر مکان مشخص ارائه می‌دهند. دو راه برای استفاده از داده‌های موجود از این APIها وجود دارد: فهرست‌بندی به صورت متن یا کاشی‌های نقشه حرارتی به صورت تصاویر رستری.

alt_text

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

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

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

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

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

پیاده‌سازی

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

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

کیفیت هوا (Air Quality API)

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

API گرده

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

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

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

بارگیری کاشی ها

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

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;

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

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

در یک منطقه:

از deck.gl GeoJson برای ایجاد ماسک روی لایه کاشی کیفیت هوا استفاده کنید.

alt_text

مثال زیر از یک 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 آن برای ایجاد ماسک روی لایه کاشی کیفیت هوا استفاده کنید.

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

alt_text

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

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

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

جعبه مرزی (به رنگ قرمز)، کاشی‌های نقشه حرارتی (به رنگ آبی)

alt_text

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

اندازه کاشی نمایش بصری را طوری تنظیم کنید که کل نمای دید را در هر سطح بزرگنمایی مشخص پوشش دهد؛ توصیه می‌شود: بین ۲۵۶ تا ۱۰۲۴.
مهم: کاشی‌های API در وضوح ۲۵۶x۲۵۶ باقی می‌مانند، اما تنظیم نمایش بصری به شما امکان می‌دهد تعداد درخواست‌های کاشی را برای پوشش کل نقشه افزایش/کاهش دهید.
(مطمئن شوید که با minZoom و maxZoom نقشه گوگل کار می‌کند، یعنی: tilesize:1024 کاشی‌ها را در زوم ۰ یا ۱ بارگذاری نمی‌کند).

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

alt_text

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

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

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

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

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

alt_text

کم alt_text بالا

  // 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 مربوط به کاشی‌های نقشه حرارتی کیفیت هوا و گرده می‌توانند:

روی نقشه گوگل در وب بارگذاری شده و همچنین مطمئن شوید که با شرایط استفاده مطابقت دارد
بهینه شده برای مطابقت با مورد استفاده شما
مقادیر کاشی‌ها را بخوانید

اقدامات بعدی

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

آگاهی از کیفیت هوا برای مکان‌هایی که از API کیفیت هوا استفاده می‌کنند

مشارکت‌کنندگان

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

توماس انگلارت | مهندس راهکارهای پلتفرم نقشه‌های گوگل