echarts-webGL地球

3d地图参考
https://echarts.apache.org/examples/zh/editor.html?c=globe-echarts-gl-hello-world&gl=1
https://echarts.apache.org/examples/zh/editor.html?c=globe-atmosphere&gl=1

WEBGL文档 https://echarts.apache.org/zh/option-gl.html#globe

<template>
  <div class="chart" ref="box"/>
</template>
<script>
import {
  onMounted, getCurrentInstance, defineComponent
} from 'vue';
import * as echarts from 'echarts/core';
import {
  CanvasRenderer
} from 'echarts/renderers';
import {
  GlobeComponent
} from 'echarts-gl/components';
echarts.use(
  [GlobeComponent, CanvasRenderer]
);
const ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
export default defineComponent({
  setup() {
    onMounted(() => {
      const { ctx } = getCurrentInstance();
      const element = ctx.$refs.box;
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(element);
      // 绘制图表
      myChart.setOption({
        backgroundColor: '#000',
        globe: {
          // 基础纹理贴图
          baseTexture: `${ROOT_PATH}/data-gl/asset/world.topo.bathy.200401.jpg`,
          // 高度纹理贴图
          heightTexture: `${ROOT_PATH}/data-gl/asset/world.topo.bathy.200401.jpg`,
          // 地球定点位置，让地球更加立体
          displacementScale: 0.04,
          // 地球的大小
          globeRadius: 80,
          shading: 'realistic',
          // 背景贴图
          environment: `${ROOT_PATH}/data-gl/asset/starfield.jpg`,
          realisticMaterial: {
            // 0 表示光滑，1 粗糙
            roughness: 0.8
          },
          postEffect: {
            enable: true
          },
          // 光源
          light: {
            main: {
              intensity: 5,
              shadow: true
            },
            ambientCubemap: {
              texture: `${ROOT_PATH}/data-gl/asset/pisa.hdr`,
              diffuseIntensity: 0.2
            }
          }
        }
      });
    });
  },
});
</script>
<style scoped>
.chart {
  height: 100%;
}
</style>