高德地图上绘制热力图的方法

 百度地图和高德地图的JavaScript API都提供了热力图的绘制方法,都是将热力图作为新的图层,叠加到地图上。但是百度地图的经纬度体系与我们的经纬度存在偏差,高德的与我们相符,应当使用高德地图JavaScript API。

因为是JavaScript API,所以地图展示是在网页上的。以高德地图的API使用为例:

在html文件中添加高德地图必须的script,其中第一行的key可以在高德官网免费申请。

准备-入门-教程-地图 JS API 1.4 | 高德地图API准备本章向您介绍使用高德地图JSAPI开发应用之前的一些准备工作。注册账号并申请Key1.首先,注册开发者账号,成为高德icon-default.png?t=N7T8https://lbs.amap.com/api/javascript-api/guide/abc/prepare

https://lbs.amap.com/api/javascript-api/guide/abc/prepare

   <title>热力图</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script src="http://webapi.amap.com/maps?v=1.3&key=    898eb************"></script>

 html源码如下:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>热力图</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script src="http://webapi.amap.com/maps?v=1.3&key=	898eb9*******************"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    <script type="text/javascript" src="http://a.amap.com/jsapi_demos/static/resource/heatmapData.js"></script>
</head>
<body>
<div id="container"></div>
<div class="button-group">
    <input type="button" class="button" value="显示热力图" οnclick="heatmap.show()"/>
    <input type="button" class="button" value="关闭热力图" οnclick="heatmap.hide()"/>
