在deck.gl中悬停

Question

我在deck.gl遇到了一个僵局，希望你们能帮我摆脱困境。我还不能理解如何显示hexagonLayer示例中的栏的属性，该示例显示在deck.gl官方网页https://uber.github.io/deck.gl/#/examples/core-layers/hexagon-layer中。GitHub中提供的示例没有此功能，而且浏览器层对我来说太复杂了。我尝试合并层浏览器示例中嵌入的layer-info组件，但是我不明白什么是(info)，并且我一直收到这个错误：

“模块解析失败:您可能需要适当的加载器来处理此文件类型。

非常感谢您的宝贵时间！我是react的新手！如果这是微不足道的，我很抱歉。

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 =MBToken

    // 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 = MBToken; // 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')));

更新:我现在收到另一个错误“未捕获ReferenceError:未定义hoveredItem”

Answer 1

在deckgl-overlay.js中的render方法中，您将hoveredItem传递给LayerInfo，但没有为其定义，因此没有定义Uncaught ReferenceError。

因为它似乎存储在组件状态中，所以您应该在render方法的顶部定义它，如下所示：

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