热力地图高德_HeatMap丨丨基于高德地图API制作热力图。

在除夕夜 ,是的!你没看错!看了一篇帖子是关于利用 Python+百度地图做了一个热力图展示,觉得很有意思。于是乎我利用高德API做了一个3d热力图展示。

1地图API准备

高德API开放平台网页,找到web端,打开示例中心,点开3D基本热力图,如图所示,将html代码复制出来。

高德API开放平台

示例中心

我用的是HBuilder,认真查查代码后你会发现热力图数据就是这个js文件里,查看其数据格式为:

[{"lng":116.0653415,"lat":39.65001942,"value":50}]

其实就是一个标准的json数据格式,这就好办了。

3D基本热力图html代码

热力图数据格式

本地新建JavaScript文件

建一个本地的JavaScript文件 用于可调用的heatmapData.js

2数据准备

无意中翻出2017年11月9日中午12点的热力图数据,有492241条,数据量有些大。利用在线excel转json 将数据转换为json格式。我们全选这些数据,复制到notepad++,中将数据格式编辑为与所需要的数据格式。

原始数据

excel转json在线编译器

转json完成的结果

3数据编辑

notepad++ 打开数据

notepad++ 编辑jso数据格式

复制、保存JS文件之后

修改调用JS文件的路径

4热力图

以网页浏览的方式打开本地的html

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
高德地图 API 提供了热力图的 JavaScript API。通过该 API,您可以在网页上展示高德地图热力图功能。您可以使用以下步骤来使用高德地图 API热力图功能: 1. 在您的网页中引入高德地图的 JavaScript API。您可以使用以下代码将高德地图 JavaScript API 引入到您的网页中: ```html <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的API Key"></script> ``` 2. 创建一个地图容器。您可以在网页中创建一个 `<div>` 元素作为地图容器,例如: ```html <div id="mapContainer" style="width: 100%; height: 400px;"></div> ``` 3. 初始化地图对象。在 JavaScript 代码中,您可以使用以下代码初始化地图对象: ```javascript var map = new AMap.Map('mapContainer', { zoom: 13, // 缩放级别 center: [116.397428, 39.90923] // 地图中心点坐标 }); ``` 4. 添加热力图层。在 JavaScript 代码中,您可以使用以下代码创建并添加热力图层: ```javascript var heatmap; AMap.plugin(['AMap.Heatmap'], function() { heatmap = new AMap.Heatmap(map, { radius: 25, // 热力图点半径 opacity: [0, 0.8], // 热力图透明度范围 gradient: { 0.5: 'blue', 0.65: 'rgb(117,211,248)', 0.7: 'rgb(0, 255, 0)', 0.9: '#ffea00', 1.0: 'red' } // 热力图渐变区间颜色 }); // 设置热力图数据 heatmap.setDataSet({ data: 热力图数据数组 }); }); ``` 请注意,上述代码中的 `您申请的API Key` 需要替换为您在高德开放平台申请的 API Key。热力图数据数组需要根据您的实际需求进行提供。 通过以上步骤,您就可以在网页中使用高德地图 API热力图功能了。更多详细的文档和示例代码可以参考高德地图开放平台的官方文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值