Heatmap Plugin for react-amap
Configurable props are
- visible
- radius
- gradient
- zooms
- dataSet
Visit AMap doc for details about every prop;
import { Map } from 'react-amap'; import Heatmap from 'react-amap-plugin-heatmap'; const points = [ {"lng":116.191031,"lat":39.988585,"count":10}, {"lng":116.389275,"lat":39.925818,"count":11}, {"lng":116.287444,"lat":39.810742,"count":12}, {"lng":116.481707,"lat":39.940089,"count":13}, {"lng":116.410588,"lat":39.880172,"count":14}, {"lng":116.394816,"lat":39.91181,"count":15}, {"lng":116.416002,"lat":39.952917,"count":16} ]; // config props const visible = true; const radius = 30; const gradient = { '0.4':'rgb(0, 255, 255)', '0.65':'rgb(0, 110, 255)', '0.85':'rgb(100, 0, 255)', '1.0':'rgb(100, 0, 255)' }; const zooms = [3, 18]; const dataSet = { data: points, max: 100 } const pluginProps = { visible, radius, gradient, zooms, dataSet } // render <Map> <Heatmap {...pluginProps} /> </Map>