bdMap/htmls/mapV/36-canvas-heatmap.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>

  <style type="text/css">
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background: rgba(0, 0, 255, 0.05);
    }

    #canvas {
    }
  </style>
</head>
<body>

<canvas id="canvas"></canvas>

<script type="text/javascript" src="../../js/mapv.js"></script>

<script type="text/javascript">

  var canvas = document.querySelector('#canvas');

  canvas.width = document.body.offsetWidth;
  canvas.height = document.body.offsetHeight;

  var ctx = canvas.getContext('2d');

  var data = [
    {
      geometry: {
        type: 'Point',
        coordinates: [ctx.canvas.width * Math.random(), ctx.canvas.height * Math.random()]
      },
      count: 30
    },
    {
      geometry: {
        type: 'Point',
        coordinates: [ctx.canvas.width * Math.random(), ctx.canvas.height * Math.random()]
      },
      count: 30
    },
    {
      geometry: {
        type: 'Point',
        coordinates: [ctx.canvas.width * Math.random(), ctx.canvas.height * Math.random()]
      },
      count: 30
    }
  ];

  var randomCount = 900;
  while (randomCount--) {
    data.push({
      geometry: {
        type: 'Point',
        coordinates: [ctx.canvas.width * Math.random(), ctx.canvas.height * Math.random()]
      },
      count: Math.random() * 30 + 5
    });
  }

  var dataSet = new mapv.DataSet(data);

  var options = {
    fillStyle: 'rgba(55, 50, 250, 0.3)',
    shadowColor: 'rgba(55, 50, 250, 0.8)',
    globalCompositeOperation: 'lighter',
    shadowBlur: 10,
    size: 13,
    max: 30,
    maxOpacity: 0.7,
    draw: 'heatmap'
  }

  mapv.canvasDrawHeatmap.draw(ctx, dataSet, options);

</script>

</body>
</html>