3d地球散点图加路径lines3D的实现，带有散点即路径的立体地球

一、 globe+lines3D+scatter3D

效果图:

 安装

npm install echarts echarts-gl

代码 

<template>
  <div id="myecharts"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "Globe",
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {
    this.echartsInit();
  },
  methods: {
    echartsInit() {
      require("echarts-gl");
      const series = [
        {
          type: "lines3D",
          effect: {
            show: true,
            period: 3, // 尾迹特性周期
            trailLength: 0.1, // 尾迹0~1，线条长度的百分比
          },
          lineStyle: {
            color: "#d9d919",
            width: 2,
            opacity: 0.4,
          },
          data: [
            [[114.175193,22.275706],[120.4574,-1.743046]],
            [[126.964746,37.58644],[139.767187,35.715616]],
            [[-118.24762,34.058993],[139.767187,35.715616]]
          ]
          // data: this.activeData(this.linesData) // 大多数情况下数据是请求后再经过处理而来
          /*
          起点经纬度 终点经纬度
          [
            [[fromx0,fromy0],[tox0,toy0]],
            [[fromx1,fromy1],[tox1,toy1]]
          ]
          */
        },
        {
          type: "lines3D",
          lineStyle: {
            color: "#fff",
            width: 2,
            opacity: 0.6,
          },
          // data: this.normalData(this.linesData),
          data: [
            [[114.175193,22.275706],[100.454152,13.731434]],
            [[114.175193,22.275706],[2.332962,48.864677]],
            [[101.684555,3.15663],[114.175193,22.275706]],
            [[-118.24762,34.058993],[151.210446,-33.875774]]
          ]
        },
        {
          type: "scatter3D",
          coordinateSystem: "globe",
          zlevel: 3,
          label: {
            show: true,
            position: "bottom",
            formatter: "{b}",
            fontSize: 16
          },
          itemStyle: {
            color: "#d9d919",
          },
          data: [
            {"name":"香港","value":[114.175193,22.275706]},
            {"name":"东京","value":[139.767187,35.715616]},
            {"name":"首尔","value":[126.964746,37.58644]},
            {"name":"印尼","value":[120.4574,-1.743046]},
            {"name":"洛杉矶","value":[-118.24762,34.058993]}
          ],
        },
        {
          type: "scatter3D",
          coordinateSystem: "globe", // 使用的坐标系
          zlevel: 3,
          label: {
            show: true,
            position: "bottom",
            formatter: "{b}",
            fontSize: 16
          },
          itemStyle: {
            color: "#fff",
          },
          data: [
            {"name":"吉隆坡","value":[101.684555,3.15663]},
            {"name":"曼谷","value":[100.454152,13.731434]},
            {"name":"悉尼","value":[151.210446,-33.875774]},
            {"name":"巴黎","value":[2.332962,48.864677]}
          ]
          /*
          [
            {
              name: '',
              value: [lng,lat]
            }
          ]
          */
        }
      ];
      const myecharts = echarts.init(document.getElementById("myecharts"));
      const option = {
        backgroundColor: "#000",
        globe: {
          baseTexture: require('@/assets/images/world.jpg'), // 地球的纹理
          shading: "lambert",
          atmosphere: { // 不需要大气光圈去掉即可
            show: true,
            offset: 4 // 大气层光圈宽度
          },
          viewControl: {
            distance: 200 // 默认视角距离地球表面距离
          },
          light: {
            ambient: {
              intensity: 1.3, // 全局的环境光设置
            },
            main: {
              intensity: 1.5, // 场景主光源设置
            },
          },
        },
        series: series,
      };
      myecharts.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
#myecharts {
  width: 900px;
  height: 900px;
  margin: 0 auto;
}
</style>

问题

散点图使用的是scatter3D,可以看到文字不是贴合在地球表面，某些角度文字会被遮挡(对此没有要求的话，到这里就行了)。尝试了几种方案最终解决问题，以下是散点图贴合地球表面的做法

二、globe+lines3D+scatter 

效果图：

安装

npm install echarts echarts-gl

代码

<template>
  <div id="myecharts"></div>
</template>

<script>
import * as echarts from "echarts";
require('@/assets/js/world.js')
export default {
  name: "Globe",
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {
    this.echartsInit();
  },
  methods: {
    echartsInit() {
      require("echarts-gl");
      const series = [
        {
          type: "lines3D",
          effect: {
            show: true,
            period: 3, // 尾迹特性周期
            trailLength: 0.1, // 尾迹0~1，线条长度的百分比
          },
          lineStyle: {
            color: "#d9d919",
            width: 2,
            opacity: 0.4,
          },
          data: [
            [[114.175193,22.275706],[120.4574,-1.743046]],
            [[126.964746,37.58644],[139.767187,35.715616]],
            [[-118.24762,34.058993],[139.767187,35.715616]]
          ]
          // data: this.activeData(this.linesData) // 大多数情况下数据是请求后再经过处理而来
          /*
          起点经纬度 终点经纬度
          [
            [[fromx0,fromy0],[tox0,toy0]],
            [[fromx1,fromy1],[tox1,toy1]]
          ]
          */
        },
        {
          type: "lines3D",
          lineStyle: {
            color: "#fff",
            width: 2,
            opacity: 0.6,
          },
          // data: this.normalData(this.linesData),
          data: [
            [[114.175193,22.275706],[100.454152,13.731434]],
            [[114.175193,22.275706],[2.332962,48.864677]],
            [[101.684555,3.15663],[114.175193,22.275706]],
            [[-118.24762,34.058993],[151.210446,-33.875774]]
          ]
        }
      ];
      const myecharts = echarts.init(document.getElementById("myecharts"));
      myecharts.setOption({
        backgroundColor: "#000",
        globe: {
          baseTexture: require('@/assets/images/world.jpg'), // 地球的纹理
          shading: "lambert",
          layers: [
            {
              type: 'overlay',
              texture: this.globeInit(), // 覆盖层geo和scatter
              distance: 0 // 覆盖层离地表距离
            }
          ],
          atmosphere: { // 不需要大气光圈去掉即可
            show: true,
            offset: 4 // 大气层光圈宽度
          },
          viewControl: {
            distance: 200 // 默认视角距离地球表面距离
          },
          light: {
            ambient: {
              intensity: 1.3, // 全局的环境光设置
            },
            main: {
              intensity: 1.5, // 场景主光源设置
            },
          },
        },
        series: series
      });
    },
    globeInit() {
      const scatter = [
        {
          type: 'scatter',
          coordinateSystem: 'geo',
          zlevel: 3,
          symbolSize: 30, // 标记的大小
          label: {
            show: true,
            position: "bottom",
            formatter: "{b}",
            fontSize: 30,
            color: "#d9d919"
          },
          itemStyle: {
            color: "#d9d919",
          },
          data: [
            {"name":"香港","value":[114.175193,22.275706]},
            {"name":"东京","value":[139.767187,35.715616]},
            {"name":"首尔","value":[126.964746,37.58644]},
            {"name":"印尼","value":[120.4574,-1.743046]},
            {"name":"洛杉矶","value":[-118.24762,34.058993]}
          ],
        },
        {
          type: 'scatter',
          coordinateSystem: 'geo',
          zlevel: 3,
          symbolSize: 30,
          label: {
            show: true,
            position: "bottom",
            formatter: "{b}",
            fontSize: 30,
            color: "#fff"
          },
          itemStyle: {
            color: "#fff",
          },
          data: [
            {"name":"吉隆坡","value":[101.684555,3.15663]},
            {"name":"曼谷","value":[100.454152,13.731434]},
            {"name":"悉尼","value":[151.210446,-33.875774]},
            {"name":"巴黎","value":[2.332962,48.864677]}
          ]
          /*
          [
            {
              name: '',
              value: [lng,lat]
            }
          ]
          */
        }
      ]
      const baseCharts = echarts.init(document.createElement('canvas'), null, {
        width: 4096,
        height: 2048
      })
      baseCharts.setOption({
        backgroundColor: 'transparent', // 海洋颜色
        geo: {
          map: 'world',
          show: false,
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
          boundingCoords: [ // 定义定位的左上角以及右下角分别所对应的经纬度
            [-180, 90],
            [180, -90]
          ],
          // itemStyle: {
          //   borderColor: 'transparent',
          //   areaColor: 'transparent' // 陆地颜色
          // },
          emphasis: { // 高亮状态下的多边形和标签样式
            disabled: true
          }
        },
        series: scatter
      })
      return baseCharts
    }
  },
};
</script>

<style lang="scss" scoped>
#myecharts {
  width: 900px;
  height: 900px;
  margin: 0 auto;
}
</style>

 补充

如果地球纹理不需要使用图片，使用geo组件绘制的地图即可，那么可按以下修改

baseTexture从图片改成echarts 的实例,去掉地球表面层layers,再根据需要进行配置即可

资源

代码已经上传，如有需要可以进行下载

echarts+echarts-gl实现带有散点、路径的3d地球-Node.js文档类资源-CSDN下载

文章提到的globe+scatter3D+lines3D、globe+scatter+lines3D、补充以及world.jpg、world.js，该资源都含有

三个分支是三种情况

主要代码在Globe.vue中