</div>
<script>
    var map = new AMap.Map("container", {
        resizeEnable:false,
        center: [121.196087,31.05471],   //华政经纬度
        zoom: 11
    });
    if (!isSupportCanvas()) {
        alert('热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试~')
    }
     var points =[
{"lat":31.05471,"lng":121.196087,"count":1},
{"lat":31.955631,"lng":121.457741,"count":1},
{"lat":31.993408,"lng":121.45536,"count":1},
{"lat":31.994091,"lng":121.454597,"count":1},
{"lat":31.994202,"lng":121.454788,"count":1},
{"lat":31.894291,"lng":121.46257,"count":1},
{"lat":31.892929,"lng":121.463181,"count":1},
{"lat":31.89317,"lng":121.462479,"count":1},
{"lat":31.969528,"lng":121.372078,"count":1},
{"lat":31.994122,"lng":121.45446,"count":1},
{"lat":31.993881,"lng":121.455231,"count":1},
{"lat":31.005829,"lng":121.452492,"count":1},
{"lat":32.020748,"lng":121.451881,"count":1},
{"lat":31.969421,"lng":121.372124,"count":1},
{"lat":31.994221,"lng":121.45443,"count":1},
{"lat":31.993809,"lng":121.455597,"count":1},
{"lat":31.993809,"lng":121.455597,"count":1},
{"lat":31.994202,"lng":121.454327,"count":1},
{"lat":31.99324,"lng":121.454758,"count":1},
{"lat":31.994221,"lng":121.454338,"count":1},
{"lat":31.992321,"lng":121.456612,"count":1},
{"lat":31.993241,"lng":121.454319,"count":1},
{"lat":31.89801,"lng":121.413247,"count":1},
{"lat":31.898361,"lng":121.415947,"count":1},
{"lat":31.897999,"lng":121.413278,"count":1},
{"lat":31.99371,"lng":121.454964,"count":1},
{"lat":31.993169,"lng":121.454559,"count":1},
{"lat":31.992512,"lng":121.454826,"count":1},
{"lat":31.993889,"lng":121.455231,"count":1},
{"lat":31.99318,"lng":121.455032,"count":1},
{"lat":31.895111,"lng":121.462273,"count":1},
{"lat":31.913422,"lng":121.415283,"count":1},
{"lat":31.993832,"lng":121.455311,"count":1},
{"lat":31.993649,"lng":121.454674,"count":1},
{"lat":31.951908,"lng":121.445137,"count":1},
{"lat":31.912979,"lng":121.415421,"count":1},
{"lat":31.993299,"lng":121.454857,"count":1},
{"lat":31.991989,"lng":121.454826,"count":1},
{"lat":31.912971,"lng":121.415466,"count":1},
{"lat":31.913052,"lng":121.415482,"count":1},
{"lat":31.912979,"lng":121.417778,"count":1},
{"lat":31.891682,"lng":121.463417,"count":1},
{"lat":31.894798,"lng":121.462471,"count":1},
{"lat":31.908428,"lng":121.427,"count":1},
{"lat":31.992981,"lng":121.454773,"count":1},
{"lat":31.99323,"lng":121.455132,"count":1},
{"lat":31.993591,"lng":121.455513,"count":1},
{"lat":31.89323,"lng":121.462997,"count":1},
{"lat":31.89323,"lng":121.462997,"count":1},
{"lat":32.249329,"lng":121.366669,"count":1},
{"lat":32.24934,"lng":121.366768,"count":1},
{"lat":31.991982,"lng":121.454826,"count":1},
{"lat":31.97134,"lng":121.45507,"count":1},
{"lat":31.999599,"lng":121.313296,"count":1},
{"lat":31.993131,"lng":121.454681,"count":1},
{"lat":31.993291,"lng":121.454437,"count":1},
{"lat":31.991989,"lng":121.454826,"count":1},
{"lat":31.890659,"lng":121.463791,"count":1},
{"lat":31.89325,"lng":121.463322,"count":1},
{"lat":31.894981,"lng":121.462181,"count":1},
{"lat":31.891472,"lng":121.463547,"count":1},
{"lat":31.99374,"lng":121.455177,"count":1},
{"lat":31.994202,"lng":121.454613,"count":1},
{"lat":31.977379,"lng":121.437683,"count":1},
{"lat":31.949791,"lng":121.462158,"count":1},
{"lat":31.895088,"lng":121.462219,"count":1},
{"lat":31.993192,"lng":121.455353,"count":1},
{"lat":31.993698,"lng":121.454941,"count":1},
{"lat":31.9921,"lng":121.454437,"count":1},
{"lat":31.89389,"lng":121.462334,"count":1},
{"lat":31.89238,"lng":121.463188,"count":1},
{"lat":31.99419,"lng":121.454514,"count":1},
{"lat":31.993328,"lng":121.455078,"count":1},
{"lat":31.993752,"lng":121.454773,"count":1},
{"lat":31.984779,"lng":121.467529,"count":1},
{"lat":31.890961,"lng":121.463692,"count":1},
{"lat":31.993858,"lng":121.455131,"count":1},
{"lat":31.99202,"lng":121.4552,"count":1},
{"lat":31.993729,"lng":121.455231,"count":1},
{"lat":31.994282,"lng":121.453819,"count":1},
{"lat":31.992649,"lng":121.455009,"count":1},
{"lat":31.99379,"lng":121.45462,"count":1},
{"lat":31.872292,"lng":121.316347,"count":1},
{"lat":31.870731,"lng":121.388618,"count":1},
{"lat":31.864349,"lng":121.377289,"count":1},
{"lat":31.719238,"lng":121.331802,"count":1},
{"lat":30.43782,"lng":121.455002,"count":1},
{"lat":30.03352,"lng":121.715134,"count":1},
{"lat":29.836868,"lng":121.090286,"count":1},
{"lat":30.246021,"lng":121.31308,"count":1},
{"lat":30.815498,"lng":121.230698,"count":1},
{"lat":31.99254,"lng":118.57972,"count":1},
{"lat":31.14229,"lng":121.38549,"count":1},
{"lat":31.993161,"lng":121.454727,"count":1},
{"lat":31.993118,"lng":121.455597,"count":1},
{"lat":31.946231,"lng":121.450321,"count":1},
{"lat":31.932121,"lng":121.45546,"count":1},
{"lat":31.99323,"lng":121.453157,"count":1},
{"lat":31.99295,"lng":121.455719,"count":1},
{"lat":31.99184,"lng":121.454819,"count":1},
{"lat":31.993241,"lng":121.454681,"count":1},
{"lat":31.99287,"lng":121.454742,"count":1},
{"lat":31.9931,"lng":121.455,"count":1},
{"lat":31.992741,"lng":121.455673,"count":1},
{"lat":31.994141,"lng":121.45491,"count":1},
{"lat":31.992229,"lng":121.454903,"count":1},
{"lat":31.99369,"lng":121.455383,"count":1},
{"lat":31.969921,"lng":121.49221,"count":1},
{"lat":31.997921,"lng":121.38343,"count":1},
{"lat":31.992619,"lng":121.453873,"count":1},
{"lat":31.992069,"lng":121.454826,"count":1},
{"lat":31.993679,"lng":121.454529,"count":1},
{"lat":32.065201,"lng":121.432068,"count":1},
{"lat":31.992149,"lng":121.454521,"count":1},
{"lat":31.99315,"lng":121.454559,"count":1},
{"lat":31.993851,"lng":121.45472,"count":1},
{"lat":31.993759,"lng":121.454529,"count":1},
{"lat":31.991508,"lng":121.45636,"count":1},
{"lat":31.993858,"lng":121.454979,"count":1},
{"lat":31.967789,"lng":121.452217,"count":1},
{"lat":31.99387,"lng":121.455193,"count":1},
{"lat":31.994179,"lng":121.454727,"count":1},
{"lat":31.992538,"lng":121.456459,"count":1},
{"lat":31.99382,"lng":121.454651,"count":1},
{"lat":31.994221,"lng":121.454872,"count":1},
{"lat":31.951038,"lng":121.471687,"count":1},
{"lat":31.99416,"lng":121.454552,"count":1},
{"lat":32.005821,"lng":121.457581,"count":1},
{"lat":31.97131,"lng":121.455131,"count":1},
{"lat":31.992691,"lng":121.456352,"count":1},
{"lat":31.99379,"lng":121.455048,"count":1},
{"lat":31.99328,"lng":121.454681,"count":1},
{"lat":31.893532,"lng":121.462914,"count":1},
{"lat":31.994129,"lng":121.455147,"count":1},
{"lat":31.99292,"lng":121.455643,"count":1},
{"lat":31.99292,"lng":121.455643,"count":1},
{"lat":31.99366,"lng":121.454567,"count":1},
{"lat":32.008179,"lng":121.460098,"count":1},
{"lat":31.993721,"lng":121.454727,"count":1},
{"lat":32.044231,"lng":121.280792,"count":1},
{"lat":31.971821,"lng":121.37314,"count":1},
{"lat":31.969509,"lng":121.370231,"count":1},
{"lat":31.993831,"lng":121.454659,"count":1},
{"lat":31.89526,"lng":121.466301,"count":1},
{"lat":31.894329,"lng":121.462463,"count":1},
{"lat":31.893089,"lng":121.46302,"count":1},
{"lat":31.894791,"lng":121.46228,"count":1},
{"lat":31.994221,"lng":121.454521,"count":1},
{"lat":31.89296,"lng":121.463112,"count":1},
{"lat":31.97855,"lng":121.369019,"count":1},
{"lat":31.99416,"lng":121.454102,"count":1},
{"lat":31.99411,"lng":121.454422,"count":1},
{"lat":31.894711,"lng":121.46257,"count":1},
{"lat":31.890781,"lng":121.463707,"count":1},
{"lat":31.994129,"lng":121.454422,"count":1}];
    //详细的参数,可以查看heatmap.js的文档 http://www.patrick-wied.at/static/heatmapjs/docs.html
    //参数说明如下:
    /* visible 热力图是否显示,默认为true
     * opacity 热力图的透明度,分别对应heatmap.js的minOpacity和maxOpacity
     * radius 势力图的每个点的半径大小   
     * gradient  {JSON} 热力图的渐变区间 . gradient如下所示
     * {
     .2:'rgb(0, 255, 255)',
     .5:'rgb(0, 110, 255)',
     .8:'rgb(100, 0, 255)'
     }
     其中 key 表示插值的位置, 0-1 
     value 为颜色值 
     */
    var heatmap;
    map.plugin(["AMap.Heatmap"], function() {
        //初始化heatmap对象
        heatmap = new AMap.Heatmap(map, {
            radius: 15, //给定半径
            opacity: [0, 0.8]
            /*,gradient:{
             0.5: 'blue',
             0.65: 'rgb(121,211,248)',
             0.7: 'rgb(0, 255, 0)',
             0.9: '#ffea00',
             1.0: 'red'
             }*/
        });
        //设置数据集
        heatmap.setDataSet({
            data: points,
            max: 5
        });
    });
    //判断浏览区是否支持canvas
    function isSupportCanvas() {
        var elem = document.createElement('canvas');
        return !!(elem.getContext && elem.getContext('2d'));
    }
