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

terrence386

发布于 2022-12-14 08:17:11

1.5K0

发布于 2022-12-14 08:17:11

文章被收录于专栏：JavaScript高级程序设计

封面图

image.png

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

场景

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

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

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

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

热力图的绘制方案

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

Echarts
antv
bizChart
百度地图jsApi
高德地图jsApi
腾讯地图jsApi

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

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

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

绘制热力图

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

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

安装 jsapi-loader

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

编写加载代码

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。

用地图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});
});

用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,
});