初次了解高德地图，并尝试在地图的基础上绘制热力图。
官方传送链接高德开放平台。
引入文件：
https://webapi.amap.com/maps?v=2.0&key=你的key值
创建底图
以下是源码，涉及数据隐私所有数据都已修改。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>new</title>
<link rel="stylesheet" href="./demo-center.css">
<script src="https://webapi.amap.com/maps?v=2.0&key=你的key值"></script>
<script src="https://a.amap.com/jsapi_demos/static/resource/heatmapData.js"></script>
</head>
<body>
<div id="container" style="width: 800px;height: 600px;"></div>
<script>
var points = [
{
"GROUP_ID": "57510",
"GRID_ID": "120.590",
"LNG": "120.599",
"LAT": "30.122",
"COUNT": 1
},
{
"GROUP_ID": "5710",
"GRID_ID": "120.892",
"LNG": "120.899",
"LAT": "29.507",
"COUNT": 1
},
{
"GROUP_ID": "5751",
"GRID_ID": "120.583",
"LNG": "120.586",
"LAT": "30.099",
"COUNT": 1
},
{
"GROUP_ID": "5751",
"GRID_ID": "120.67",
"LNG": "120.617",
"LAT": "30.047",
"COUNT": 1
},
{
"GROUP_ID": "57514",
"GRID_ID": "120.93",
"LNG": "120.590",
"LAT": "30.118",
"COUNT": 1
},
{
"GROUP_ID": "5754",
"GRID_ID": "120.98",
"LNG": "120.598",
"LAT": "30.108",
"COUNT": 1
},
{
"GROUP_ID": "57054",
"GRID_ID": "120.24",
"LNG": "120.604",
"LAT": "30.024",
"COUNT": 1
}
]
// 先转换大小写，再把多余的数据删去
points.forEach((item) => {
for (var key in item) {
var lowerkey = key.toLowerCase();
//赋给新的属性名，删除旧的
item[lowerkey] = item[key];
delete item[key];
}
delete item.group_id;
delete item.grid_id;
})
console.log(points);
var map = new AMap.Map("container", {
// 地图的缩放等级
zoom: 10,
// 开启地图时的中心点
center: [120.5, 30.22],
// 是否监控地图容器尺寸变化
resizeEnable: true
});
// console.log(map);
var heatmap;
map.plugin(["AMap.HeatMap"], function () {
//初始化heatmap对象
heatmap = new AMap.HeatMap(map, {
radius: 15, //给定半径
opacity: [0, 0.8]
// gradient:{
// 0.2: 'blue',
// 0.25: 'rgb(117,211,248)',
// 0.3: 'rgb(0, 255, 0)',
// 0.35: '#ffea00',
// 0.7: 'red'
// }
});
console.log(heatmap);
// 设置数据集，这个数据是绍兴周围部分地区
heatmap.setDataSet({
data: points,
// max最大数值，红色显示
// 因为给的热力值较小，max之前设置的是100，只能增大热力值才会有效果
max: 0
});
});
</script>
</body>
</html>
