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

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

業務及技術痛點

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

技術解決方案

使用Canvas繪製2D熱力圖方法回顧：

  1. 準備包含權重值的熱力點數據

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

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

4. 準備漸變的調色板 （上圖只是灰度圖，為了讓不同熱度的地方可以用不同的顏色表示，需要生成一個漸變色的調色板，用於後續給灰度圖進行著色）

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

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

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

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

4. 給網格頂點著色（此步驟也需要用到漸變調色板對頂點進行著色，為了便於查看頂點效果，生成如下帶顏色的網格圖）

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

成效

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

詳見公眾號文章：mp.weixin.qq.com/s?


推薦閱讀：
相關文章