Echarts中3D地图热力图

Myth丶恋晨 2022-05-10 18:36 2162阅读 0赞

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官网链接][3D_Echarts]  
groundPlane，light也是官网上一些3D地图配置信息，可以在官网上查看详细配置信息。

[3D_Echarts]: http://www.echartsjs.com/option-gl.html#series-map3D.postEffect