vue + echarts 实现以中国为中心的世界3D地图

╰+攻爆jí腚メ 2023-10-05 11:47 48阅读 0赞

# 1.预期效果 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5WGllRGFpTWE_size_16_color_FFFFFF_t_70][]

参考官方例子 ：[ 官方例子][Link 1]

旧版本官网案例不能打开，请点击 [案例最新地址][Link 2]

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

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

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

如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5WGllRGFpTWE_size_16_color_FFFFFF_t_70 1][]

word文件获取途径二： [地图脚本][Link 3]

实现代码：

/* 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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5WGllRGFpTWE_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201016142939511.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5WGllRGFpTWE=,size_16,color_FFFFFF,t_70
[Link 1]: https://gallery.echartsjs.com/editor.html?c=x864vaa36J
[Link 2]: https://www.isqqw.com/echartsdetail?id=14843
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5WGllRGFpTWE_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201020141730498.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5WGllRGFpTWE=,size_16,color_FFFFFF,t_70
[Link 3]: https://github.com/ym787779385/vue-note-demo/blob/master/src/components/echartsDemo/word.js