Echarts中3D地圖熱力圖

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地圖配置信息,可以在官網上查看詳細配置信息。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章