本期小编为大家带来百度地图可视化大屏解决方案技术解析系列文章之一，为您呈现3D热力图渲染技术。
首先先看下2d热力图和3d热力图生成的效果图区别
业务及技术痛点
很多行业数据使用3D热力图表达更为直观目前的2D热力图表现力较差，且较为平淡
技术解决方案
使用Canvas绘制2D热力图方法回顾：
准备包含权重值的热力点数据
2. 为达到热力图的面状弥散效果，使用额外的Canvas绘制一个带模糊阴影渐变的灰度圆形当笔刷
3. 使用上面准备的渐变圆笔刷，根据不同数据的不同权重值进行不同透明度的叠加绘制，最终生成灰度热力图，热力越高的地方，颜色不透明度越高
4. 准备渐变的调色板 （上图只是灰度图，为了让不同热度的地方可以用不同的颜色表示，需要生成一个渐变色的调色板，用于后续给灰度图进行着色）
5. 将灰度热力图使用调色板着色最终生成2D热力图（根据灰度图上每个像素的透明度，从上面准备的渐变色板中的对应百分比位置拾取不同的颜色对灰度图进行着色）
绘制3D热力图技术方法：
准备可以支持WebGL的地图引擎（以百度智慧专网地图DuGIS为例）采用此前绘制2D热力图的步骤首先生成一个灰度热力图
3. 用灰度图生成顶点网格（网格的高度值根据热度权重值来生成，高度越高表示热度也越高）
4. 给网格顶点着色（此步骤也需要用到渐变调色板对顶点进行着色，为了便于查看顶点效果，生成如下带颜色的网格图）
5. 给网格面着色（同样根据顶点权重值，使用对应调色板中对应的色值着色，生成最终的3D热力图）
成效
3D热力图渲染的技术，使原来对业务数据的简单2D热力表达获得了更为生动、表现力更强的3D表达，展示效果更佳。3D热力图目前也相继应用在了百度智慧交通大屏、百度人口监测大屏等解决方案中。
详见公众号文章：https://mp./s?__biz=MzI5NDQ2Nzk3Ng==&mid=2247485057&idx=1&sn=90a39ee5674347ea5d98aceb030a072d
