基于高德地图API — 绘制热力图初尝试

最新推荐文章于 2024-08-05 15:24:11 发布

真不吃香菜

最新推荐文章于 2024-08-05 15:24:11 发布

阅读量4.4k

点赞数 1

分类专栏：鸡毛蒜皮文章标签：高德地图API 热力图 heatmap 前端 map

本文链接：https://blog.csdn.net/Cici__zc/article/details/119802695

版权

鸡毛蒜皮专栏收录该内容

9 篇文章 0 订阅

订阅专栏

初次了解高德地图，并尝试在地图的基础上绘制热力图。

官方传送链接高德开放平台。

前提准备

点击注册开发者账号
登录成功后，点击左侧菜单栏「应用管理」，如图所示，点击「添加」获取API，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

在这里插入图片描述

回到页面

引入文件：

引入官方CSS文件，也可以下载在本地引入
引入官方APIhttps://webapi.amap.com/maps?v=2.0&key=你的key值
引入官方热力图数据，如果你自己有后台的热力图数据，可以不引入这个

创建底图

创建一个容器，创建地图实例，通过AMap.Map创建底图，配置属性
剩下的JS代码加载地图、加载热力图

以下是源码，涉及数据隐私所有数据都已修改。

<!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>