第122期：高德地图绘制热力图遇到的一个问题

封面图

中午出去吃饭拍的一张图片【SRR308 自动驾驶毫米波雷达】

场景

项目中有个地方需要绘制热力图，第一个版本比较简单，服务端用python的库生成一个热力图的静态资源（html文件）放到阿里云的云存储上（oss）给前端返回一个地址的链接，前端直接用iframe渲染这个界面就行。

目前新的需求是，热力图需要前端自己绘制，并且需需要能够支持点击时获取对应的坐标信息即坐标附带的自定义信息，比如：

let data = [
    {
     lng:120:55045,
     lat:39.78653,
     img:'test.img',
     ...
    }
]

获取到相应的数据后，根据img等信息调另外的接口处理其他的逻辑。

热力图的绘制方案

前端可视化的方案通常有以下几种方式：

1. Echarts
2. antv
3. bizChart
4. 百度地图jsApi
5. 高德地图jsApi
6. 腾讯地图jsApi

其中前三种主要用来做数据的可视化，主要用来绘制折线图，并图，散点图，直方图等图标。

后三种地图主要用来绘制与地图相关的功能，也可以使用他们的可视化功能做一些可视化的功能。

在前几天和后端对接需求的时候，最初准备采用的方案是echarts，因为它相对来说比较常见，相对来说比较简单，但是结合地图绘制热力图需要申请百度地图的key ,公司目前只有高德地图的相关服务账号，所以临时决定用高德地图的相关api完成这个需求。

绘制热力图

高德地图的api分为两个部分，地图JS API和 LOCA 数据可视化API。当然还有其他的api，因为我的需求只用到这两个API，所以写这里就写这两个API。

接入过程非常简单，只需要按照文档上的demo，正常接入即可：

1. 安装 jsapi-loader

npm i @amap/amap-jsapi-loader --save

2. 编写加载代码

import AMapLoader from '@amap/amap-jsapi-loader';
AMapLoader.load({
    "key": "", // 申请好的Web端开发者Key，首次调用 load 时必填 
    "version": "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 
    "plugins": [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    }).then((AMap)=>{
        map = new AMap.Map('container');
    }).catch(e => { console.log(e); })

上面的代码可以把地图正常加载出来，加载热力图需要用别的代码，方式有两种，一种是用地图jsAPi，另一种是用loca数据可视化API。

1. 用地图jsAPI方式。

AMap中有一个HeatMap的属性,它属于高德地图的一个自有数据图层，用于加载展示开发者自己拥有的数据或者图像的图层类型。示例代码如下：

var heatmap;
var points = [
   {"lng":116.191031,"lat":39.988585,"count":10},
   {"lng":116.389275,"lat":39.925818,"count":11},
   {"lng":116.287444,"lat":39.810742,"count":12},
   {"lng":116.481707,"lat":39.940089,"count":13},
   {"lng":116.410588,"lat":39.880172,"count":14},
   {"lng":116.394816,"lat":39.91181,"count":15},
   {"lng":116.416002,"lat":39.952917,"count":16},
];
// 加载热力图插件
map.plugin(["AMap.HeatMap"],function(){
   // 在地图对象叠加热力图
   heatmap = new AMap.Heatmap({map:map});
   // 设置热力图数据集
   heatmap.setDataSet({data:points,max:100});
});

2. 用loca可视化API方案

Loca 我个人理解为创建图层，不同的效果需要创建不同的图层，官方提供有点云图层，散点图层，热力图层等等。

我们的业务需求是热力图，所以需要用​​Loca.HeatMapLayer()​​构造函数去实例化一个热力图的图层，示例代码如下：

var heatmapLayer = new Loca.HeatMapLayer({
    loca: loca,
    zooms: [2, 20],
    zIndex: 10,
    visible: true,
    opacity: 1,
})

设置图层样式

heatmapLayer.setStyle({
    // 除了 gradient 属性，其他的缺省属性将恢复默认值。
    gradient: {
         0.5: 'blue',
         0.65: 'rgb(117,211,248)',
         0.7: 'rgb(0, 255, 0)',
         0.9: '#ffea00',
         1.0: 'red',
     },
     opacity: [0, 1],
     unit: 'meter',
     height: 9000,
     radius: 5000,
     difference: false,
});

点击获取热力图图层中的信息

热力图非常容易绘制，但是想要获取到点击地图时，对应的热力点的信息，这个问题是个难点。

因为地图可以添加点击事件，地图上的覆盖物也可以添加点击事件，但是数据图层我翻了相关的文档，也试着添加了click事件，但是没有找到相关的内容，添加的点击事件也不起作用。

没有好的方案时，干脆提了一个工单问了客服，得到的结果如下：

只能将事件绑定在地图上，但是点击地图获取的坐标跟后端返回的坐标精度又不是一个等级，而且用的坐标系也不一定是同一个坐标系。

所以这个问题，目前我也没有什么好的方案去解决，实在不行就看看换个实现方式吧