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地图配置信息,可以在官网上查看详细配置信息。