React-map-gl + deck.gl 实现Hexagon图层添加

import React, {Component} from 'react';
import {render} from 'react-dom';
import {StaticMap} from 'react-map-gl';
import {AmbientLight, PointLight, LightingEffect} from '@deck.gl/core';
import {HexagonLayer} from '@deck.gl/aggregation-layers';
import DeckGL from '@deck.gl/react';

import heatMapData from '../data/csv/heatMap.csv'
/**六边形层呈现一个基于点阵列的六边形热图。
它取六边形容器的半径，将点投射到六边形容器中。
六边形的高度是由它包含的点的数量决定的 */

const MAPBOX_TOKEN = 'pk.eyJ1IjoibHh0aWFudGlhbiIsImEiOiJjaXd2ZjlkYnQwMTZvMnRtYWZnM2lpbHFvIn0.ef3rFZTr9psmLWahrqap2A'; // eslint-disable-line
let data;
const url = window.config.url;
const DATA_URL = url + 'static/data/csv/heatMap.csv';
// const DATA_URL = 'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/3d-heatmap/heatmap-data.csv'; // eslint-disable-line

const ambientLight = new AmbientLight({
  color: [255, 255, 255],
  intensity: 1.0
});

const pointLight1 = new PointLight({
  color: [255, 255, 255],
  intensity: 0.8,
  position: [-0.144528, 49.739968, 80000]
});

const pointLight2 = new PointLight({
  color: [255, 255, 255],
  intensity: 0.8,
  position: [-3.807751, 54.104682, 8000]
});

const lightingEffect = new LightingEffect({ambientLight, pointLight1, pointLight2});

const material = {
  ambient: 0.64,
  diffuse: 0.6,
  shininess: 32,
  specularColor: [51, 51, 51]
};

const INITIAL_VIEW_STATE = {
  longitude: -1.4157267858730052,
  latitude: 52.232395363869415,
  zoom: 6.6,
  minZoom: 5,
  maxZoom: 15,
  pitch: 40.5,
  bearing: -27.396674584323023
};

const colorRange = [
  [1, 152, 189],
  [73, 227, 206],
  [216, 254, 181],
  [254, 237, 177],
  [254, 173, 84],
  [209, 55, 78]
];

const elevationScale = {min: 1, max: 50};

/* eslint-disable react/no-deprecated */
class HexagonMap extends Component {
  static get defaultColorRange() {
    return colorRange;
  }

  constructor(props) {
    super(props);
    this.state = {
      elevationScale: elevationScale.min,
      data:[]
    };
  }

  componentWillMount () {
    require('d3-request').csv(DATA_URL, (error, response) => {
      if (!error) {
        data = response.map(d => [Number(d.lng), Number(d.lat)]);
        console.log("data",data);
        this.setState({data});
      }
    });
  }

  _renderLayers() {
    // coverage：六棱柱的半径乘法器，值的大小为=coverage*radius. 取值0-1。radius：六棱柱范围大小、半径。upperPwecentile:有颜色的六棱柱大于百分位的被隐藏：取值范围：1-100%
    // lowerPercentile：有颜色的六棱柱低于百分位的被隐藏，取值1-100
    // elevationUpperPercentile：海拔高度的'海拔上百分位'。具有高程值的六边形大于标高的上百分位将被隐藏。
    // elevationLowerPercentile：海拔高度的'海拔上百分位'。具有高程值的六边形小于标高的上百分位将被隐藏。
    const {radius = 1000, upperPercentile = 100, coverage = 1} = this.props;
    const { data } =this.state;
    console.log("data",data);
    return [
      new HexagonLayer({
        id: 'heatmap',
        colorRange,
        coverage,
        data,
        elevationRange: [0, 3000],
        elevationScale: data && data.length ? 50 : 0,
        extruded: true,
        getPosition: d => d,
        onHover: this.props.onHover,
        pickable: Boolean(this.props.onHover),
        radius,
        upperPercentile,
        material,

        transitions: {
          elevationScale: 3000
        }
      })
    ];
  }

  render() {
    const {mapStyle = 'mapbox://styles/mapbox/dark-v9'} = this.props;

    return (
      <DeckGL
        layers={this._renderLayers()}
        effects={[lightingEffect]}
        initialViewState={INITIAL_VIEW_STATE}
        controller={true}
      >
        <StaticMap
          reuseMaps
          mapStyle={mapStyle}
          preventStyleDiffing={true}
          mapboxApiAccessToken={MAPBOX_TOKEN}
        />
      </DeckGL>
    );
  }
}



export default HexagonMap;

效果展示：