bdMap/htmls/mapV/40-canvas-point-simple.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;
    }

    #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()]
      },
      fillStyle: 'red',
      size: 30
    },
    {
      geometry: {
        type: 'Point',
        coordinates: [ctx.canvas.width * Math.random(), ctx.canvas.height * Math.random()]
      },
      fillStyle: 'blue',
      size: 20
    },
    {
      geometry: {
        type: 'Point',
        coordinates: [ctx.canvas.width * Math.random(), ctx.canvas.height * Math.random()]
      },
      fillStyle: 'rgba(255, 255, 50, 0.5)',
      size: 90
    }
  ];

  var randomCount = 300;
  while (randomCount--) {
    data.push({
      geometry: {
        type: 'Point',
        coordinates: [ctx.canvas.width * Math.random(), ctx.canvas.height * Math.random()]
      },
      fillStyle: 'rgba(' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', ' + ~~(Math.random() * 255) + ', 0.8)',
      size: 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)',
    shadowBlur: 10,
    draw: 'simple'
  }

  mapv.canvasResolutionScale(ctx);

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

</script>

</body>
</html>