基于高德地图, 动态数据设置热力图

最新推荐文章于 2024-04-01 14:44:15 发布

qq_41737172

最新推荐文章于 2024-04-01 14:44:15 发布

阅读量1.1k

点赞数

文章标签：数据可视化

本文链接：https://blog.csdn.net/qq_41737172/article/details/117984192

版权

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="//a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
  <style>
    html,
    body,
    #container {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div id="container"></div>
</body>
<script src="//webapi.amap.com/maps?v=1.4.14&key=e3c23244fa7d4a21a4e31c2db69ee6d6"></script>
<script src="//webapi.amap.com/loca?v=1.3.0&key=e3c23244fa7d4a21a4e31c2db69ee6d6"></script>
<script src="//a.amap.com/Loca/static/dist/jquery.min.js"></script>
<script>
  var map = new AMap.Map('container', {
    //zoom: 10,
    zoom: 7,
    resizeEnable: true,
    //center: [116.39,39.9]
    center: [106.55, 29.57]
  });

  // map.setFeatures(['road', 'point'])//多个种类要素显示

  // map.plugin(["AMap.ToolBar"], function () {
  //   map.addControl(new AMap.ToolBar()); // 工具条控件
  // });

  // 坐标点
  var points = [
    // longitude 经度
    { "lng": 105.795545, "lat": 29.74814, "count": 51 },
    { "lng": 109.887206, "lat": 31.236759, "count": 20 },
    { "lng": 107.767851, "lat": 29.417501, "count": 100 },
    { "lng": 108.750152, "lat": 28.851412, "count": 10 },
    { "lng": 106.996368, "lat": 28.885217, "count": 7 },
    { "lng": 107.127392, "lat": 29.049247, "count": 30 },
    { "lng": 106.409199, "lat": 28.606263, "count": 66 },
    { "lng": 108.993301, "lat": 30.656046, "count": 20 },
  ];

  var heatmap;
  map.plugin(["AMap.Heatmap"], function () {
    //初始化heatmap对象
    heatmap = new AMap.Heatmap(map, {
      radius: 25, //给定半径(热力图显示的圆点的半径)
      opacity: [0, 0.8]
      /*,gradient:{
       0.5: 'blue',
       0.65: 'rgb(117,211,248)',
       0.7: 'rgb(0, 255, 0)',
       0.9: '#ffea00',
       1.0: 'red'
       }*/
    });
    //设置数据集：max是最大数值, 红色显示
    heatmap.setDataSet({
      data: points,
      max: 100
    });
  });
</script>
</html>

qq_41737172

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
基于高德地图, 动态数据设置热力图

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="//a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /> <style> html, body, #.
复制链接

扫一扫