d3.js结合Heatmap.js

最新推荐文章于 2024-08-08 07:16:32 发布

Rapper金馆长

最新推荐文章于 2024-08-08 07:16:32 发布

阅读量2.8k

点赞数 2

分类专栏： html 文章标签： html d3.js heatmap.js

本文链接：https://blog.csdn.net/qq_21519863/article/details/78964202

版权

本文介绍了如何在d3.js基础上利用heatmap.js绘制GIS热力图，以满足特定需求。作者首先介绍了任务背景，即导师希望在地图上展示WiFi AP的使用热力图，但不满意百度地图的热力图效果。接着，作者探讨了如何将GIS数据转换为d3.js可接受的GeoJSON格式，并通过在SVG上添加canvas层，实现了在d3.js中使用heatmap.js的效果。过程中提到了数据转换、坐标映射以及在d3.js和heatmap.js结合中遇到的三个问题及其解决方案。

摘要由CSDN通过智能技术生成

最近一直在跟gis地图打交道,导师给我的任务是画出所有学校里wifi ap的使用热力图.

于是我接入了百度地图的api,费力地标出了所有wifi ap的坐标信息.最后,导师对百度地图的热力图不甚满意,emmmm.....并给我规定了使用d3.js画热力图.

但是d3所有的热力图都是这样的..

虽然这样的热力图也挺好看的,但是放到我们学校的地图上就不太行了.以下是用d3画我们学校热力图的效果.

但是技术栈又定死了要用d3,怎么办呢?于是我就想能不能在svg上加一层canvas,来实现在d3上画传统热力图的效果.于是就形成了d3.js结合heatmap.js的方案.

首先如何获得可以输入d3的json数据格式?这里推荐WOLFMAP地图下载器,用它的免费功能可以在实景地图上加标注并导出,细节就不多说了,最后导出标注的kml或者kmz文件.

然后放到这个链接 http://2geojson.com/ 里把它转换成d3能接收的geoson格式.

{
"type": "FeatureCollection",                                                                      
"features": [
{ "type": "Feature", "properties": { "Name": "电群1号