基于高德地图api的热力图实现，详细到每一步,各个框架都能用做业务时一个热力图需求，经过调研后完成。 max：代表热点图

做业务时一个热力图需求，经过调研后完成。因为实在不想写json数据，这里用官网的例子举例 lbs.amap.com/api/javascr… 具体热力图出来的样子就是如图：

第一步：你需要一个高德key值其中需要的key，可以注册高德地图开发者后，在我的应用中找到（需要创建一个应用）把key值放在这里，这个引入放在项目最外面的index.html里就可以

第二步:需要填数据这里的数据格式是：

var heatmapData = [

{"lng":"116.311322","lat":"39.957033","count":1},

{"lng":"116.16741","lat":"39.89261","count":2}
];

第三步：具体需求具体定制

1.配置api:

angular框架

declare var AMap: any; // 声明AMap不然会报错在这个文件中声明、

vue框架：blog.csdn.net/XU441520/ar…

这个文章描述的很详细

2.生成模型

// 此处的hotMap是你html页面div的id

let map = new AMap.Map("hotMap", { 

     resizeEnable: true,      // 是否监控地图容器尺寸变化，默认值为false
      center: [116.418261, 39.921984],  // 	地图中心点坐标值
      zoom: 9.5,    // zoom表示地图打开时候默认的缩放级别，数值变大，地图相当于放大，看见的                         // 实际面积减小，内容变详细
      mapStyle:'amap://styles/596486b8b145fxxxxxxxx'  //设置地图的显示样式
      //  此处官网支持两种样式，一种自定义，一种默认，这个后面会单独详细讲
});

let heatmap;

map.plugin(["AMap.Heatmap"], function () {

    //初始化heatmap对象
    heatmap = new AMap.Heatmap(map, {
        radius: 25, //给定半径
        opacity: [0, 0.8],
        gradient:{
          0.3: 'blue',
          0.5: 'green',
          0.7: 'yellow',
          0.9: 'red'
       }
    });
    //设置数据集
    heatmap.setDataSet({
        data: heatmapData,    // 此处填入你整理好的数据
        max: 100
    });
});

参数详解：

max：代表热点图区分热度的界限，某地区的点数超过max一定比例，即显示对应gradient配置的颜色。

gradient：

用法：设 (某点范围内点数目(数据中的count) / max) 为x,举个例子：x=100/100=1（此处的1用于gradient的参数）,x > 0.9，则目标区域显示的颜色为红色 radius:控制单个点的笼罩半径，半径范围内所有的点都会算作此点的数目，变相增大 x 的值。设置合适的半径，确定每个点的笼罩范围，单位是px。

基本需求的热力图基本完成

1.具体样式定制：

正常地图颜色是白色的，但是也许这个不符合你的需求，lbs.amap.com/dev/mapstyl… 此处连接可以自定义地图，点击此处的使用与分享获取到样式id ,填在之前的代码 mapStyle:'amap://styles/你的id'

2.地图绘制区域边界线以广东省作为例子：地图绘制边界后就有明显的区分。

步骤：

获取目标区域的边界坐标点（通过高德AMap.DistrictSearch这个插件获取边界坐标点）

const opts = {
  subdistrict: 0,   
  extensions: 'all', 
  level: 'district'  
};
//实例化DistrictSearch
const district = new AMap.DistrictSearch(opts);
district.setLevel('district');

参数详解： 2.绘制边界

通过AMap.Polygon对象在地图上绘制多边形。

handlePolygon(result) {
// 此处可以写名字，也可以写区域编码
district.search('广东', (status, result) => {
  const polygons = [];
  const bounds = result.districtList[0].boundaries;
  if (bounds) {
    for (let i = 0, l = bounds.length; i < l; i++) {
    //每个区域可能有分能几个小块，比如金山区除了有一块陆地圈，还有海上独立的三个小岛
      // 生成行政区划polygon
      const polygon = new AMap.Polygon({
        map:map,    // 指定地图对象 （此处就是前面声明的map数据）
        strokeWeight: 3,    // 轮廓线宽度
        path: bounds[i],    //轮廓线的节点坐标数组
        fillColor: '#7EE8F2', // 多边形填充颜色
        fillOpacity: 0.01,    //透明度
        borderWeight: 1, // 线条宽度，默认为 1
        strokeColor: '#00ffff', // 线条颜色
      });
      polygons.push(polygon);
    }
  }
  map.setFitView(polygons); // 视口自适应
});

3.自定义边界(绘制3d的那种感觉，突出所选区域部分,使用高德地图绘制多边形区域)

先给map添加属性

var map = new AMap.Map('hotmap',{
viewMode:'3D'    // 开启3d视图
})

1. const object3Dlayer = new AMap.Object3DLayer();

// 图层类，用于添加所有Object3D类型

 const arr = '121.86412811,31.1146794,121.88112258,31.130991200,'

// 你自定义边界的坐标

 for (let i = 0; i < arr.length; i++) {
 path.push(new AMap.LngLat(parseFloat(arr[0]),  parseFloat(arr[1])));
 }

 const polygon =  new AMap.Object3D.Prism({
      path: path,
      height: 5000,
      color: 'rgba(9,35,74, 0.2)'
 });
 polygon.transparent = true;  // 表示是否使用了透明颜色，并进行颜色混合
 object3Dlayer.add(polygon);  // 创建一个Object3DLayer
 // 外多边形坐标数组和内多边形坐标数组
 const outer = [
      new AMap.LngLat(-360, 90, true),
      new AMap.LngLat(-360, -90, true),
      new AMap.LngLat(360, -90, true),
      new AMap.LngLat(360, 90, true),
 ];
 const pathArray = [outer];
 pathArray.push.apply(pathArray, [path])
 // AMap.Polygon覆盖物>多边形
 const polygon2 = new AMap.Polygon( {
      map:map,
      strokeWeight: 3,
      pathL: pathArray,
      fillColor: '#7EE8F2', // 多边形填充颜色
      fillOpacity: 0.01,
      borderWeight: 1, // 线条宽度，默认为 1
      strokeColor: '#00ffff', // 线条颜色
    });
    polygon2.setPath(pathArray);
    map.add(polygon2)