Bu sayfa, Cloud Translation API ile çevrilmiştir.

Bölgelerdeki ve rotalardaki hava kalitesi ve polen durumu

Hedef

Hava Kalitesi ve Polen API'leri, belirli bir konumdaki geziye veya haritaya daha fazla bilgi eklemek için harika fırsatlar sunar. Bu API'lerden elde edilen verileri kullanmanın iki yolu vardır: metin olarak indeksleme veya raster resim olarak ısı haritası döşemeleri.

alt_text

Isı haritası döşemeleri API uç noktalarını kullanırken tek tek raster döşemeleri yüklerken birkaç zorlukla karşılaşabilirsiniz. Örneğin:

Web'de Google Haritası'ndaki döşemeler nasıl yüklenir? (Ayrıca API'lerin Kullanım Şartları'na da uymak için)
Deneme sırasında istek sayısını nasıl yönetebilirim?
Kart değerleri nasıl okunur?

Örnek kullanım alanları

Yukarıdaki soruları yanıtlamaya çalışmak için örnek kullanım alanları gösterilir.

Bir bölgedeki hava kalitesi ve polen: Bir veya daha fazla özel poligonun içindeki ısı haritası döşemeleri (mevcut koşullar) raster verilerini görselleştirin.
Rota boyunca hava kalitesi ve polen : Rotadaki ara noktalara eşlenmiş ısı haritası döşemelerini (mevcut koşullar) görselleştirin.

Uygulama

Hangi kutuların kullanılabildiğini ve bunların web deneyimine nasıl yüklenebileceğini öğreneceksiniz. Ayrıca, döşemelerin haritaya yüklendiği bir senaryoda istek sayısını yönetmek için neler yapılabileceğini de göreceksiniz. Son olarak, kutucukların nasıl okunacağı gösterilir.

Türlere göre kullanılabilir ısı haritası döşemeleri

Air Quality API

- UAQI_RED_GREEN (UAQI, kırmızı-yeşil palet): Evrensel Hava Kalitesi İndeksi kırmızı-yeşil paleti.
- UAQI_INDIGO_PERSIAN (UAQI, indigo-persian palette): Universal Air Quality Index indigo-persian palette.
- PM25_INDIGO_PERSIAN: PM2.5 index indigo-persian palette.
- GBR_DEFRA: Günlük hava kalitesi indeksi (Birleşik Krallık) renk paleti.
- DEU_UBA: Almanya'daki yerel hava kalitesi indeksi renk paleti.
- CAN_EC: Kanada Hava Kalitesi Sağlık İndeksi renk paleti.
- FRA_ATMO: Fransa Hava Kalitesi İndeksi renk paleti.
- US_AQI: ABD hava kalitesi indeksi renk paleti.

Pollen API

- TREE_UP: Isı haritası türü, ağaç dizini grafik haritasını temsil eder.
- GRASS_UPI: Isı haritası türü, çim indeksi grafik haritasını temsil eder.
- WEED_UPI: Isı haritası türü, yabani ot endeksini grafiksel olarak gösterir.

Web'de ısı haritası kutularını görüntüleme

Parçaları yükleyin ve yalnızca haritanın görüntü alanının istenen kısımlarını göstermek için vektör maskesi uygulayın.

Kartlar yükleniyor

Google temel haritasını yüklemek için Maps JavaScript API'yi kullanın ve raster karo resimlerinin yüklenmesine hazırlanmak için deckgl kitaplığını yükleyin.
Hava Kalitesi ısı haritası döşemelerini yüklemek için deck.gl TileLayer'ı kullanın. Bu, ısı haritası parçalarının üzerinde Google Haritalar temel harita etiketlerini gösterir (Haritalar JavaScript özel yer paylaşımlarından farklı olarak).

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;

Vektör maskesi uygulama

Isı haritası kutularının herhangi bir bölümünü görsel olarak gizleyebilir veya gösterebilirsiniz. Önemli: Isı haritası kutularına uygulanan vektör maskesini oluşturmak için kullanılacak verileri edinmeniz gerekir.

Bir alanda:

Hava Kalitesi TileLayer'ın üzerinde GeoJson kullanarak bir Maske oluşturmak için deck.gl'yi kullanın.

alt_text

Aşağıdaki örnekte Fransa'nın çokgenli bir geojson'u kullanılmaktadır.

// geojson sample

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

deckgl uygulamasıyla ilgili referansı burada bulabilirsiniz:

  // 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
  ...
  })
  ]

Bir Rota Boyunca: Hava Kalitesi TileLayer'ın üzerinde Mask oluşturmak için deck.gl'yi TripsLayer ile birlikte kullanın.

Seyahat üzerinde hava kalitesi ısı haritası

alt_text

API isteklerini ve maliyeti yönetme

Tarayıcının varsayılan davranışı genellikle yüklenen tüm kutucukları yerel depolama alanında (aynı oturum içinde) önbelleğe almak olsa da aşağıdakileri yaparak daha fazla optimizasyon yapabilirsiniz:

Yükleme alanını kısıtlama: Sınırlayıcı bir kutu (kırmızı renkte) oluşturun ve bunu katmana atayın. Yalnızca sınırlayıcı kutuyu kapsayan ısı haritası döşemeleri (mavi renkte) belirli bir yakınlaştırma düzeyinde yüklenir.

Sınırlayıcı kutu (kırmızı renkte), ısı haritası blokları (mavi renkte)

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
    ...
 })

Görsel görüntüleme kutucuğu boyutunu, belirli bir yakınlaştırma düzeyinde görüntü alanının tamamını kaplayacak şekilde ayarlayın. Önerilen boyut: 256-1024 arasında.
Önemli: API döşemeleri 256x256 çözünürlükte kalır ancak görsel görüntüleme ayarı, tüm harita görüntü alanını kapsayacak şekilde döşeme isteği sayısını artırmanıza/azaltmanıza olanak tanır.

(Google Haritası'nın minZoom ve maxZoom değerleriyle çalıştığından emin olun. Örneğin: tilesize:1024 , 0 veya 1 yakınlaştırma düzeyinde döşemeleri yüklemez).

256x256 piksel ve 512x512 piksel boyutlarında döşemeler içeren görünüm alanı

alt_text

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

Piksel değerlerini okuma

İlgili değeri bir renk ölçeğinde göstermek için

Luma.gl kitaplığını ve deck.gl katmanına prop olarak atanan bir onClick etkinliğinde readPixelsToArray yöntemini kullanabilirsiniz.

Piksel değeri: rgba(128,0,0,255)

alt_text

DÜŞÜK alt_text YÜKSEK

  // 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);
    }
  }
  })

Sonuç

Hava Kalitesi ve Polen ısı haritası döşemeleri API uç noktalarının nasıl olabileceğini öğrendiniz:

Web'deki bir Google Haritası'na yüklenmeli ve Kullanım Şartları'na uygun olmalıdır.
kullanım alanınıza uygun şekilde optimize edilmiş
kart değerlerini okuma

Sonraki İşlemler

Daha fazla bilgi için önerilen kaynaklar:

Air Quality API'yi kullanarak yerler için hava kalitesi farkındalığı

Katkıda bulunanlar

Başlıca yazarlar:

Thomas Anglaret | Google Haritalar Platformu Çözüm Mühendisi