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

Alan ve rotalarda hava kalitesi ve polen

Hedef

Hava Kalitesi ve Polen API'leri, belirli bir konumdaki bir geziye veya haritaya daha fazla ayrıntı eklemek için mükemmel fırsatlar sunar. Bu API'lerden elde edilen verileri kullanmanın iki yolu vardır: metin olarak dizin veya raster görüntü olarak ısı haritası karoları.

alternatif_metin

Isıtma haritası karoları API'si uç noktalarını kullanırken, raster karoları tek tek yüklerken aşağıdaki gibi bazı zorluklarla karşılaşabilirsiniz:

Web'de bir Google Haritası'na karoları nasıl yükleyebilirim? (API'lerin Kullanım Şartları'na da uymak için)
Deneyim 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 poligon içinde ısı haritası karolarını (mevcut koşullar) raster verilerini görselleştirin.
Hava Kalitesi ve Polen rota boyunca: Rotalardaki yol noktalarında haritalanmış ısı haritası karolarını (mevcut koşullar) raster verilerini görselleştirin.

Uygulama

Kullanılabilen kartları ve bunların bir web deneyimine nasıl yüklenebileceğini öğreneceksiniz. Ayrıca, karoların bir haritaya yüklendiği bir senaryoda istek sayısını yönetmek için neler yapılabileceğini de göreceksiniz. Son olarak, karoların nasıl okunacağı gösterilir.

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 Endeksi kırmızı-yeşil paleti.
- UAQI_INDIGO_PERSIAN (UAQI, çivit-persis paleti): Evrensel Hava Kalitesi İndigo-persis paleti.
- PM25_INDIGO_PERSIAN: PM2.5 indeksi indigo-fars 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ü, yabancı ot dizini haritasını grafiksel olarak temsil eder.

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

Harita parçalarını yükleyin ve haritanın görüntü alanının yalnızca istediğiniz alanlarını görüntülemek için bir vektör maskesi uygulayın.

Kartları yükleme

Google temel haritasını yüklemek için Haritalar JavaScript API'sini kullanın ve kafes karo resimlerini yüklemeye hazırlanmak için deckgl kitaplığını yükleyin.
Hava Kalitesi Isıtma Haritası karolarını yüklemek için deck.gl TileLayer'ı kullanın. Bu işlem, Haritalar JavaScript özel yer paylaşımlarının aksine Google Haritalar temel harita etiketlerini ısı haritası parçalarının üstünde 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 TileLayer'ı üzerinde maske oluşturmak için deck.gl GeoJson'i kullanın.

alternatif_metin

Aşağıdaki örnekte Fransa'nın çokgen geojson'u 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

Bir seyahat sırasındaki hava kalitesi sıcaklık haritası karosu

alt_text

API isteklerini ve maliyeti yönetme

Tarayıcının varsayılan davranışı genellikle, yüklenen tüm karoları yerel depolama alanında (aynı oturum içinde) önbelleğe almaktır. Ancak daha fazla optimizasyon yapabilirsiniz:

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ı karoları (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 görüntüleme karo boyutunu, herhangi bir yakınlaştırma düzeyinde görüntü alanının tamamını kaplayacak şekilde ayarlayın. Önerilen boyut: 256 ila 1024.
Önemli: API karoları 256x256 çözünürlükte kalır ancak görsel görüntüleme ayarı, harita görüntü alanının tamamını kapsayacak şekilde karo isteklerinin sayısını artırmanıza/azaltmanıza olanak tanır.

(Google Haritası'nın minZoom ve maxZoom ile çalıştığından emin olun. Yani tilesize:1024 , 0 veya 1 yakınlaştırmada karo yüklemez.)

256x256 piksel ve 512x512 piksel karo içeren görüntü alanı

alternatif_metin alt_text

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

Piksel değerlerini okuma

İlgili değeri renk ölçeğinde görüntülemek için

deck.gl katmanına öğe olarak atanan bir tıklama etkinliği üzerine Luma.gl kitaplığını ve readPixelsToArray yöntemini kullanabilirsiniz.

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

alternatif_metin

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ı karoları API uç noktalarının nasıl kullanılabileceğini öğrendiniz:

Web'de bir Google Haritası'na yüklenmelidir. Ayrıca, Kullanım Şartları'na uygun olmalıdır.
Kullanım alanınızla eşleşecek şekilde optimize edilmiş
parça değerlerini oku

Sonraki İşlemler

Önerilen diğer kaynaklar:

Air Quality API kullanan yerler için hava kalitesi farkındalığı

Katkıda bulunanlar

Başlıca yazarlar:

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