关于echart-gl加载世界地图的问题

1、需求分析：

设计需求一个旋转的地球仪作为背景

2、实现过程：

在echarts官网上有echarts-gl方法：http://echarts.baidu.com/examples/index.html#chart-type-globe

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、世界地图的资源集合

Highmaps 地图数据集：https://img.hcharts.cn/mapdata/

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里面的数据；

 

---