</script>
</body>
</html>

<think>好的,用户的问题是关于如何在高德地图中实现点位叠加、热力以及例的功能。我需要结合提供的三个引用内容来给出解决方案。首先,用户提到的引用1和2都提到了使用高德地图的JavaScript API绘制热力,并且强调高德的经纬度体系与用户的数据相符,应该使用高德而不是百度。引用3虽然提到了Android的高德地图热力,但用户的问题可能更偏向Web端,不过里面的参数文档链接可能有用。 用户的需求包括点位叠加、热力例。我需要分步骤说明如何实现这三个功能。首先,创建底是基础,引用2中提到了使用AMap.Map创建底。然后,叠加点位的话,可能需要使用覆盖物,比如Marker或者点层。热力的实现部分,引用1和2都提到将热力作为层叠加,所以需要配置热力的data和options,并添加到地上。例部分可能需要自定义DOM元素,根据热力的颜色梯度来显示,这部分需要参考heatmap.js的文档(引用3中的链接)。 接下来需要考虑代码示例的结构。先初始化地,然后添加点位,可以使用点聚合或者直接添加多个点。热力的配置需要设置半径、渐变颜色等参数。例部分需要创建一个div,用CSS渐变背景,并标注数值范围。 还需要注意参数的正确性,比如heatmap的data格式是包含经纬度和权重的对象数组,坐标是否使用高德的坐标系。另外,引用3中的文档链接可能提供更详细的参数说明,需要提醒用户参考。 最后,相关问题部分需要生成用户可能进一步询问的问题,比如如何调整热力的样式、如何处理大量数据、如何动态更新热力等。确保回答结构清晰,步骤明确,帮助用户逐步实现功能。</think>### 高德地图实现点位叠加与热力例 #### 一、实现步骤 1. **初始化地容器** ```html <div id="container" style="width: 100%; height: 600px;"></div> ``` 2. **创建底实例** ```javascript var map = new AMap.Map('container', { zoom: 10, center: [116.397428, 39.90923] // 初始中心点坐标 }); ``` 3. **添加点位叠加(点层)** ```javascript // 示例数据(经纬度需使用高德坐标系) var points = [ { lng: 116.397428, lat: 39.90923, count: 10 }, { lng: 116.487856, lat: 39.90816, count: 20 } ]; // 创建点层(可自定义标) var markers = points.map(point => { return new AMap.Marker({ position: [point.lng, point.lat], content: `<div style="background:red;border-radius:50%;width:10px;height:10px"></div>` }); }); map.add(markers); ``` 4. **叠加热力层**[^2] ```javascript var heatmap; AMap.plugin(['AMap.Heatmap'], function() { heatmap = new AMap.Heatmap(map, { radius: 25, // 热力点半径 gradient: { // 颜色渐变配置 0.4: 'blue', 0.6: 'green', 0.8: 'yellow', 1.0: 'red' } }); heatmap.setDataSet({ data: points.map(p => ({ lng: p.lng, lat: p.lat, count: p.count })), max: 100 // 最大权重值 }); }); ``` 5. **添加例(自定义DOM实现)** ```html <div id="legend" style="position:absolute; bottom:20px; left:20px; background:white; padding:10px"> <div style="background: linear-gradient(to right, blue 0%, green 30%, yellow 60%, red 100%); width:200px; height:20px"></div> <div style="display:flex; justify-content:space-between"> <span>0</span><span>50</span><span>100</span> </div> </div> ``` #### 二、关键参数说明 1. **热力参数** - `radius`: 热力影响半径(像素) - `opacity`: 层透明度 - `gradient`: 颜色梯度映射规则[^3] 2. **性能优化建议** - 超过1万数据点时建议服务端生成静态热力片 - 使用`setTimeout`分批次渲染大数据量 #### 三、完整示例参考 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://webapi.amap.com/maps?v=2.0&key=您的key"></script> </head> <body> <div id="container"></div> <div id="legend"></div> <script> // 初始化地 var map = new AMap.Map('container', { zoom: 11 }); // 添加热力 AMap.plugin(['AMap.Heatmap'], function() { var heatmap = new AMap.Heatmap(map, { radius: 25, gradient: { 0.4:'blue', 0.6:'green', 0.8:'yellow', 1.0:'red' } }); heatmap.setDataSet({ data: getRandomData(), // 生成测试数据 max: 100 }); }); // 生成模拟数据函数 function getRandomData() { // 返回包含{lng, lat, count}的数组 } </script> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MC数据局

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值