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

Google Haritalar Platformu ve deck.gl ile verileri görselleştirme

1. Başlamadan önce

Bu codelab'de, Maps JavaScript API ve açık kaynaklı, WebGL hızlandırmalı bir veri görselleştirme çerçevesi olan deck.gl kullanarak yüksek hacimli coğrafi veri görselleştirmesi oluşturma işlemi açıklanmaktadır.

Ön koşullar

Yapacaklarınız

Google Haritalar Platformu'nu deck.gl ile entegre edin.
BigQuery'den bir veri kümesini haritaya aktarın.
Haritadaki veri noktalarını tanımlayın.

İhtiyacınız olanlar

Bir Google Hesabı
Seçtiğiniz bir metin düzenleyici veya IDE
JavaScript, HTML ve CSS hakkında temel bilgi

2. Ortamınızı ayarlama

Google Haritalar Platformu'nu kullanmaya başlayın

Google Haritalar Platformu'nu daha önce kullanmadıysanız aşağıdaki adımları uygulayın:

Node.js'yi indirin

Henüz yüklemediyseniz https://nodejs.org/ adresine giderek Node.js çalışma zamanını bilgisayarınıza indirip yükleyin.

Node.js, bu codelab'in bağımlılıklarını yüklemek için ihtiyacınız olan bir paket yöneticisi olan npm'yi içerir.

Başlangıç projesini ayarlama

Bu codelab'in başlangıç projesi, zamandan tasarruf etmenizi sağlamak için harita oluşturmak üzere ihtiyacınız olan tüm standart kodu içerir.

Başlamak için şu adımları uygulayın:

Bu depoyu klonlayın veya indirin.
Komut satırından, bu codelab'i tamamlamak için gereken temel dosya yapısını içeren /starter dizinine gidin.
Aşağıdaki komutu çalıştırarak npm'den bağımlılıkları yükleyin:

npm install

Aşağıdaki komutu çalıştırarak başlangıç projesini Webpack Dev Server ile tarayıcınızda çalıştırın:

npm start

    The starter app opens in your browser and displays a map.

Projenizi IDE'nizde açın ve /starter/src dizinine gidin.
app.js dosyasını açın.

Dosyadaki kodun bu bölümünde tüm kodlamanızı yapacaksınız:

const googleMapsAPIKey = 'YOUR API KEY';
loadJSAPI();
function runApp() {
  // Your code goes here
}

Dosyadaki Maps JavaScript API'yi ve haritayı yükleyen kodun geri kalanıyla herhangi bir işlem yapmayacaksınız:

/* API and map loader helpers */
function loadJSAPI() {
  const googleMapsAPIURI = `https://maps.googleapis.com/maps/api/js?key=${googleMapsAPIKey}&callback=runApp`;
  const script = document.createElement('script');

  script.src = googleMapsAPIURI;
  script.defer = true;
  script.async = true;

  window.runApp = runApp;
  document.head.appendChild(script);
}

function initMap() {
  const mapOptions = {
    center: { lat: 40.75097, lng: -73.98765 },
    zoom: 14,
    styles: mapStyle
  };
  const mapDiv = document.getElementById('map');
  return new google.maps.Map(mapDiv, mapOptions);
}

YOUR API KEY kısmını, ortamınızı ayarlarken oluşturduğunuz gerçek API anahtarınızla değiştirin:

const googleMapsAPIKey = 'YOUR API KEY';

3. BigQuery'den veri dışa aktarma

BigQuery, veri analizi veya deneysel amaçlarla kullanabileceğiniz birçok herkese açık veri kümesi sunar.

New York City'nin 14.500 bisiklet ve 900 konum içeren bisiklet paylaşım programı Citi Bike'ın konum verilerini içeren herkese açık bir veri kümesini dışa aktarmak için BigQuery'yi kullanın. Bunun için aşağıdaki adımları uygulayın:

Cloud Console'a gidin.
Gezinme menüsü > BigQuery'yi tıklayın.
Sorgu düzenleyicide aşağıdaki sorguyu girin ve Çalıştır'ı tıklayın:

SELECT
    longitude,
    latitude,
    name,
    capacity
FROM
    `bigquery-public-data.new_york_citibike.citibike_stations`

Sorgu tamamlandıktan sonra Sonuçları Kaydet'i tıklayın, ardından sonuç kümesini dışa aktarmak için JSON (yerel dosya)'yı seçin. Dosyaya stations.json adını verin ve /src dizinine kaydedin.

Verilerinizi aldığınıza göre artık deck.gl ile ilk görselleştirmenizi oluşturabilirsiniz.

4. Görselleştirmeyi tanımlama

deck.gl, çok büyük veri kümelerinin yüksek çözünürlüklü 2D ve 3D görüntülerini oluşturmak için WebGL'yi kullanan açık kaynaklı bir veri görselleştirme çerçevesidir. Yüz binlerce veri noktasını işleyebilir ve optimize edildiğinde milyonlarca veri noktasını bile işleyebilir.

Görselleştirme oluşturmak için iki sınıf gerekir: GoogleMapsOverlay ve deck.gl'nin birçok görselleştirme katmanından biri.

Başlamak için ScatterplotLayer örneği oluşturun. Bu örnek, veri noktalarını haritada daire olarak oluşturur:

Aşağıdaki kodu app.js dosyasının en üstüne ekleyerek deck.gl'nin ScatterplotLayer sınıfını içe aktarın:

import { ScatterplotLayer } from '@deck.gl/layers';

deck.gl'nin dağılım grafiği katmanı için kullanılabilen iki özellik türü arasından seçim yaparak katman özelliklerinizi ayarlayın.

Setter özellikleri, görselleştirmeye oluşturması için gereken bilgileri (ör. veri noktalarının konumu ve yarıçapı) sağlar. Stil özellikleri, görselleştirmenin stilini özelleştirmenize olanak tanır.

Aşağıdaki kod snippet'inde kullandığınız özelliklerin dökümünü burada bulabilirsiniz:

id, oluşturucunun yeniden boyama ve görselleştirmede yapılan diğer güncellemeler gibi çeşitli nedenlerle katmanları tanımlamasına olanak tanır. Tüm deck.gl katmanları, sizin atadığınız benzersiz bir kimlik gerektirir.
data, görselleştirmenin veri kaynağını belirtir. BigQuery'den dışa aktardığınız veri kümesini kullanmak için ‘./stations.json' olarak ayarlayın.
getPosition, her nesnenin konumunu veri kaynağından alır. Mülkün değerinin bir işlev olduğunu unutmayın. deck.gl, veri kümesindeki her satırda yineleme yapmak için bu işlevi kullanır. Bu işlev, oluşturucuya her satırdaki veri noktasının enlem ve boylamına nasıl erişileceğini bildirir. Bu veri kümesinde, her satırdaki veriler enlem ve boylam özelliklerinde konumun ayarlandığı bir JSON nesnesidir. Bu nedenle, getPosition için sağladığınız işlev d => [parseFloat(d.longitude), parseFloat(d.latitude)] olur.
getRadius, her nesnenin yarıçapını metre cinsinden tanımlar. Bu durumda yarıçap d => parseInt(d.capacity) olarak ayarlanır. Bu da veri noktalarının boyutunu her istasyonun kapasitesine göre belirler.
stroked, oluşturulan veri noktalarının dış kenarlarında kontur olup olmayacağını belirler.
getFillColor, her veri noktasının dolgu rengini RGB renk kodu olarak ayarlar.
getLineColor, her veri noktasının kontur rengini RGB renk kodu olarak ayarlar.
radiusMinPixels, her veri noktası için minimum piksel genişliğini ayarlar. Kullanıcılar yakınlaştırıp uzaklaştırdıkça deck.gl, görselleştirmenin haritada net bir şekilde görünmesini sağlamak için veri noktalarının ölçeğini otomatik olarak yeniden boyutlandırır. Bu özellik, yeniden boyutlandırmanın ne kadar yapılacağını kontrol etmenize olanak tanır.
radiusMaxPixels her veri noktası için maksimum piksel genişliğini belirler.

const layerOptions = {
  id: 'scatter-plot',
  data: './stations.json',
  getPosition: d => [parseFloat(d.longitude), parseFloat(d.latitude)],
  getRadius: d => parseInt(d.capacity),
  stroked: true,
  getFillColor: [255, 133, 27],
  getLineColor: [255, 38, 27],    
  radiusMinPixels: 5,
  radiusMaxPixels: 50
};

