react-amap-plugin-heatmap

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>