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

Alan ve rotalarda hava kalitesi ve polen

Hedef

Hava Kalitesi ve Anket API'leri, herhangi bir konumdaki bir geziye veya haritaya daha fazla analiz eklemek için mükemmel fırsatlar sunar. Bu API'lerde bulunan verileri iki şekilde kullanabilirsiniz: metin olarak dizine ekleme veya kafes görüntü olarak ısı haritası parçaları.

alt_text

Isı haritası bloklarının API uç noktalarını kullanırken, ayrı raster karolarını yüklerken bazı zorluklarla karşılaşabilirsiniz. Örneğin:

Google Haritasındaki karolar nasıl yüklenir? (API'lerin Kullanım Şartları'na da uymak için)
Deneyim sırasında istenen sayısı nasıl yönetilir?
bloklar değerleri nasıl okunur?

Örnek kullanım alanları

Yukarıdaki soruları yanıtlamaya çalışmak için size örnek kullanım alanları sunulacaktır.

Hava Kalitesi ve Bir alandaki polen:Bir veya daha fazla özel poligon içindeki ısı haritası bloklarını (mevcut koşullar) kafes verilerini görselleştirin.
Hava Kalitesi ve Rota boyunca polen ısı haritası bloklarını (mevcut koşullar) rota ara noktalarında eşlenen kafes verilerini görselleştirmek.

Uygulama

Hangi kartların kullanılabileceğini ve web'de nasıl yükleneceğini keşfedeceksiniz. Ayrıca, blokların haritaya yüklendiği bir senaryoda istek sayısını yönetmek için neler yapılabileceğini de göreceksiniz. Son olarak da kartları nasıl okuyacağınız açıklanacaktır.

Türe göre kullanılabilir ısı haritası blokları

Hava Kalitesi API'si

- UAQI_RED_GREEN (UAQI, kırmızı-yeşil palet): Evrensel Hava Kalitesi İndeksi kırmızı-yeşil palet.
. - UAQI_INDIGO_PERSIAN (UAQI, çivit-persis paleti): Evrensel Hava Kalitesi İndigo-persis paleti.
. - PM25_INDIGO_PERSIAN: PM2.5 indeks çivit mavisi-persian paleti.
. - GBR_DEFRA: Günlük Hava Kalitesi İndeksi (Birleşik Krallık) renk paleti.
. - DEU_UBA: Almanya Yerel Hava Kalitesi İndeksi 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 İndeksi renk paleti.

Anket API'si

- TREE_UP: Isı haritası türü, ağaç dizini grafik haritasını temsil eder.
. - GRASS_UPI: Isı haritası türü, çim dizin grafik haritasını temsil eder.
. - WEED_UPI: Isı haritası türü, ot dizini grafiklerini temsil eder.

Web'de ısı haritası parçalarını göster

Karoları yükleyin ve yalnızca haritanın görüntü alanının istenen alanlarını görüntülemek için bir vektör maskesi uygulayın.

Kartlar yükleniyor

Haritalar JavaScript API'sini kullanarak Google temel haritasını yükleyin ve kafes karo resimlerini yüklemeye hazırlanmak için deckgl kitaplığını yükleyin.
Hava Kalitesi Isı haritası karolarını yüklemek için Dec.gl TileLayer etiketini kullanın. Bu işlem, Google Haritalar ısı haritası parçalarının üzerinde temel harita etiketlerini (Haritalar JavaScript özel yer paylaşımlarından farklı olarak) gösterir.


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ı karolarının herhangi bir kısmını görsel olarak gizleyebilir veya gösterebilirsiniz. Önemli: Isı haritası karolarına uygulanan vektör maskesini oluşturmak için kullanılacak verileri edinmeniz gerekir.

Bir Bölgede:

Hava Kalitesi Parçalı Katmanı üzerinde Deck.gl GeoJson'u kullanarak bir Maske oluşturun.

alt_text

Aşağıdaki örnekte, Fransa'nın çoklu poligon Geojson dosyası kullanılmaktadır

// geojson sample

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

Aşağıda, deckgl uygulaması için bir referans verilmiştir:


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

Rota boyunca: Hava kalitesi kutucuk katmanı üzerinde bir maske oluşturmak için TripsLayer ile deck.gl'yi kullanın

Gezi sırasında hava kalitesi ısı haritası kutusu

alt_text

API isteklerini ve maliyeti yönetme

Tarayıcının varsayılan davranışı, genellikle yüklenen tüm karoları yerel depolamada (aynı oturumda) önbelleğe almak olsa da aşağıdakileri daha da optimize edebilirsiniz:

Yükleme alanını kısıtlama: Sınırlayıcı kutu (kırmızı) oluşturun ve bunu katmana atayın. Belirtilen yakınlaştırma seviyesinde yalnızca sınırlayıcı kutuyu kaplayan ısı haritası parçaları (mavi renkte) yüklenir

Sınırlayıcı Kutu (kırmızı), Isı haritası parçaları (mavi)

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 ekran öğesi boyutunu, herhangi bir yakınlaştırma düzeyinde görüntü alanının tamamını kaplayacak şekilde ayarlayın; önerilen: 256 ile 1024 arasında.
Önemli: API blokları 256x256 çözünürlükte kalır ancak görsel görüntü ayarlaması, harita Görünümünün tamamını kapsayacak şekilde karo isteklerinin sayısını artırmanıza/azaltmanıza olanak tanır

(Google Haritası'ndaki minZoom ve maxZoom ile çalıştığından emin olun; ör. tilesize:1024 yakınlaştırma 0 veya 1'de karoları yüklemez).

256x256 piksel yerine 512x512 piksel parçalı görüntü alanı

alt_text

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

Piksel değerlerini oku

Karşılık gelen değeri renk skalası üzerinde görüntülemek için

Deck.gl katmanına destek olarak atanan bir onClick etkinliği üzerinde Luma.gl kitaplığını ve 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 Pollen ısı haritası bloklarının API uç noktalarının nasıl olabileceğini keşfettiniz:

Kullanım Şartları'na da uygun olduğundan emin olarak, web'deki bir Google Haritası'nda yüklü olmalıdır.
kullanım alanınıza uyacak şekilde optimize edilmiş
parça değerlerini oku

Sonraki İşlemler

Önerilen ek okuma:

Hava Kalitesi API'sini kullanarak Yerler için hava kalitesi farkındalığı

Katkıda bulunanlar

Ana yazarlar:

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