جودة الهواء وحبوب اللقاح في المناطق والمسارات

الهدف

تقدّم واجهتا برمجة تطبيقات جودة الهواء وPollen فرصًا رائعة لإضافة المزيد من الإحصاءات عن رحلة أو خريطة في أي موقع جغرافي محدّد. هناك طريقتان لاستهلاك البيانات المتاحة من واجهات برمجة التطبيقات هذه، وهما الفهرسة كنص أو مربّعات خريطة التمثيل اللوني كصور نقطية.

alt_text

أثناء استخدام نقاط نهاية واجهات برمجة تطبيقات مربعات خريطة التمثيل اللوني، قد تواجه صعوبات أثناء تحميل المربّعات الفردية للصور النقطية، مثل:

  • كيف أحمّل المربّعات على خريطة Google على الويب؟ (أيضًا للالتزام ببنود استخدام واجهات برمجة التطبيقات)
  • كيف يمكنني إدارة عدد الطلبات خلال التجربة؟
  • كيف يمكن قراءة قيم المربعات؟

أمثلة لحالات الاستخدام

سيتم إطلاعك على حالات استخدام نموذجية لمحاولة الإجابة عن الأسئلة أعلاه.

التنفيذ

ستتعرَّف على المربّعات المتاحة وكيفية تحميلها في تجربة الويب. ستتعرف أيضًا على ما يمكن فعله لإدارة عدد الطلبات في سيناريو يتم فيه تحميل المربعات على الخريطة. أخيرًا، سيتم تعريفك بكيفية قراءة المربعات.

مربّعات خريطة التمثيل اللوني المتوفّرة حسب الأنواع

واجهة برمجة تطبيقات جودة الهواء

- UAQI_RED_GREEN (UAQI، لوحة ألوان حمراء وأخضر): مؤشر جودة الهواء العالمي باللون الأحمر والأخضر
- UAQI_INDIGO_PERSIAN (UAQI، لوحة ألوان فارسية نيلية): لوحة فارسية لمؤشر جودة الهواء العالمي.
- PM25_INDIGO_PERSIAN: لوحة ألوان فارسية ونيلية اللون من PM2.5
- GBR_DEFRA: لوحة ألوان مؤشر جودة الهواء اليومية (المملكة المتحدة).
- DEU_UBA: لوحة ألوان مؤشر جودة الهواء المحلية في ألمانيا.
- CAN_EC: لوحة ألوان مؤشر جودة الهواء في كندا.
- FRA_ATMO: لوحة ألوان مؤشر جودة الهواء في فرنسا.
- US_AQI: لوحة ألوان مؤشر جودة الهواء في الولايات المتحدة.

واجهة برمجة تطبيقات Pollen

- TREE_UP: سيمثّل نوع خريطة التمثيل اللوني خريطة رسومية لفهرس الشجر.
- GRASS_UPI: سيمثل نوع خريطة التمثيل اللوني خريطة رسومية لمؤشر العشب.
- WEED_UPI: سيمثل نوع خريطة التمثيل اللوني خريطة بيانية لفهرس الأعشاب الضارة.

عرض مربّعات خريطة التمثيل اللوني في الويب

قم بتحميل المربعات وتطبيق قناع متجه لعرض المناطق المطلوبة فقط من إطار عرض الخريطة.

جارٍ تحميل المربّعات 


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 لإنشاء قناع على TileLayer لجودة الهواء.

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 لإنشاء قناع فوق TileLayer لجودة الهواء.

مربّع خريطة التمثيل اللوني لجودة الهواء خلال رحلة

alt_text

إدارة طلبات البيانات من واجهة برمجة التطبيقات والتكلفة

على الرغم من أن السلوك التلقائي للمتصفّح هو عادةً تخزين جميع المربّعات التي تم تحميلها في مساحة التخزين على الجهاز (ضمن الجلسة نفسها)، يمكنك إجراء المزيد من التحسينات:

  • تقييد منطقة التحميل: أنشئ مربّعًا حدودًا (باللون الأحمر) وعيّنه للطبقة، وسيتم تحميل مربّعات خريطة التمثيل اللوني فقط (باللون الأزرق) التي تغطي مربع المحيط على أي مستوى تكبير أو تصغير محدد

صندوق ربط (باللون الأحمر)، مربّعات خريطة تمثيل لوني (باللون الأزرق)

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
    ...
 })
  • تعيين حجم تجانب العرض المرئي لتغطية إطار العرض بالكامل في أي مستوى تكبير/تصغير معيّن؛ القيمة المقترَحة: بين 256 و1024.

    هام: تظل مربعات واجهات برمجة التطبيقات بدقة 256x256 ولكن ضبط العرض المرئي سيسمح لك بزيادة/خفض عدد طلبات المربعات لتغطية إطار عرض الخريطة بالكامل

    (تأكَّد من توافقه مع السمتَين minZoom وmaxZoom لـ "خرائط Google"، أي: tilesize:1024 لن يتم تحميل المربّعات عند التكبير 0 أو 1).

إطار عرض بمربّعات مقاس 256×256 بكسل مقابل 512×512 بكسل

alt_text alt_text 



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

قراءة قيم البكسل

لعرض القيمة المقابلة على تدرُّج لون

يمكنك استخدام مكتبة Luma.gl وطريقة readPixelsToArray الخاصة بها عند وجود حدث onClick يتم تعيينه كعنصر أساس لطبقة deck.gl.

قيمة البكسل: نموذج أحمر أخضر أزرق(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);
    }
  }
  })

الخاتمة

لقد اكتشفت ما يلي:

  • المحملة على خريطة Google في الويب أيضًا مع التأكد من الالتزام ببنود الاستخدام
  • محسّنة لتتوافق مع حالة استخدامك
  • قراءة قيم المربعات

الإجراءات التالية

قراءة إضافية مقترَحة:

المساهمون

المؤلفون الرئيسيون:

Thomas Anglaret | مهندس حلول "منصة خرائط Google"