要在地球视角下画出海运路线图

方案

1. 添加 globl 地球
2. 创建geo地理坐标系
3. 创建canvas对象用于承载地图世界地图this.worldChart

//初始化canvas节点
      let cav = document.createElement("canvas");
      this.$echarts.registerMap("world", geoJson);
      this.worldChart = this.$echarts.init(cav, null, {
   
        width: 4096,
        height: 2048,
      });
      this.worldChart.setOption(this.worldChartOption);

4. 设置globl 的baseTexture为this.worldChart
5. 添加lines3D飞线效果
   

上组件源码

<template>
  <div>
    <div id="box" @click="showAll"></div>
  </div>
</template>
<script>
import geoJson from "./mapJson.js";
import {
    nameMap, startPoint, changKu, chuan, gongChang } from "./data.js";
import {
    points, line } from "./lines.js";
export default {
   
  data() {
   
    return {
   
      worldChart: null,
      // map贴图配置
      worldChartOption: {
   
        backgroundColor: "rgba(3,28,72,1)",
        // backgroundColor: "transparent",
        geo: {
   
          type: "map",
          map: "world",
          nameMap: nameMap,
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
          boundingCoords: [
            [-180, 90],
            [180, -90],
          ],
          zoom: 0,
          roam: true,
          itemStyle: {
   
            areaColor: "#174f87", //地图区域的颜色
            color: "#fff", //图形的颜色
            borderColor: "#2578cb",
            opacity: 0.9,
          },
          emphasis: {
   
            //高亮状态下的多边形和标签样式
            itemStyle: {
   
              areaColor: "#31deff",
              color: "#174f87",
              borderColor: "#318ED2",
              borderWidth: 2,
              shadowColor: "#15629A",
              shadowBlur: 1,
              shadowOffsetX: 3,
              shadowOffsetY: 5,
            },
          },
          label: {
   
            fontSize: 28,
          },
        },
        series: [],
      },
      globleChart: null,
      // 地球配置
      globleChartOption: {
   
        globe: {
   
          show: true,
          globeRadius: 120,
          globeOu