Наведите курсор на deck.gl

Question

Я зашел в тупик в deck.gl и надеюсь, вы поможете мне, ребята. Я не смог понять, как вы отображаете свойства баров в примере hexagonLayer, который отображается на официальной веб- странице deck.gl: https://uber.github.io/deck.gl/. Пример, доступный в GitHub, не имеет этой функциональности, и слой браузера слишком сложен для меня. Я попытался включить компонент layer-info, который встроен в пример layer-browser, но я не понимаю, что такое (info), и продолжаю получать эту ошибку:

"Ошибка синтаксического анализа модуля: вам может понадобиться соответствующий загрузчик для обработки этого типа файла.

Большое спасибо за уделенное время! Я новичок в реакции! Извините, если это банально.

App.js

    import React, {Component} from 'react';
    import {render} from 'react-dom';
    import MapGL from 'react-map-gl';
    import DeckGLOverlay from './deckgl-overlay.js';
    import Controls from './components/controls';
    import {csv as requestCsv} from 'd3-request';
    import LayerInfo from './components/layer-info';
    // Set your mapbox token here
    const MAPBOX_TOKEN = 'pk.eyJ1IjoianVhbmRhc2VybmkiLCJhIjoiY2pjYnl3bmJ4MDh3bzJ5bnQzb2lwczhydCJ9.Z4p1_41tUtfk_VpGyXA-nA'; // eslint-disable-line

    // Source data CSV
    const DATA_URL =
      'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/3d-heatmap/heatmap-data.csv'; // eslint-disable-line

    class Root extends Component {
      constructor(props) {
        super(props);
        this.state = {
          datad: {
            package: 'react-dat-gui',
            radius: 1100,
            isAwesome: true,
            feelsLike: '#2FA1D6',
          },
          viewport: {
            ...DeckGLOverlay.defaultViewport,
            width: 500,
            height: 500
          },
          data: null,
          hoveredItem: null,
          clickedItem: null,
          queriedItems: null
        };



      requestCsv(DATA_URL, (error, response) => {
          if (!error) {
            const data = response.map(d => [Number(d.lng), Number(d.lat)]);
            this.setState({data});
          }
        });
      }

      componentDidMount() {
        window.addEventListener('resize', this._resize.bind(this));
        this._resize();
      }


      _resize() {
        this._onViewportChange({
          width: window.innerWidth,
          height: window.innerHeight
        });
      }

      _onViewportChange(viewport) {
        this.setState({
          viewport: {...this.state.viewport, ...viewport}
        });
      }

      onParentUpdate(datad) {
        this.setState({ datad });
      }

      onHover(info) {

  this.setState({hoveredItem: info});
}


  render() {
    const {viewport, datad, data} = this.state;

    return (
      <div>
          <MapGL
            {...viewport}
            mapStyle="mapbox://styles/mapbox/dark-v9"
            onViewportChange={this._onViewportChange.bind(this)}
            mapboxApiAccessToken={MAPBOX_TOKEN}
          >
            <DeckGLOverlay viewport={viewport}
            data={data || [] }
            datad = {this.state.datad }
            onLayerHover= {this.onHover}
          />
          </MapGL>

          <Controls
          onUpdate = {(datad) => this.onParentUpdate(datad)}
          datad = {this.state.datad}
          />

          <LayerInfo
            hovered={hoveredItem}
          />

         </div>

        );
      }
    }

    render(<Root />, document.body.appendChild(document.createElement('div')));

Layer-info.js

import React, {PureComponent} from 'react';

export default class LayerInfo extends PureComponent {
  _infoToString(info) {
    const object = info.feature || info.object;
    if (!object) {
      return 'None';
    }
    const props = object.properties || object;
    return JSON.stringify(props);
  }

  render() {
    const {hovered, clicked, queried} = this.props;

    return (
      <div>
        {hovered && (
          <div>
            <h4>Hover</h4>
            <span>
              Layer: {hovered.layer.id} Object: {this._infoToString(hovered)}
            </span>
          </div>
        )}
      </div>
    );
  }
}

deckgl-overlay.js

import React, {Component} from 'react';
import {render} from 'react-dom';
import MapGL from 'react-map-gl';
import DeckGLOverlay from './deckgl-overlay.js';
import Controls from './components/controls';
import {csv as requestCsv} from 'd3-request';
import LayerInfo from './components/layer-info';
// Set your mapbox token here
const MAPBOX_TOKEN = 'pk.eyJ1IjoianVhbmRhc2VybmkiLCJhIjoiY2pjYnl3bmJ4MDh3bzJ5bnQzb2lwczhydCJ9.Z4p1_41tUtfk_VpGyXA-nA'; // eslint-disable-line

// Source data CSV
const DATA_URL =
  'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/3d-heatmap/heatmap-data.csv'; // eslint-disable-line

class Root extends Component {
  constructor(props) {
    super(props);
    this.state = {
      datad: {
        package: 'react-dat-gui',
        radius: 1100,
        isAwesome: true,
        feelsLike: '#2FA1D6',
      },
      viewport: {
        ...DeckGLOverlay.defaultViewport,
        width: 500,
        height: 500
      },
      data: null,
      hoveredItem: null,
      clickedItem: null,
      queriedItems: null
    };

    requestCsv(DATA_URL, (error, response) => {
      if (!error) {
        const data = response.map(d => [Number(d.lng), Number(d.lat)]);
        this.setState({data});
      }
    });
  }

  componentDidMount() {
    window.addEventListener('resize', this._resize.bind(this));
    this._resize();
  }


  _resize() {
    this._onViewportChange({
      width: window.innerWidth,
      height: window.innerHeight
    });
  }

  _onViewportChange(viewport) {
    this.setState({
      viewport: {...this.state.viewport, ...viewport}
    });
  }

  onParentUpdate(datad) {
    this.setState({ datad });
  }

  onHover(info) {
  this.setState({hoveredItem: info});
}


  render() {
    const {viewport, datad, data} = this.state;

    return (
      <div>
          <MapGL
            {...viewport}
            mapStyle="mapbox://styles/mapbox/dark-v9"
            onViewportChange={this._onViewportChange.bind(this)}
            mapboxApiAccessToken={MAPBOX_TOKEN}
          >
            <DeckGLOverlay viewport={viewport}
            data={data || [] }
            datad = {this.state.datad }
            onLayerHover= {this.onHover}
          />
          </MapGL>

          <Controls
          onUpdate = {(datad) => this.onParentUpdate(datad)}
          datad = {this.state.datad}
          />

          <LayerInfo
            hovered={hoveredItem}
          />

     </div>

    );
  }
}

render(<Root />, document.body.appendChild(document.createElement('div')));

обновление: теперь я получаю другую ошибку "Uncaught ReferenceError: hoveredItem не определен"

Answer 1

В deckgl-overlay.js в методе рендеринга вы передаете hoveredItem в LayerInfo, но нет определения для него, таким образом, Uncaught ReferenceError,

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

const {viewport, datad, data, hoveredItem} = this.state;