一、前言

最近工作上需要實現一個地圖動畫效果，簡單的動畫效果，是的，簡單；不過在此之前，我并不認為它簡單，需要有一點點的webgl、three.js的基礎。

效果大概就是一個網格起伏熱力圖的動畫，像心跳一樣、heartbeat……，像這樣。

A grid heat map

上面這個動效，它好像是基于一個gltf模型來做的，它不給地圖交互，現在我們也想實現類似的效果，我們最后實現的效果跟這個效果比還有點差距，我們慢慢靠近它，然后再做的更好。

現在有8個月的道路違法停車數據，基于這八個月的數據，做空間插值，生成規則網格。基于規則網格數據，使用mapboxgl和three.js來實現類似的這個效果。我的github地址。

https://github.com/limzgiser/mapbox-gl-grid-heatmap?github.com

二、數據準備

通過空間插值、生成漁網、統計網格違停數量，網格轉出矩陣點，重復處理八個月的數據。熟悉ArcMap或QGIS的同學，這些數據處理過程應該比較熟悉的，如何服務化處理這個過程是需要考慮的。或者你采用一些圖像處理的方式，來處理這些數據。這里不介紹數據處理過程。列出數據處理后的結果數據。

八個月的違法停車數據（經度、維度、違停量）

-9999 是空值

經度

為了方便后面繪圖，將八個月的數據合并為一個文件，每條記錄表示一個網格點，分別為：經度坐標、維度坐標、一到八月違停數量。

合并后八個月的違停網格數據經度

三、繪制網格

再確認一下，我們的數據結構。一共201行、198列，共39789個點 ，每條記錄包含如下信息。

經度

1、坐標轉換

在mapboxgl中繪制的是投影坐標，我們讀取數據將數據轉換為投影坐標。threebox是mapboxgl的一個插件，他可以幫助我們在mapboxgl中使用three.js開發擴展。

// tb - threebox對象，連接mapboxgl和three.js的插件

2、獲取網格線

我的網格是按列排序的，網格點的索引是按照列向遞增的。最終繪制的是網格線，所以需要提取網格線。如果，我們有一個畫筆，可以一筆畫出一個201*198的棋盤嗎？答案是可以的，只不過會出現重復的路徑，你可以從性能優化的方面考慮，在這里做優化，繪制幾根線，盡量少點。為了簡單，我就繪制201行+198列 = 399條線來生成網格。

function

3、繪制網格線

畫線的時候，需要注意，我們繪制的線有點特殊，每個節點都有高度和顏色屬性。線段的節點顏色不同，webgl在光柵化的時候，線段中間的顏色會根據節點顏色進行插值。網格熱圖的效果就是這么做的。

function

節點的顏色和高度自然就根據每個網格點的違停插值量來計算。提前定制一個色帶，因為，我不想每個顏色都去創建一個THREE.Color對象。如果你嫌太高，可以在上面Z值乘上一個Z方向的縮放系數。

let

4、繪制結果

結果是這樣的，看起來，是我們預期的結果。

四、網格動畫

動畫就是“補間”，彌補中間值。某一個網格點從一月的違停數量 1 增加到 10 ，我們希望它這個過程用時兩秒，就需要中間插值。插多少呢？如果，我們希望一秒達到55幁，當然一秒能不能達到55，這是由瀏覽器決定的，假如我們機器跟得上。想要網格點用時兩秒從1平緩的變到10，我需要在中間插值110個點左右。

1、補間插值

tween.js 是一個很不錯的補間動畫庫。例如：endPointIndex 從0增長到60 ，這個過程希望用3秒的時間。同時可以監測到值變化的中間過程，和動畫完成后的回調函數。

let

給每一條線添加一個索引index，這樣，我們遍歷每一條線的時候可以快速找到每條線對于的頂點坐標。

alllines

2、計算中間值

遍歷所有線，修改每一條線頂點的高度和顏色。直接使用違法停車量來作為頂點高度，這個值太大，我們乘上一個縮放系數scale。動畫插值的過程，中間值（高度）:

• begain :起始值，案例中表示當前網格點一月份的違停量
• end ：終點值，案例中表示當前網格點二月份的違停量
• timeInCount：補間/插值數量

let

3、連續2月動畫

tween.js支持動畫鏈接，可以將多個動畫鏈接起來，tween1.chain(tween2);我們把一月份和二月份動畫鏈接起來，1->2->1，結果像這樣，看起來像那么回事兒了。

lineGroup

4、連續8月動畫

同理：我們把八個月的數據鏈接起來，效果像這樣。

五、顏色混合

如何去除值為零的點，如果從數據層面來討論這個問題，稍有繁瑣，就是我們在繪制線的時候直接跳過值為零的點。這里使用顏色混合的方式來去除值為零的點。

如果你學習過webgl，那你應該知道gl.blendFunc()函數。three.js材質Material的blending屬性可以用來控制紋理的疊加方式。three.js中提供了幾種顏色混合方式:

• THREE.NormalBlending:.blending屬性默認值
• THREE.AdditiveBlending:加法融合模式
• THREE.SubtractiveBlending:減法融合模式
• THREE.MultiplyBlending:乘法融合模式
• THREE.CustomBlending:自定義融合模式

我不太了解顏色混合的模型和算法。加法混合模式，為什么會是顏色變亮？我需要去補補這方面的知識。我將零值網格點的顏色設置為（0,0,0）黑色。采用加法混合的方式，可以將零值點去掉。不過，我本來設置的色帶會變的更亮，所以我們的從新設置色帶顏色，來使得我們的動畫好看一點，盡管我最后配置的顏色還是并不理想。

let

最后的結果是像這樣。

六、總結

工作中編寫的案例，分享一下，如何你也有要實現類似的效果，希望對你有所幫助。首先，對數據要求是規則的網格，你可以使用arcmap,qgis類似的軟件，來處理數據，也可以是自己編寫的數據處理工具；地圖使用mapboxg；動畫實現方面，使用了three.js + tween.js。需要對webgl和three.js有了解，就可以實現類似的動畫效果。

總結

以上是生活随笔為你收集整理的cesium three性能比较_mapboxgl + three 动画 — 网格热图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。