import React, {PureComponent} from 'react';
import {render} from 'react-dom';
import {StaticMap} from 'react-map-gl';
import DeckGL from '@deck.gl/react';
import {HeatmapLayer} from '@deck.gl/aggregation-layers';
import {ScatterplotLayer} from '@deck.gl/layers';
import manhattan from '../data/json/manhattan.json'
// Set your mapbox token here
const MAPBOX_TOKEN = 'pk.eyJ1IjoibHh0aWFudGlhbiIsImEiOiJjaXd2ZjlkYnQwMTZvMnRtYWZnM2lpbHFvIn0.ef3rFZTr9psmLWahrqap2A'; // eslint-disable-line
const INITIAL_VIEW_STATE = {
longitude: -74,
latitude: 40.7,
zoom: 11,
maxZoom: 16,
pitch: 0,
bearing: 0
};
class HeatMap extends PureComponent {
_renderLayers() {
const {intensity = 1, threshold = 0.03, radiusPixels = 30} = this.props;
return [
new HeatmapLayer({
data:manhattan,
id: 'heatmp-layer',
pickable: false,
getPosition: d => [d[0], d[1]],
getWeight: d => d[2],
radiusPixels,
intensity,
threshold
})
];
}
render() {
const {mapStyle = 'mapbox://styles/mapbox/dark-v9'} = this.props;
return (
<div>
<DeckGL
initialViewState={INITIAL_VIEW_STATE}
controller={true}
layers={this._renderLayers()}
>
<StaticMap
reuseMaps
mapStyle={mapStyle}
preventStyleDiffing={true}
mapboxApiAccessToken={MAPBOX_TOKEN}
/>
</DeckGL>
</div>
);
}
}
export default HeatMap;
效果展示: