deck.gl + tripslayer без реагирования - PullRequest
Новая
       11

deck.gl + tripslayer без реагирования

0 голосов
/ 11 ноября 2018

Как включить анимацию TripsLayer без реакции? Пример TripsLayer использует React, и я действительно не знаю, как преобразовать его в чистый JS. Пожалуйста, посмотрите на «одушевленную» функцию в коде ниже. Я пытался обновить состояние слоя, но он не работает (нет анимации TripsLayer). Я не знаю, где я должен назначить переменную времени.

Демо-версия TripsLayer: https://deck.gl/#/examples/custom-layers/trip-routes

Реагирует версия моего кода: https://github.com/uber/deck.gl/blob/master/examples/website/trips/app.js

Документы для TripsLayer: https://github.com/uber/deck.gl/tree/master/modules/experimental-layers/src/trips-layer

Мой код: 

import {MapboxLayer} from '@deck.gl/mapbox';
import {TripsLayer} from '@deck.gl/experimental-layers';
import mapboxgl from 'mapbox-gl';

class App
{
  constructor()
  {
    this.stateInfo = { time: 600 };
  }

  get state()
  {
    return this.stateInfo;
  }

  animate() {
    var loopLength = 18000; // unit corresponds to the timestamp in source data
    var animationSpeed = 30; // unit time per second

    const timestamp = Date.now() / 1000;
    const loopTime = loopLength / animationSpeed;

    var time = Math.round(((timestamp % loopTime) / loopTime) * loopLength);

    // HOW SHOULD I USE time VARIABLE???

    window.requestAnimationFrame(this.animate.bind(this)); 
  }
}

var obido = new App();

var tripsLayerObido = new TripsLayer({
  id: 'trips',
  data: 'trips/tripsKR.json',
  getPath: d => d.segments,
  getColor: d => (d.vendor === 0 ? [253, 128, 93] : [23, 184, 190]),
  opacity: 0.6,
  strokeWidth: 30,
  trailLength: 180,
  currentTime: obido.state.time
});

const LIGHT_SETTINGS = {
  lightsPosition: [-74.05, 40.7, 8000, -73.5, 41, 5000],
  ambientRatio: 0.05,
  diffuseRatio: 0.6,
  specularRatio: 0.8,
  lightsStrength: [2.0, 0.0, 0.0, 0.0],
  numberOfLights: 2
};

export const INITIAL_VIEW_STATE = {
  longitude: 19.93,
  latitude: 50.03,
  zoom: 12.8,
  maxZoom: 19,
  pitch: 60,
  bearing: 0
};


mapboxgl.accessToken = "XXX";
const map = new mapboxgl.Map({
  container: 'app',
  style: 'mapbox://styles/elninopl/cjnlge6rl094w2so70l1cf8y5',
  center: [INITIAL_VIEW_STATE.longitude, INITIAL_VIEW_STATE.latitude],
  zoom: INITIAL_VIEW_STATE.zoom,
  pitch: INITIAL_VIEW_STATE.pitch,
  layers: [tripsLayerObido]
});

map.on('load', () => {
  obido.animate(0);
});

1 Ответ

0 голосов
/ 25 июля 2019

Пожалуйста, попробуйте setProps, который обновляет слой моих поездок: 

this.tripsLayer.setProps({ currentTime: this.currentTime });
...