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

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

Bu codelab hakkında

subjectSon güncelleme May 11, 2022
account_circleBir Google çalışanı tarafından yazılmıştır

1. Başlamadan önce

Bu codelab'de, Haritalar JavaScript API'sini ve bir açık kaynak, WebGL hızlandırılmış, veri görselleştirme çerçevesi olandest.gl'yi kullanarak yüksek hacimli bir coğrafi veri görselleştirmesini nasıl oluşturabileceğinizi öğrenebilirsiniz.

d01802e265548be1.png

Ön koşullar

Yapacaklarınız

  • Google Haritalar Platformu'nudest.gl ile entegre edin.
  • BigQuery'deki bir haritaya veri kümesini içe aktarın.
  • Haritadaki veri noktalarını tanımlayın.

Gerekenler

  • Bir Google Hesabı
  • İstediğiniz bir metin düzenleyici veya IDE
  • JavaScript, HTML ve CSS hakkında temel bilgi

2. Ortamınızı ayarlayın

Google Haritalar Platformu'nu kullanmaya başlayın

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

  1. Faturalandırma hesabı oluşturun.
  2. Bir proje oluşturun.
  3. Google Haritalar Platformu API'lerini ve SDK'larını etkinleştirin.
  4. API anahtarı oluşturun.

Node.js'yi indirin

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

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

Başlangıç projesini oluşturma

Bu codelab'in başlangıç projesi, size zaman kazandırmak için bir harita oluşturmak için ihtiyacınız olan tüm ortak kodu içerir.

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

  1. Bu veri havuzunu klonlayın veya indirin.
  2. Komut satırından, bu codelab'i tamamlamak için ihtiyacınız olan temel dosya yapısını içeren /starter dizinine gidin.
  3. Aşağıdaki komutu çalıştırarak npm'den bağımlılıkları yükleyin:
npm install
  1. 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.
  1. Projeyi IDE'nizde açın ve /starter/src dizinine gidin.
  2. 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 kodun geri kalanıyla herhangi bir şey yapmanız gerekmez. Bu, Maps JavaScript API'yi ve eşlemeyi yükler:

/* 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);
}
  1. YOUR API KEY öğesini, ortamınızı oluştururken oluşturduğunuz gerçek API anahtarınızla değiştirin:
const googleMapsAPIKey = 'YOUR API KEY';

3. Verileri BigQuery'den dışa aktarma

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

BigQuery'yi, 14.500 bisiklet ve 900 konumlu bir bisiklet paylaşımı programı olan New York City's Citi Bike için konum verilerini içeren, herkese açık bir veri kümesini dışa aktarmak üzere şu adımları uygulayarak kullanın:

  1. Cloud Console'a gidin.
  2. Gezinme menüsü 41e8e87b85b0f93.png > BigQuery'i tıklayın.
  3. Sorgu düzenleyicisinde 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`
  1. Sorgu tamamlandıktan sonra Sonuçları Kaydet'i tıklayın, ardından sonuç grubunu dışa aktarmak için JSON (yerel dosya) seçeneğini belirleyin. Dosyayı stations.json olarak adlandırın ve /src dizinine kaydedin.

2f4932829f7e1f78.png

Verileri edindiğinize göre ilk görselleştirmenizidest.gl ile oluşturabilirsiniz.

4. Görselleştirmeyi tanımlayın

dest.gl, son derece büyük veri kümelerinde yüksek çözünürlüklü 2D ve 3D görüntüler oluşturmak için WebGL kullanan açık kaynaklı bir veri görselleştirme çerçevesidir. Yüz binlerce veri noktasını işleyebildiğinde, optimize edildiğinde bile milyonlarca veri noktasını işleyebilir.

Görselleştirme oluşturmak için iki sınıfa ihtiyacınız vardır: GoogleMapsOverlay veStack.gl&#39'ın birçok görselleştirme katmanından biri.

Başlamak için, veri noktalarını haritada daire şeklinde oluşturan ScatterplotLayer örneğini oluşturun:

  1. Aşağıdakileri app.js öğesinin üst kısmına ekleyerekdest.gl's ScatterplotLayer sınıfını içe aktarın:
import { ScatterplotLayer } from '@deck.gl/layers';
  1. deste.gl's dağılım katmanı için kullanılabilen iki özellik türü arasından seçim yaparak katman özelliklerinizi ayarlayın.

Ayarlayıcı özellikleri, görselleştirmeye oluşturması gereken bilgileri (ör. veri noktalarının konumu ve yarıçapı) sağlar. Düzenleyici özellikleri, görselleştirme stilini özelleştirmenize olanak tanır.

Aşağıda, aşağıdaki kod snippet'inde kullandığınız özelliklerin dökümü verilmiştir:

  • id, oluşturucunun katmanları yeniden tanımlamasına ve görselleştirmede yapılan diğer güncellemelere benzer nedenlerle tanımlamasına olanak tanır. Tümdest.gl katmanları, atadığınız benzersiz kimliği 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 bir nesnenin konumunu veri kaynağından alır. Özelliğin değerinin bir işlev olduğunu unutmayın. dest.gl, veri kümesindeki her satırı yinelemek için işlevi kullanır. İşlev, oluşturucuya her bir satırdaki veri noktasının enlem ve boylamına nasıl erişeceğini bildirir. Bu veri kümesinde, her satırdaki veriler enlem ve boylam özelliklerinde ayarlanmış konuma sahip bir JSON nesnesidir. Dolayısıyla getPosition öğesine sağladığınız işlev d => [parseFloat(d.longitude), parseFloat(d.latitude)] olur.
  • getRadius, her bir nesnenin yarıçapını metre cinsinden tanımlar. Bu durumda yarıçap, veri noktalarının boyutunu her bir istasyonun kapasitesine göre ayarlayan d => parseInt(d.capacity) olarak ayarlanır.
  • stroked, oluşturulan veri noktalarının dış kenarlarında fırça olup olmadığını belirler.
  • getFillColor, her bir veri noktasının dolgu rengini RGB renk kodu olarak ayarlar.
  • getLineColor, her veri noktasının fırça rengini RGB renk kodu olarak ayarlar.
  • radiusMinPixels, her veri noktası için minimum piksel genişliğini ayarlar. Kullanıcılar haritayı yakınlaştırıp uzaklaştırdığında bölmenin boyutu, veri noktalarının ölçeğini otomatik olarak yeniden boyutlandırarak görselleştirmenin haritada kolayca görülebilmesini sağlar. Bu özellik, bu yeniden boyutlandırmanın ne ölçüde gerçekleştiğini kontrol etmenize olanak tanır.
  • radiusMaxPixels, her veri noktası için maksimum piksel genişliğini ayarlar.
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
};
  1. dest.gl's 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 uygulayın

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

Bu adım tamamlandıktan sonra herhangi birdest.gl&#39 görselleştirme katmanını GoogleMapsOverlay katmanına aktarabilirsiniz. Bu katman, katmanı oluşturup haritayla senkronize eder.

ScatterplotLayer özelliğini haritaya uygulamak için aşağıdaki adımları izleyin:

  1. dest.gl's GoogleMapsOverlay sınıfını içe aktar:
import { GoogleMapsOverlay } from '@deck.gl/google-maps';
  1. GoogleMapsOverlay sınıfının bir örneğini oluşturun ve daha önce bir nesnenin layers özelliğinde oluşturduğunuz scatterplotLayer örneğini iletin:
const googleMapsOverlay = new GoogleMapsOverlay({
    layers: [scatterplotLayer]
  });
  1. Yer paylaşımını haritaya uygulayın:
 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 dönün. Burada, New York'taki tüm Citi Bisiklet istasyonlarının mükemmel bir veri görselleştirmesini görebilirsiniz.

d01802e265548be1.png

6. Tebrikler

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

Daha fazla bilgi

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

dest.gl, kullanıcılarınıza veri göstermek için kullanabileceğiniz çok sayıda veri görselleştirme katmanı sunar. Aşağıdaki bağlantılara göz atmak için Maps JavaScript API iledest.gl adresini kullanma hakkında daha fazla bilgi edinin:

bug_report Hata bildir