百度地圖JSAPI THREE 熱力圖開發教程：從 2D 到 3D 的完整實踐
熱力圖是一種常見的數據可視化方式，通過顏色深淺來展示數據的密度分佈。在 MapVThree 中，提供了兩種熱力圖組件：Heatmap（2D 熱力圖）和 Heatmap3D（3D 熱力圖）。
一、環境準備
在使用熱力圖之前，需要先創建一個 MapVThree 引擎實例。這是所有地圖可視化功能的基礎容器。
import * as mapvthree from '@baidu/mapv-three';
// 創建引擎實例
const engine = new mapvthree.Engine(document.getElementById('map_container'), {
rendering: {
enableAnimationLoop: false, // 禁用自動渲染循環，手動控制渲染
},
});
// 設置地圖中心點和縮放級別
const center = [116.414, 39.915];
engine.map.setCenter(center);
engine.map.setZoom(16);在這一點上，我們通過 Engine 構造函數創建了地圖引擎，並配置了基本的渲染選項。enableAnimationLoop: false 表示禁用自動渲染循環，這樣可以更精確地控制渲染時機，提升性能。
二、2D 熱力圖（Heatmap）基礎使用
2.1 創建熱力圖實例
2D 熱力圖是最常用的熱力圖類型，適合展示平面上的數據密度分佈。
const heatmap = engine.add(new mapvthree.Heatmap({
radius: 30, // 熱力點的影響半徑
keepSize: true, // 保持熱力點大小不隨地圖縮放變化
maxValue: 10, // 熱力值的最大值
attenuateMValueFactor: 0.9, // 衰減因子，控制熱力值的衰減速度
}));這裏的關鍵參數包括：
- radius：控制每個數據點的影響範圍，數值越大，熱力影響範圍越廣
- keepSize：設置為
true時，熱力點的大小不會隨地圖縮放級別變化 - maxValue：定義熱力值的上限，用於歸一化數據
- attenuateMValueFactor：衰減因子，影響熱力值從中心向外的衰減速度
2.2 設置數據源
熱力圖需要數據源來提供位置信息和數值。MapVThree 支持通過 GeoJSONDataSource 來加載數據。
// 從 GeoJSON 數據創建數據源
const geoJsonData = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [116.414, 39.915]
},
properties: {
count: 5
}
},
// ... 更多數據點
]
};
const dataSource = mapvthree.GeoJSONDataSource.fromGeoJSON(geoJsonData);
// 定義數據屬性
dataSource.defineAttribute('count');
// 將數據源綁定到熱力圖
heatmap.dataSource = dataSource;為了實現這個目標，我們首先創建了 GeoJSON 格式的數據，然後通過 GeoJSONDataSource.fromGeoJSON() 方法轉換為數據源。defineAttribute('count') 定義了數據中的 count 屬性，這個屬性將作為熱力值的依據。
通過 addPrepareRenderListener 可以監聽渲染前的回調，在這裏可以根據當前地圖狀態調整熱力圖參數。註釋中的代碼展示瞭如何根據縮放級別動態調整半徑。
2.3 自定義漸變色
熱力圖支持自定義漸變色方案，可以更好地匹配你的設計需求。
// 設置自定義漸變色
heatmap.gradient = {
0: 'blue', // 最小值對應的顏色
0.5: 'cyan', // 中間值對應的顏色
1: 'red' // 最大值對應的顏色
};漸變色的鍵值對錶示從 0 到 1 的歸一化值，對應的顏色值可以是 CSS 顏色字符串或十六進制顏色碼。
三、3D 熱力圖（Heatmap3D）進階應用
3D 熱力圖在 2D 熱力圖的基礎上增加了高度維度，可以更直觀地展示數據強度。
3.1 創建 3D 熱力圖
const heatmap3D = engine.add(new mapvthree.Heatmap3D({
radius: 100, // 熱力點的影響半徑
maxValue: 2, // 熱力值的最大值
heightRatio: 1200, // 高度比例，控制 3D 柱狀圖的高度
}));3D 熱力圖的參數與 2D 版本類似，但增加了 heightRatio 參數：
- heightRatio：控制 3D 柱狀圖的高度比例，數值越大，高度差異越明顯
3.2 數據源設置
3D 熱力圖的數據源設置方式與 2D 版本完全相同。
const dataSource = mapvthree.GeoJSONDataSource.fromGeoJSON(geoJsonData);
heatmap3D.dataSource = dataSource;四、性能優化建議
在實際項目中，熱力圖可能包含大量數據點，因此性能優化至關重要。
4.1 控制渲染時機
對於不需要實時更新的場景，可以禁用自動渲染循環，手動控制渲染時機。
const engine = new mapvthree.Engine(container, {
rendering: {
enableAnimationLoop: false,
},
});
// 在數據更新後手動觸發渲染
const requestRender = () => engine.requestRender();五、常見應用場景
5.1 人口密度分佈
使用熱力圖展示城市人口密度分佈，幫助城市規劃者瞭解人口聚集區域。
5.2 交通流量分析
通過熱力圖展示道路上的交通流量，顏色越深表示流量越大。
5.3 用户行為分析
在電商或社交應用中，使用熱力圖展示用户點擊、瀏覽等行為的分佈情況。
5.4 環境監測
展示温度、濕度、空氣質量等環境監測數據，通過顏色變化直觀反映環境狀況。
六、總結
MapVThree 提供了強大而靈活的熱力圖功能，無論是 2D 還是 3D 版本，都能滿足不同場景下的數據可視化需求。通過合理配置參數、優化數據源和性能，可以創建出既美觀又高效的熱力圖可視化效果。
在實際開發中，建議：
- 根據數據特點選擇合適的熱力圖類型（2D 或 3D）
- 通過調整
radius、maxValue等參數優化視覺效果 - 注意性能優化，特別是處理大量數據時
- 利用自定義漸變色匹配項目設計風格
希望本文能幫助你快速上手 MapVThree 的熱力圖功能，在實際項目中發揮數據可視化的價值。
