3D地圖中的熱力圖就是把3D地圖和熱力圖進行結合,實現在3D地圖中進行熱力圖的顯示,具體主要代碼如下(框架是Angular,引入Echarts插件之後,地圖插件也引入之後):
const option = {
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name + ' : ' + params.value;
}
},
visualMap: {
type: 'continuous',
show: true,
min: 0,
max: 15,
text: text,
inRange: {
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
},
},
series: [
{
type: 'map3D',
map: 'china',
postEffect: {
enable: true,
colorCorrection: {
lookupTexture: '../../../assets/images/hot.jpg'
}
},
light: {
main: {
intensity: 1,
shadow: true,
alpha: 150,
beta: 70
},
ambient: {
intensity: 0
},
ambientCubemap: {
diffuseIntensity: 1,
texture: '../../../assets/images/MonValley_A_LookoutPoint_2k.hdr'
}
},
groundPlane: {
show: true
},
data: data
}
]
};
具體的屬性在series中,type:'map3D’是把地圖設置爲3D地圖,map:'china’是把地圖的基底設置成中國地圖,也可以是世界地圖或者是城市地圖,關鍵在於前面所引用的地圖插件。
tooltip中的設置是提示框顯示,當鼠標觸摸到地圖上時,就會顯示地圖上區域的數據值,或者是一些區域信息;
visualMap中設置的是Echarts圖周邊的數據視覺組件,一般都是根據數據來改變顏色;
postEffect中設置的是對地圖的後期處理處理,可以去官網上查看詳細配置信息,3D地圖後期處理Echarts官網鏈接
groundPlane,light也是官網上一些3D地圖配置信息,可以在官網上查看詳細配置信息。