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';
// Set your mapbox token here
const MAPBOX_TOKEN = "pk.eyJ1IjoibHh0aWFudGlhbiIsImEiOiJjaXd2ZjlkYnQwMTZvMnRtYWZnM2lpbHFvIn0.ef3rFZTr9psmLWahrqap2A"; // eslint-disable-line
const url = window.config.url;
const DATA_URL = url + 'static/data/json/locations.json';
const INITIAL_VIEW_STATE = {
longitude: -73.75,
latitude: 40.73,
zoom: 9,
maxZoom: 16,
pitch: 0,
bearing: 0
};
export default class App extends PureComponent {
_renderLayers() {
const {
data = DATA_URL, intensity = 1, threshold = 0.03, radiusPixels = 30
} = this.props;
return [
new HeatmapLayer({
data,
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>
);
}
}
效果展示: