1、需求分析：

設計需求一個旋轉的地球儀作為背景

2、實現過程：

option = {
    backgroundColor: '#000',
    globe: {
        baseTexture: 'data-gl/asset/earth.jpg',
        heightTexture: 'data-gl/asset/bathymetry_bw_composite_4k.jpg',
        displacementScale: 0.1,
        shading: 'lambert',
        environment: 'data-gl/asset/starfield.jpg',
        light: {
            ambient: {
                intensity: 0.1
            },
            main: {
                intensity: 1.5
            }
        },
        layers: [{
            type: 'blend',
            blendTo: 'emission',
            texture: 'data-gl/asset/night.jpg'
        }, {
            type: 'overlay',
            texture: 'data-gl/asset/clouds.png',
            shading: 'lambert',
            distance: 5
        }]
    },
    series: []
}
 

option.globe.baseTexture是地球的紋理，可以通過兩種方式：

a、支援圖片路徑字串，圖片或者 Canvas 的物件；

baseTexture: 'asset/earth.jpg'

let getOption = function (svg) {
  let option = {
    backgroundColor: 'rgba(0,0,0,0)',
    globe: {
      show: !!svg,
      baseTexture: svg,
      displacementScale: 0.4,
      shading: 'color',//地球中三維圖形的著色效果,通過經典的 lambert 著色表現光照帶來的明暗
      viewControl: {
        rotateSensitivity:0
      },
      light: {
        ambient: {
          intensity: 0.5//全域性的環境光設定。環境光的強度。
        },
        main: {//場景主光源的設定，在 globe 元件中就是太陽光
          intensity: 1//主光源的強度。
        }
      },
      postEffect:{
        enable:true,
        bloom:100,
      }
    },
    series: []
  };
  return option;
};

//可能會出現圖片還未載入完全，出現白球旋轉
let image = new Image();
image.onload = () => {
     this.options = getOption(image);
};
image.src = world;

 

b、直接使用 echarts 的例項作為紋理，此時在地球上的滑鼠動作會跟紋理上使用的 echarts 例項有聯動；

var canvas = document.createElement('canvas');
var mapChart = echarts.init(canvas, null, {
    width: 4096, height: 2048
});
mapChart.setOption({
    series : [
        {
            type: 'map',
            map: 'world',
            // 繪製完整尺寸的 echarts 例項
            top: 0, left: 0,
            right: 0, bottom: 0,
            boundingCoords: [[-180, 90], [180, -90]]
        }
    ]
});
...
baseTexture: mapChart
 

3、世界地圖的資源集合

echarts可使用的world.json檔案集合：可以發郵件找我 [email protected]；

4、問題集合

a、在載入地圖資料的時候出現大白球

分析：當專案打包後，請求的資料還沒有返回時，echarts-gl就開始渲染了，所以會出現白球情況；

解決方式：增加判斷，在載入完地球紋理圖片之後再將option.globe.show=true

b、使用world.json進行渲染時，會出現球體旋轉卡頓掉幀的情況

分析：因為球體旋轉的視覺效果是通過重複執行setOption來實現的，每次都使用echarts畫一次world.json世界地圖的canvas，再將該canvas渲染至echarts-gl球體，會非常消耗效能；

解決方式：在echarts重複渲染球體之前將地圖先畫出，並作為引數傳進來【避免紋理圖片重複渲染】；需求只是需要背景圖，不需要精確的地理位置，使用圖片代替world.json渲染出的canvas圖形；圖片可以使用highmaps裡面的資料；