1.预期效果

参考官方例子 ：  官方例子 

旧版本官网案例不能打开，请点击 案例最新地址​​​​​​​

注意事项(如果需要展示以中国为中心的世界地图，需要重新引入word脚本)：

1.需要重新引入word.js 文件

word文件获取途径一： 点击官方例子 ---> 点击脚本按钮 ---> 点击第二个脚本下载

如图： 

word文件获取途径二： 地图脚本

实现代码：

/* eslint-disable */
<template>
  <div class="container">
    <div id="earth_map_3D"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
import 'echarts-gl'
export const geoCoord = {
 某海关: [116.2, 39.55],
 阿富汗: [69.11, 34.28],
 阿尔巴尼亚: [19.49, 41.18],
 阿尔及利亚: [3.08, 36.42],
 美属萨摩亚: [189.57, -14.16],
 "安道​​尔": [1.32, 42.31],
 安哥拉: [13.15, -8.5],
 安提瓜和巴布达: [298.52, 17.2],
 阿根廷: [300, -36.3],
 亚美尼亚: [44.31, 40.1],
 阿鲁巴: [289.98, 12.32],
 澳大利亚: [149.08, -35.15],
 奥地利: [16.22, 48.12],
 阿塞拜疆: [49.56, 40.29],
 巴哈马: [282.8, 25.05],
 巴林: [50.3, 26.1],
 孟加拉: [90.26, 23.43],
 巴巴多斯: [300.7, 13.05],
 白俄罗斯: [27.3, 53.52],
 比利时: [4.21, 50.51],
 伯利兹: [271.7, 17.18],
 贝宁: [2.42, 6.23],
 不丹: [89.45, 27.31],
 玻利维亚: [291.9, -16.2],
 波斯尼亚和黑塞哥维那: [18.26, 43.52],
 博茨瓦纳: [25.57, -24.45],
 巴西: [312.45, -15.47],
 英属维尔京群岛: [295.63, 18.27],
 文莱: [115, 4.52],
 保加利亚: [23.2, 42.45],
 布基纳法索: [-1.3, 12.15],
 布隆迪: [29.18, -3.16],
 柬埔寨: [104.55, 11.33],
 喀麦隆: [11.35, 3.5],
 加拿大: [246.276507, 61.129539],
 佛得角: [-23.34, 15.02],
 开曼群岛: [278.76, 19.2],
 中非共和国: [18.35, 4.23],
 乍得: [14.59, 12.1],
 智利: [289.6, -33.24],
 中国: [116.2, 39.55],
 哥伦比亚: [286, 4.34],
 科摩罗: [43.16, -11.4],
 刚果: [15.12, -4.09],
 哥斯达黎加: [275.98, 9.55],
 科特迪瓦: [-5.17, 6.49],
 克罗地亚: [15.58, 45.5],
 古巴: [277.78, 23.08],
 塞浦路斯: [33.25, 35.1],
 捷克共和国: [14.22, 50.05],
 朝鲜: [125.3, 39.09],
 "刚果(扎伊尔)": [15.15, -4.2],
 丹麦: [12.34, 55.41],
 吉布提: [42.2, 11.08],
 多米尼加: [298.76, 15.2],
 多米尼加共和国: [290.41, 18.3],
 东帝汶: [125.34, -8.29],
 厄瓜多尔: [281.65, -0.15],
 埃及: [31.14, 30.01],
 萨尔瓦多: [270.9, 13.4],
 赤道几内亚: [8.5, 3.45],
 厄立特里亚: [38.55, 15.19],
 爱沙尼亚: [24.48, 59.22],
 埃塞俄比亚: [38.42, 9.02],
 "福克兰群岛(马尔维纳斯群岛)": [300.49, -51.4],
 法罗群岛: [-6.56, 62.05],
 斐济: [178.3, -18.06],
 芬兰: [25.03, 60.15],
 法国: [2.2, 48.5],
 法属圭亚那: [307.82, 5.05],
 法属波利尼西亚: [210.66, -17.32],
 加蓬: [9.26, 0.25],
 冈比亚: [-16.4, 13.28],
 格鲁吉亚: [44.5, 41.43],
 德国: [13.25, 52.3],
 加纳: [-0.06, 5.35],
 希腊: [23.46, 37.58],
 格陵兰: [308.65, 64.1],
 瓜德罗普岛: [298.56, 16],
 危地马拉: [269.78, 14.4],
 根西岛: [-2.33, 49.26],
 几内亚: [-13.49, 9.29],
 几内亚比绍: [-15.45, 11.45],
 圭亚那: [301.88, 6.5],
 海地: [287.8, 18.4],
 赫德岛和麦当劳群岛: [74, -53],
 洪都拉斯: [272.86, 14.05],
 匈牙利: [19.05, 47.29],
 冰岛: [-21.57, 64.1],
 印度: [77.13, 28.37],
 印度尼西亚: [106.49, -6.09],
 伊朗: [51.3, 35.44],
 伊拉克: [44.3, 33.2],
 爱尔兰: [-6.15, 53.21],
 以色列: [35.12, 31.47],
 意大利: [12.29, 41.54],
 牙买加: [283.5, 18],
 约旦: [35.52, 31.57],
 哈萨克斯坦: [71.3, 51.1],
 肯尼亚: [36.48, -1.17],
 基里巴斯: [173, 1.3],
 科威特: [48, 29.3],
 吉尔吉斯斯坦: [74.46, 42.54],
 老挝: [102.36, 17.58],
 拉脱维亚: [24.08, 56.53],
 黎巴嫩: [35.31, 33.53],
 莱索托: [27.3, -29.18],
 利比里亚: [-10.47, 6.18],
 阿拉伯利比亚民众国: [13.07, 32.49],
 列支敦士登: [9.31, 47.08],
 立陶宛: [25.19, 54.38],
 卢森堡: [6.09, 49.37],
 马达加斯加: [47.31, -18.55],
 马拉维: [33.48, -14],
 马来西亚: [101.41, 3.09],
 马尔代夫: [73.28, 4],
 马里: [-7.55, 12.34],
 马耳他: [14.31, 35.54],
 马提尼克岛: [298.98, 14.36],
 毛里塔尼亚: [57.3, -20.1],
 马约特岛: [45.14, -12.48],
 墨西哥: [260.9, 19.2],
 "密克罗尼西亚(联邦) ": [158.09, 6.55],
 摩尔多瓦共和国: [28.5, 47.02],
 莫桑比克: [32.32, -25.58],
 缅甸: [96.2, 16.45],
 纳米比亚: [17.04, -22.35],
 尼泊尔: [85.2, 27.45],
 荷兰: [4.54, 52.23],
 荷属安的列斯: [291, 12.05],
 新喀里多尼亚: [166.3, -22.17],
 新西兰: [174.46, -41.19],
 尼加拉瓜: [273.8, 12.06],
 尼日尔: [2.06, 13.27],
 尼日利亚: [7.32, 9.05],
 诺福克岛: [168.43, -45.2],
 北马里亚纳群岛: [145.45, 15.12],
 挪威: [10.45, 59.55],
 阿曼: [58.36, 23.37],
 巴基斯坦: [73.1, 33.4],
 帕劳: [134.28, 7.2],
 巴拿马: [280.75, 9],
 巴布亚新几内亚: [147.08, -9.24],
 巴拉圭: [302.7, -25.1],
 秘鲁: [283, -12],
 菲律宾: [121.03, 14.4],
 波兰: [21, 52.13],
 葡萄牙: [-9.1, 38.42],
 波多黎各: [293.93, 18.28],
 卡塔尔: [51.35, 25.15],
 韩国: [126.58, 37.31],
 罗马尼亚: [26.1, 44.27],
 俄罗斯: [37.35, 55.45],
 卢旺达: [30.04, -1.59],
 圣基茨和尼维斯: [297.57, 17.17],
 圣卢西亚: [299.42, 14.02],
 圣皮埃尔和密克隆: [303.88, 46.46],
 圣文森特和格林纳丁斯: [298.9, 13.1],
 萨摩亚: [188.5, -13.5],
 圣马力诺: [12.3, 43.55],
 圣多美和普林西比: [6.39, 0.1],
 沙特阿拉伯: [46.42, 24.41],
 塞内加尔: [-17.29, 14.34],
 塞拉利昂: [-13.17, 8.3],
 斯洛伐克: [17.07, 48.1],
 斯洛文尼亚: [14.33, 46.04],
 所罗门群岛: [159.57, -9.27],
 索马里: [45.25, 2.02],
 比勒陀利亚: [28.12, -25.44],
 西班牙: [-3.45, 40.25],
 苏丹: [32.35, 15.31],
 苏里南: [304.9, 5.5],
 斯威士兰: [31.06, -26.18],
 瑞典: [18.03, 59.2],
 瑞士: [7.28, 46.57],
 阿拉伯叙利亚共和国: [36.18, 33.3],
 塔吉克斯坦: [68.48, 38.33],
 泰国: [100.35, 13.45],
 马其顿: [21.26, 42.01],
 多哥: [1.2, 6.09],
 汤加: [186, -21.1],
 突尼斯: [10.11, 36.5],
 土耳其: [32.54, 39.57],
 土库曼斯坦: [57.5, 38],
 图瓦卢: [179.13, -8.31],
 乌干达: [32.3, 0.2],
 乌克兰: [30.28, 50.3],
 阿联酋: [54.22, 24.28],
 英国: [-0.05, 51.36],
 坦桑尼亚: [35.45, -6.08],
 美国: [260.994344, 37.574408],
 美属维尔京群岛: [295.44, 18.21],
 乌拉圭: [303.89, -34.5],
 乌兹别克斯坦: [69.1, 41.2],
 瓦努阿图: [168.18, -17.45],
 委内瑞拉: [293.45, 10.3],
 越南: [105.55, 21.05],
 南斯拉夫: [20.37, 44.5],
 赞比亚: [28.16, -15.28],
 津巴布韦: [31.02, -17.43],
 中国香港: [114.109497, 22.421185],
 新加坡: [103.798828, 1.428075],
 日本: [139.746094, 35.960223],
 中国台湾: [121.442871, 25.105497],
 斯里兰卡: [80.700073, 7.89603],
 中非: [20.895996, 6.184246],
 中国澳门: [113.506622, 22.159427],
 南非: [26.125488, -29.094577],
 毛里求斯: [57.528534, -20.280232],
 特立尼达和多巴哥: [298.740234, 10.682201],
 "刚果（布）": [23.752441, -1.823423],
 摩洛哥: [-7.090988, 31.791221],
 也门: [47.285156, 15.707663],
 马绍尔群岛: [171.184158, 7.133938],
 "刚果（金）": [23.752441, -1.823423],
 捷克: [14.545898, 50.099441],
 叙利亚: [37.023926, 35.038992],
 荷属圣马丁岛: [296.94942, 18.07088],
 蒙古: [107.050781, 47.960502],
 塞舌尔: [55.489197, -4.679086],
 巴勒斯坦: [35.230408, 31.963814],
 塞尔维亚共和国: [20.983887, 44.048116],
 黑山共和国: [19.297485, 42.674359],
 摩尔多瓦: [28.421631, 47.428087]
}
export default {
  name: `earthMap3D_`,
  mounted () {
    require(`./word`)
    this.initCharts()
  },
  methods: {
    initCharts () {
      const data = this.getLinkData()
      echarts.init(document.getElementById(`earth_map_3D`)).dispose()
      const myChart = echarts.init(document.getElementById(`earth_map_3D`))
      window.onresize = function () {
        myChart.resize()
      }
      myChart.setOption(
        {
          backgroundColor: `rgba(0,0,0,0)`,
          geo3D: {
            show: false,
            map: `world`,
            viewControl: {
              autoRotate: false,
              distance: 70, //地图大小   值越大-地图越小，值越小-地图越大
              alpha: 90, //垂直翻转角度
              beta: 0,
              autoRotateDirection: `cw`,
              damping: 0.8
            }
          },
          // visualMap: [
          //   {
          //     show: true,
          //     seriesIndex: 0,
          //     dimension: 0,
          //     right: 10,
          //     bottom: 0,
          //     zlevel: 10,
          //     calculable: true,
          //     min: 0,
          //     max: 100,
          //     inRange: {
          //       color: [`#73dbf9`, `#4aadf2`, `#3e99ee`, `#4a70d2`, `#4c4cd5`, `#0d1474`]
          //     },
          //     textStyle: {
          //       color: `#fff`,
          //       fontSize: 12
          //     }
          //   }
          // ],
           tooltip: {
            show: true,
            trigger: `item`,
            formatter: function (params) {
              const data = params.value
              let str = `<b style="font-size:18px;">入境</b><br />国家: <b style="font-size:16px;color:#f4b766;">` + params.name
              if (data && data.length === 3) {
                str = str +
                  `</b><br /> 批次: ` + data[0] +
                  ` (批次)<br /> 货值: ` + data[1] +
                  ` (万美元)` + `<br />业务量排名: <b style="font-size:14px;color:red;">` + data[2] + `</b> 名`
              }
              return str
            },
            textStyle: {
                colol: `#FFFFFF`
            },
            axisPointer: {
                type: `shadow`
            }
          },
          series: [
            {
              type: `map3D`,
              map: `world`,
              height: `auto`,
              zlevel: 2,
              boxWidth: `auto`,
              boxHeight: `auto`,
              boxDepth: `auto`,
              regionHeight: 3,
              environment: `auto`,
              top: `0`,
              instancing: false, //instancing会将 GeoJSON 中所有的 geometry 合并成一个，在 GeoJSON 拥有特别多（上千）的 geometry 时可以有效提升绘制效率。
              viewControl: {
                autoRotate: false,
                distance: 70, //地图大小   值越大-地图越小，值越小-地图越大
                alpha: 90, //垂直翻转角度
                beta: 0
              },
              itemStyle: {
                normal: {
                  areaColor: `rgba(100, 149, 237, 1)`,
                  borderColor: `#10119b`,
                  borderWidth: 1
                },
                emphasis: {
                  areaColor: `#10359b`
                }
              },
              emphasis: { //当鼠标放上去  地区区域是否显示名称
                label: {
                  show: true,
                  textStyle: {
                    color: `red`,
                    fontSize: 20,
                    backgroundColor: `rgba(0,23,11,0)`
                  }
                },
                itemStyle: {
                  areaColor: `#e3c854`,
                  opacity: 1
                }
              },
              light: { //光照阴影
                main: {
                  color: `#fff`, //光照颜色
                  intensity: 1, //光照强度
                  shadowQuality: `high`, //阴影亮度
                  shadow: false, //是否显示阴影
                  alpha: 55,
                  beta: 10

                },
                ambient: {
                  intensity: 0.22
                }
              },
              data: data.all
            },
            {
              type: `lines3D`,
              name: `出入境`,
              polyline: true,
              coordinateSystem: `geo3D`,
              zlevel: 5,
              silent: false, //开启鼠标触发事件,然并卵
              effect: {
                show: true,
                period: 2,
                trailWidth: 2,
                trailLength: 0.5,
                trailOpacity: 0.8,
                trailColor: `#fff`
              },
              lineStyle: {
                normal: {
                  color: function (params) {
                    return `${params.data.toName === `某海关` ? `rgba(255, 192, 203, 0.1)` : `rgba(0, 255, 255, 0.1)`}`
                  },
                  width: 1,
                  opacity: 1
                }
              },
             data: data.link
            },
            {
              type: `scatter3D`,
              blendMode: `lighter`,
              coordinateSystem: `geo3D`,
              showEffectOn: `render`,
              zlevel: 5,
              symbol: `circle`,
              symbolSize: 10,
              opacity: 1,
              hoverAnimation: true,
              itemStyle: {
                normal: {
                  color: `#ffa022`,
                  opacity: 0.8
                }
              },
              data: data.point
            }
          ]
        }
      )
      myChart.on(`click`, (params) => {
        this.$emit(`onEarthCallback`, `logisticsMap`)
      })
    },
    getLinkData () {
      const all = []
      const linkData = []
      const linkInData = []
      const pointData = []
      for (const key in geoCoord) {
        if (linkData.length < 10) {
          linkData.push({
            fromName: `某海关`,
            toName: key,
            coords: [[116.2, 39.55], geoCoord[key]],
            value: !((Math.floor(Math.random() * 1)))
          })
        } else if (linkInData.length < 5) {
          linkInData.push({
            fromName: key,
            toName: `某海关`,
            coords: [geoCoord[key], [116.2, 39.55]],
            value: !((Math.floor(Math.random() * 1)))
          })
        }
        if (pointData.length < 15) {
          pointData.push({
            name: key,
            value: geoCoord[key]
          })
        }
        all.push({
          name: key,
          value: [
            Math.floor(Math.random() * 90) - 10,
            Math.floor(Math.random() * 90) - 10,
            Math.floor(Math.random() * 90) - 10
          ]
        })
      }
      return {
        link: [...linkData, ...linkInData],
        point: pointData,
        all: all
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.container{
  height: 100%;
  background: url("~@/assets/imgs/map3D.jpg") no-repeat;
  background-size: 100% 100%;
  #earth_map_3D{
    height: 90%;
    width: 100%;
  }
}
</style>