deck.gl'nin ScatterplotLayer sınıfının bir örneğini oluşturun:

const scatterplotLayer = new ScatterplotLayer(layerOptions);

Bu bölümü tamamladıktan sonra kodunuz aşağıdaki gibi görünmelidir:

import { ScatterplotLayer } from '@deck.gl/layers';

const googleMapsAPIKey = 'YOUR API KEY';

loadJSAPI();
function runApp() {
  const map = initMap();
  const layerOptions = {
    id: 'scatterplot',
    data: './stations.json',
    getPosition: d => [parseFloat(d.longitude), parseFloat(d.latitude)],
    getRadius: d => parseInt(d.capacity),
    stroked: true,
    getFillColor: [255, 133, 27],
    getLineColor: [255, 38, 27],    
    radiusMinPixels: 5,
    radiusMaxPixels: 50
  };

  const scatterplotLayer = new ScatterplotLayer(layerOptions);
}

5. Görselleştirmeyi haritaya uygulama

Artık ScatterplotLayer örneğinizi, haritanın üzerine bir WebGL bağlamı yerleştirmek için Maps JavaScript API OverlayView API'sini kullanan GoogleMapsOverlay sınıfıyla haritaya uygulayabilirsiniz.

Bu işlem tamamlandıktan sonra, deck.gl'nin görselleştirme katmanlarından herhangi birini GoogleMapsOverlay'ye iletebilirsiniz. Bu katman, oluşturulur ve haritayla senkronize edilir.

ScatterplotLayer simgenizi haritaya uygulamak için aşağıdaki adımları uygulayın:

deck.gl'nin GoogleMapsOverlay sınıfını içe aktarın:

import { GoogleMapsOverlay } from '@deck.gl/google-maps';

GoogleMapsOverlay sınıfının bir örneğini oluşturun ve bunu, daha önce bir nesnenin layers özelliğinde oluşturduğunuz scatterplotLayer örneğine iletin:

const googleMapsOverlay = new GoogleMapsOverlay({
    layers: [scatterplotLayer]
  });

Yerleşimi haritaya uygulama:

 googleMapsOverlay.setMap(map);

Bu bölümü tamamladıktan sonra kodunuz aşağıdaki gibi görünmelidir:

import { GoogleMapsOverlay } from '@deck.gl/google-maps';
import { ScatterplotLayer } from '@deck.gl/layers';

const googleMapsAPIKey = 'YOUR API KEY';

loadJSAPI();
function runApp() {
  const map = initMap();
  const layerOptions = {
    id: 'scatter-plot',
    data: './stations.json',
    getPosition: d => [parseFloat(d.longitude), parseFloat(d.latitude)],
    getRadius: d => parseInt(d.capacity),
    stroked: true,
    getFillColor: [255, 133, 27],
    getLineColor: [255, 38, 27],    
    radiusMinPixels: 5,
    radiusMaxPixels: 50
  };
  const scatterplotLayer = new ScatterplotLayer(layerOptions);
  const googleMapsOverlay = new GoogleMapsOverlay({
    layers: [scatterplotLayer]
  });
  googleMapsOverlay.setMap(map);
}

Tarayıcınıza geri dönün. Burada, New York City'deki tüm Citi Bike istasyonlarının harika bir veri görselleştirmesini görürsünüz.

6. Tebrikler

Tebrikler! Google Haritalar Platformu ve deck.gl ile New York City'nin Citi Bike verilerinin yüksek hacimli bir veri görselleştirmesini oluşturdunuz.

Daha fazla bilgi

Maps JavaScript API, Google Haritalar Platformu'nun web için sunduğu her şeye erişmenizi sağlar. Web'de Google Haritalar Platformu ile çalışma hakkında daha fazla bilgi edinmek için aşağıdaki bağlantılara göz atın:

deck.gl, verileri kullanıcılarınıza göstermek için kullanabileceğiniz çok sayıda veri görselleştirme katmanı sunar. Maps JavaScript API ile deck.gl'yi kullanma hakkında daha fazla bilgi edinmek için aşağıdaki bağlantılara göz atın: