داده‌ها را با پلتفرم Google Maps و deck.gl تجسم کنید

1. قبل از شروع

این کد لبه به شما می آموزد که چگونه با استفاده از Maps JavaScript API و deck.gl، یک چارچوب تجسم داده منبع باز، با شتاب WebGL، یک تجسم داده های مکانی با حجم بالا ایجاد کنید.

d01802e265548be1.png

پیش نیازها

کاری که خواهی کرد

  • پلتفرم نقشه های گوگل را با deck.gl ادغام کنید.
  • یک مجموعه داده را از BigQuery به نقشه وارد کنید.
  • نقاط داده را روی نقشه تعریف کنید.

آنچه شما نیاز دارید

  • یک حساب Google
  • یک ویرایشگر متن یا IDE به انتخاب شما
  • دانش اولیه جاوا اسکریپت، HTML و CSS

2. محیط خود را تنظیم کنید

با پلتفرم نقشه های گوگل شروع کنید

اگر قبلاً از Google Maps Platform استفاده نکرده‌اید، این مراحل را دنبال کنید:

  1. یک حساب صورتحساب ایجاد کنید.
  2. یک پروژه ایجاد کنید.
  3. APIها و SDKهای پلتفرم Google Maps را فعال کنید.
  4. یک کلید API ایجاد کنید.

Node.js را دانلود کنید

اگر قبلاً آن را ندارید، به https://nodejs.org/ بروید و زمان اجرا Node.js را دانلود و بر روی رایانه خود نصب کنید.

Node.js شامل npm است، یک مدیریت بسته که برای نصب وابستگی های این کد لبه نیاز دارید.

پروژه شروع را راه اندازی کنید

برای صرفه جویی در وقت شما، پروژه شروع کننده این کد لبه شامل تمام کدهای دیگ بخاری است که برای نمونه سازی نقشه نیاز دارید.

برای شروع، مراحل زیر را دنبال کنید:

  1. این مخزن را شبیه سازی یا دانلود کنید.
  2. از خط فرمان، به دایرکتوری /starter بروید، که شامل ساختار فایل اصلی است که برای تکمیل این کد لبه نیاز دارید.
  3. با اجرای دستور زیر وابستگی ها را از npm نصب کنید:
npm install
  1. با اجرای دستور زیر پروژه شروع را در مرورگر خود با Webpack Dev Server اجرا کنید:
npm start

    The starter app opens in your browser and displays a map.
  1. پروژه را در IDE خود باز کنید و به دایرکتوری /starter/src بروید.
  2. فایل app.js را باز کنید.

شما تمام کدنویسی خود را در این بخش از کد موجود در فایل انجام خواهید داد:

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

با بقیه کدهای موجود در فایل، که Maps JavaScript API و نقشه را بارگیری می کند، کاری انجام نمی دهید:

/* 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 API واقعی خود، که هنگام تنظیم محیط خود ایجاد کرده اید، جایگزین کنید:
const googleMapsAPIKey = 'YOUR API KEY';

3. داده ها را از BigQuery صادر کنید

BigQuery مجموعه داده های عمومی زیادی را ارائه می دهد که می توانید از آنها برای تجزیه و تحلیل داده ها یا اهداف آزمایشی استفاده کنید.

با دنبال کردن این مراحل، از BigQuery برای صادر کردن یک مجموعه داده در دسترس عموم استفاده کنید که شامل داده‌های مکان برای Citi Bike شهر نیویورک است، یک برنامه اشتراک دوچرخه با 14500 دوچرخه و 900 مکان:

  1. به Cloud Console بروید.
  2. روی منوی ناوبری کلیک کنید 41e8e87b85b0f93.png > BigQuery .
  3. در ویرایشگر Query، کوئری زیر را وارد کرده و روی Run کلیک کنید:
SELECT
    longitude,
    latitude,
    name,
    capacity
FROM
    `bigquery-public-data.new_york_citibike.citibike_stations`
  1. پس از تکمیل پرس و جو، روی Save Results کلیک کنید، سپس JSON (فایل محلی) را انتخاب کنید تا مجموعه نتایج صادر شود. نام فایل را stations.json بگذارید و آن را در پوشه /src ذخیره کنید.

2f4932829f7e1f78.png

اکنون که داده های خود را به دست آوردید، می توانید اولین تجسم خود را با deck.gl ایجاد کنید.

4. تجسم را تعریف کنید

deck.gl یک چارچوب تجسم داده منبع باز است که از WebGL برای تولید رندرهای دو بعدی و سه بعدی با وضوح بالا از مجموعه داده های بسیار بزرگ استفاده می کند. این می تواند صدها هزار نقطه داده را مدیریت کند و در صورت بهینه سازی، حتی می تواند میلیون ها مورد از آنها را مدیریت کند.

برای ایجاد یک تجسم، به دو کلاس نیاز دارید - GoogleMapsOverlay و یکی از لایه‌های تجسم بسیاری deck.gl.

برای شروع، یک نمونه از ScatterplotLayer ایجاد کنید - که نقاط داده را به صورت دایره هایی روی نقشه ارائه می کند:

  1. کلاس ScatterplotLayer deck.gl را با افزودن موارد زیر به بالای app.js :
import { ScatterplotLayer } from '@deck.gl/layers';
  1. ویژگی های لایه خود را با انتخاب از بین دو نوع ویژگی موجود برای لایه پراکنده deck.gl تنظیم کنید.

ویژگی های تنظیم کننده، تجسم را با اطلاعاتی که باید ارائه کند، مانند موقعیت و شعاع نقاط داده، فراهم می کند. ویژگی های Styler به شما امکان می دهد سبک تجسم را سفارشی کنید.

در اینجا ویژگی هایی که در قطعه کد زیر استفاده می کنید به صورت تفکیک شده است:

  • id به رندر اجازه می دهد تا لایه ها را به دلایل مختلف، مانند رنگ آمیزی مجدد و سایر به روز رسانی های تجسم شناسایی کند. همه لایه‌های deck.gl به یک شناسه منحصربه‌فرد نیاز دارند که شما آن را اختصاص می‌دهید.
  • data منبع داده تجسم را مشخص می کند. برای استفاده از مجموعه داده‌ای که از BigQuery صادر کرده‌اید، آن را روی './stations.j son» تنظیم کنید.
  • getPosition موقعیت هر شیء را از منبع داده بازیابی می کند. توجه داشته باشید که مقدار ویژگی یک تابع است. deck.gl از این تابع برای تکرار روی هر ردیف در مجموعه داده استفاده می کند. این تابع به رندر کننده می گوید که چگونه به طول و عرض جغرافیایی نقطه داده در هر ردیف دسترسی داشته باشد. در این مجموعه داده، داده‌های هر ردیف یک شی JSON است که موقعیت آن در ویژگی‌های طول و عرض جغرافیایی تنظیم شده است، بنابراین تابعی که به getPosition ارائه می‌دهید d => [parseFloat(d.longitude), parseFloat(d.latitude)] .
  • getRadius شعاع هر جسم را بر حسب متر تعریف می کند. در این مورد، شعاع بر روی d => parseInt(d.capacity) تنظیم می شود که اندازه نقاط داده را بر اساس ظرفیت هر ایستگاه تعیین می کند.
  • stroked تعیین می کند که آیا نقاط داده رندر شده دارای سکته مغزی در لبه های بیرونی خود هستند یا خیر.
  • getFillColor رنگ پر شدن هر نقطه داده را به عنوان یک کد رنگ RGB تنظیم می کند.
  • getLineColor رنگ stroke هر نقطه داده را به عنوان یک کد رنگ RGB تنظیم می کند.
  • radiusMinPixels حداقل عرض پیکسل را برای هر نقطه داده تعیین می کند. همانطور که کاربران بزرگنمایی و بزرگنمایی می کنند، deck.gl به طور خودکار مقیاس نقاط داده را تغییر اندازه می دهد تا تجسم به وضوح روی نقشه قابل مشاهده باشد. این ویژگی به شما این امکان را می دهد که میزان وقوع این تغییر اندازه را کنترل کنید.
  • radiusMaxPixels حداکثر عرض پیکسل را برای هر نقطه داده تعیین می کند.
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. یک نمونه از کلاس ScatterplotLayer ScatterplotLayer ایجاد کنید:
const scatterplotLayer = new ScatterplotLayer(layerOptions);

پس از تکمیل این بخش، کد شما باید به شکل زیر باشد:

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. تجسم را روی نقشه اعمال کنید

اکنون می توانید نمونه ScatterplotLayer خود را با کلاس GoogleMapsOverlay روی نقشه اعمال کنید، که از Maps JavaScript API OverlayView API برای تزریق یک زمینه WebGL در بالای نقشه استفاده می کند.

پس از ایجاد آن، می‌توانید هر یک از لایه‌های تجسم deck.gl را به GoogleMapsOverlay منتقل کنید، که لایه را رندر کرده و با نقشه همگام‌سازی می‌کند.

برای اعمال ScatterplotLayer بر روی نقشه، مراحل زیر را دنبال کنید:

  1. وارد کردن کلاس GoogleMapsOverlay deck.gl:
import { GoogleMapsOverlay } from '@deck.gl/google-maps';
  1. یک نمونه از کلاس GoogleMapsOverlay ایجاد کنید و نمونه scatterplotLayer را که قبلاً در ویژگی layers یک شی ایجاد کرده‌اید، ارسال کنید:
const googleMapsOverlay = new GoogleMapsOverlay({
    layers: [scatterplotLayer]
  });
  1. همپوشانی را روی نقشه اعمال کنید:
 googleMapsOverlay.setMap(map);

پس از تکمیل این بخش، کد شما باید به شکل زیر باشد:

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

به مرورگر خود بازگردید، جایی که باید تصویری عالی از تمام ایستگاه‌های دوچرخه Citi در شهر نیویورک را ببینید.

d01802e265548be1.png

6. تبریک می گویم

تبریک می گویم! شما با استفاده از پلتفرم Google Maps و deck.gl یک تصویرسازی داده با حجم بالا از داده‌های Citi Bike شهر نیویورک تولید کردید.

بیشتر بدانید

Maps JavaScript API به شما امکان می دهد به همه چیزهایی که Google Maps Platform برای وب ارائه می دهد دسترسی داشته باشید. با بررسی این پیوندها درباره کار با پلتفرم نقشه های گوگل در وب بیشتر بیاموزید:

deck.gl لایه‌های تجسم داده‌های متعددی را ارائه می‌کند که می‌توانید از آنها برای نمایش داده‌ها به کاربران خود استفاده کنید. با بررسی این پیوندها درباره استفاده از deck.gl با Maps JavaScript API بیشتر بیاموزید: