百度熱力圖顔色說明_不止于2D，酷炫的地圖3D熱力圖實作解析

本期小編為大家帶來百度地圖可視化大屏解決方案技術解析系列文章之一，為您呈現3D熱力圖渲染技術。

首先先看下2d熱力圖和3d熱力圖生成的效果圖差別

業務及技術痛點

1. 很多行業資料使用3D熱力圖表達更為直覺
2. 目前的2D熱力圖表現力較差，且較為平淡

技術解決方案 使用Canvas繪制2D熱力圖方法回顧：

1. 準備包含權重值的熱力點資料

2. 為達到熱力圖的面狀彌散效果，使用額外的Canvas繪制一個帶模糊陰影漸變的灰階圓形當筆刷

3. 使用上面準備的漸變圓筆刷，根據不同資料的不同權重值進行不同透明度的疊加繪制，最終生成灰階熱力圖，熱力越高的地方，顔色不透明度越高

4. 準備漸變的調色闆 （上圖隻是灰階圖，為了讓不同熱度的地方可以用不同的顔色表示，需要生成一個漸變色的調色闆，用于後續給灰階圖進行着色）

5. 将灰階熱力圖使用調色闆着色最終生成2D熱力圖（根據灰階圖上每個像素的透明度，從上面準備的漸變色闆中的對應百分比位置拾取不同的顔色對灰階圖進行着色）

繪制3D熱力圖技術方法：

1. 1. 準備可以支援WebGL的地圖引擎（以百度智慧專網地圖DuGIS為例）
   2. 采用此前繪制2D熱力圖的步驟首先生成一個灰階熱力圖

3. 用灰階圖生成頂點網格（網格的高度值根據熱度權重值來生成，高度越高表示熱度也越高）

4. 給網格頂點着色（此步驟也需要用到漸變調色闆對頂點進行着色，為了便于檢視頂點效果，生成如下帶顔色的網格圖）

5. 給網格面着色（同樣根據頂點權重值，使用對應調色闆中對應的色值着色，生成最終的3D熱力圖）

成效

3D熱力圖渲染的技術，使原來對業務資料的簡單2D熱力表達獲得了更為生動、表現力更強的3D表達，展示效果更佳。3D熱力圖目前也相繼應用在了百度智慧交通大屏、百度人口監測大屏等解決方案中。

詳見公衆号文章：https://mp.weixin.qq.com/s?__biz=MzI5NDQ2Nzk3Ng==&mid=2247485057&idx=1&sn=90a39ee5674347ea5d98aceb030a072d