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



©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,107评论 19 139
  • 刘岳想初夏,谁也不知道他在多少个夜晚寂静无声的哭,谁也看不到他几次开着车走神差一点出事,谁也想不到他每次都是从有初...
    田伯虎阅读 282评论 0 1
  • 母亲在信中说,她现在两眼昏花,手也粗笨了不少,穿针引线都很困难,所以,那双布鞋,至今还没做好...... 读着那黄...
    写手丹凤晒晒阅读 678评论 2 2
  • 我所理解的孤独是 你本来一个人生活的好好的,突然有一个人闯入了你的世界,在陪伴你短暂的走过人生中一段路途之后又悄悄...
    伯伦希尔阅读 174评论 0 0
  • 前两天我回广州到我爸我妈那地方住的时候,我发现一个很有意思的现象,家里面楼下的保安,我们想象中的保安应该是一个中青...
    朱进伟西农阅读 1,162评论 0 1