如何用高德API制作热力地形图

张謹礧

已于 2025-01-11 12:59:51 修改

阅读量1k

点赞数 4

文章标签：信息可视化高德API html

于 2025-01-11 12:35:54 首次发布

本文链接：https://blog.csdn.net/weixin_66547608/article/details/145075632

版权

HTML 结构：
- 页面头部设置了字符编码、IE 兼容性以及视口相关的元数据。
- 引入了一个外部样式表 demo - center.css，并在内部样式中设置了 html、body 和 #container 的样式，使其占据整个页面。
- 页面主体部分包含一个 id 为 container 的 div，用于显示地图。另外还有两个按钮，分别用于显示和隐藏热力图。
JavaScript 代码：
- 首先创建了一个高德地图实例 map，设置地图的容器为 #container，初始中心坐标为 [114.05867, 32.116885]，缩放级别为 11。
- 检查浏览器是否支持 canvas，如果不支持则弹出提示框告知用户热力图仅适用于支持 canvas 的浏览器。
- 使用 map.plugin 方法加载 AMap.HeatMap 插件，初始化热力图对象 heatmap。在初始化时设置了热力图的半径为 100，透明度范围为 [0, 32]（这里透明度设置可能有误，opacity 应该是一个数组，如 [minOpacity, maxOpacity]，通常取值范围是 0 - 1）。
- 通过 heatmap.setDataSet 方法设置热力图的数据，数据集中包含多个点的经纬度和计数信息，同时设置了数据的最大值 max 为 220。
- 定义了 isSupportCanvas 函数用于判断浏览器是否支持 canvas。
- 定义了 showHeatmap 和 hideHeatmap 函数，分别用于显示和隐藏热力图。
- 为页面上的 “显示热力图” 和 “关闭热力图” 按钮添加点击事件监听器，调用相应的显示和隐藏函数。

可能的改进点：

透明度设置：opacity 的值 [0, 32] 可能不符合预期，应将其调整为 [0, 1] 范围内的数值，例如 [0.2, 0.8]。
API Key：代码中使用 您申请的key值 作为高德地图 API 的密钥，实际使用时应替换为真实有效的 API 密钥。
错误处理：在加载插件和设置数据集时，可以添加更多的错误处理机制，以提高代码的健壮性。例如，在 map.plugin 的回调函数中，可以检查插件是否成功加载。

完整代码：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>热力图</title>
    <link rel="stylesheet" href="https://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>
<div class="input-card" style="width: auto;">
    <div class="input-item">
        <button class="btn" id="show-btn">显示热力图</button>
    </div>
    <div class="input-item">
        <button class="btn" id="hide-btn">关闭热力图</button>
    </div>
</div>
<script src="https://webapi.amap.com/maps?v=2.0&key=1e31659e58fa7666fe0d08f4487ec5c2"></script>
<script src="https://a.amap.com/jsapi_demos/static/resource/heatmapData.js"></script>
<script>
    var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [114.91934, 32.010736],
        zoom: 9
    });
    map.setMapStyle('amap://styles/fresh');
    if (!isSupportCanvas()) {
        alert('热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~')
    }
 
    //详细的参数,可以查看heatmap.js的文档 http://www.patrick-wied.at/static/heatmapjs/docs.html
    //参数说明如下:
    /* visible 热力图是否显示,默认为true
     * opacity 热力图的透明度,分别对应heatmap.js的minOpacity和maxOpacity
     * radius 势力图的每个点的半径大小
     * gradient  {JSON} 热力图的渐变区间 . gradient如下所示
     *	{
     .2:'rgb(0, 255, 255)',
     .5:'rgb(0, 110, 255)',
     .8:'rgb(100, 0, 255)'
     }
     其中 key 表示插值的位置, 0-1
     value 为颜色值
     */
    var heatmap;
    map.plugin(["AMap.HeatMap"], function () {
        //初始化heatmap对象
        heatmap = new AMap.HeatMap(map, {
            radius: 100, //给定半径
            opacity: [0, 32]
            /*,
            gradient:{
                0.5: 'blue',
                0.65: 'rgb(117,211,248)',
                0.7: 'rgb(0, 255, 0)',
                0.9: '#ffea00',
                1.0: 'red'
            }
             */
        });
        //设置数据集：该数据为北京部分“公园”数据
        heatmap.setDataSet({
            data:[{
	"lng": 114.05867,
	"lat": 32.116885,
	"count": 200
}, {
	"lng": 114.125595,
	"lat": 32.101005,
	"count": 220
}, {
	"lng": 114.512838,
	"lat": 32.20436,
	"count": 120
}, {
	"lng": 114.91934,
	"lat": 32.010736,
	"count": 100
}, {
	"lng": 114.740392,
	"lat": 32.34312,
	"count": 100
}, {
	"lng": 114.91934,
	"lat": 32.010736,
	"count": 90
}, {
	"lng": 114.879309,
	"lat": 31.643914,
	"count": 100
}, {
	"lng": 115.051683,
	"lat": 32.131426,
	"count": 120
}, {
	"lng": 115.420101,
	"lat": 32.474772,
	"count": 180
}, {
	"lng": 115.406894,
	"lat": 31.79832,
	"count": 190
}, {
	"lng": 115.654066,
	"lat": 32.169239,
	"count": 200
}],
            max: 220
        });
    });
 
    //判断浏览区是否支持canvas
    function isSupportCanvas() {
        var elem = document.createElement('canvas');
        return !!(elem.getContext && elem.getContext('2d'));
    }
  
  	function showHeatmap(){
    	heatmap.show()
    }
  
  	function hideHeatmap(){
    	heatmap.hide()
    }
  
  	document.getElementById('show-btn').addEventListener('click', showHeatmap);
  	document.getElementById('hide-btn').addEventListener('click', hideHeatmap);
</script>
</body>
</html>

效果展示：