echarts 3d地图加动画效果

直接上代码

<telement>

 <div id="myChart" ref="ele" v-model="city"></div>

</telement>

js部分

import china from '../../../node_modules/echarts/map/js/china'

import './map.js'//该文件导入34个省份数据，在下不会导入整个文件夹下所有文件，试过好多次，总是报错，内容格式如下：

require('../../../node_modules/echarts/map/js/province/anhui')

require('../../../node_modules/echarts/map/js/province/aomen')

等等

然后是重点，data中

 city: '',//用于地图下钻

 iscity:true,//判断师傅为省级地图

然后是省份数据

      geoCoordMap: {

        黑龙江: [127.9688, 45.368],

        内蒙古: [110.3467, 41.4899],

        吉林: [125.8154, 44.2584],

        北京市: [116.4551, 40.2539],

        辽宁: [123.1238, 42.1216],

        河北: [114.4995, 38.1006],

        天津: [117.4219, 39.4189],

        山西: [112.3352, 37.9413],

        陕西: [109.1162, 34.2004],

        甘肃: [103.5901, 36.3043],

        宁夏: [106.3586, 38.1775],

        青海: [101.4038, 36.8207],

        新疆: [87.9236, 43.5883],

        西藏: [91.11, 29.97],

        四川: [103.9526, 30.7617],

        重庆: [108.384366, 30.439702],

        山东: [117.1582, 36.8701],

        河南: [113.4668, 34.6234],

        江苏: [118.8062, 31.9208],

        安徽: [117.29, 32.0581],

        湖北: [114.3896, 30.6628],

        浙江: [119.5313, 29.8773],

        福建: [119.4543, 25.9222],

        江西: [116.0046, 28.6633],

        湖南: [113.0823, 28.2568],

        贵州: [106.6992, 26.7682],

        云南: [102.9199, 25.4663],

        广东: [113.12244, 23.009505],

        广西: [108.479, 23.1152],

        海南: [110.3893, 19.8516],

        上海: [121.4648, 31.2891],

      },

      chinaDatas: [

        [{ name: '河北', value: 300 }],

        [{ name: '天津', value: 300 }],

        [{ name: '山西', value: 300 }],

        [{ name: '陕西', value: 300 }],

        [{ name: '甘肃', value: 300 }],

        [{ name: '宁夏', value: 300 }],

        [{ name: '青海', value: 300 }],

        [{ name: '新疆', value: 300 }],

        [{ name: '西藏', value: 300 }],

        [{ name: '四川', value: 300 }],

        [{ name: '重庆', value: 300 }],

        [{ name: '山东', value: 300 }],

        [{ name: '河南', value: 300 }],

        [{ name: '上海', value: 1300 }],

      ],//懂得都懂

 shanxidatas: [[{ name: '太原', value: [112.3352, 37.9413, 20] }]],//省份内数据，没调用封装的方法

然后就是monted里面:

 this.mapinit()

this.drawChart()

然后就是写js方法了 

 convertData(data) {

      var res = []

      for (var i = 0; i < data.length; i++) {

        var geoCoord = this.geoCoordMap[data[i][0].name]

        if (geoCoord) {

          res.push({

            name: data[i][0].name,

            value: geoCoord.concat(data[i][0].value),

          })

        }

      }

      return res

    },//这个方法就是对省份数据进行处理，应该都能看懂吧，不解释了

    LoadMapping(name, data) {

      var chartOption = {

        geo: {

          show: true,

          map: name,

          width: 1024,

          top: 0,

          label: {

            position: 'top',

            distance: 5,

            normal: {

              show: true,

              textStyle: {

                color: '#fff',

              },

            },

            emphasis: {

              textStyle: {

                color: '#fff',

              },

            },

          },

          itemStyle: {

            normal: {

              areaColor: {

                type: 'radial',

                x: 0.5,

                y: 0.5,

                r: 0.8,

                colorStops: [

                  {

                    offset: 0,

                    color: '#26579F', // 0% 处的颜色

                  },

                  {

                    offset: 1,

                    color: '#46B5C7', // 100% 处的颜色

                  },

                ],

              },

            },

          },

          emphasis: {

            label: {

              show: true,

              textStyle: {

                color: '#fff',

                fontSize: 13,

                backgroundColor: 'rgba(0,23,11,1)',

              },

            },

            itemStyle: {

              areaColor: '#f00', // 高亮时地图板块颜色改变

            },

          },

        },

        series: [

          {

            type: `effectScatter`,

            coordinateSystem: `geo`,

            showEffectOn: 'render',

            zlevel: 1,

            rippleEffect: {

              period: 5,

              scale: 4,

              brushType: 'fill',

            },

            hoverAnimation: true,

            // label: {

            //   normal: {

            //     formatter: '{b}',

            //     position: 'bottom',

            //     offset: [15, 0],

            //     color: '#fff',

            //     show: true,

            //     fontSize: 16,

            //   },

            // },

            itemStyle: {

              normal: {

                color: '#1DE9B6',

                shadowBlur: 10,

                shadowColor: '#333',

              },

            },

            symbolSize: 16,

            data: this.convertData(this.chinaDatas),

          },

          {

            type: 'scatter',

            geoIndex: 0,

            coordinateSystem: 'geo',

            hoverAnimation: false,

            symbolSize: 78,

            symbol: 'image://' + require('../../assets/homepage/hdpi/yu.png'), // require引入图片路径

            label: {

              show: true,

              color: '#00e5ff',

              offset: [0, 0],

              fontSize: 15,

            },

            data: [

              {

                name: '阳泉',

                value: [113.57, 37.85],

              },

              {

                name: '湖州',

                value: [120.1, 30.86],

              },

            ],

            zlevel: 3,

          },

        ],

      }

      return chartOption

    },//该方法为二维地图封装，作为3d地图的纹理贴图使用，不是原创，参考某位大佬

    LoadMapping3d(name, data) {

      const canvas = document.createElement(`canvas`)

      var mapBg = echarts.init(canvas, null, {

        width: 1024,

        height: 1024,

      })

      const chartOption = this.LoadMapping(name, data)

      mapBg.setOption(chartOption)

      var option = {

        geo3D: {

          data: data,

          map: name,

          zlevel:1,

          shading: 'color',

          colorMaterial: {

            detailTexture: mapBg, // 纹理贴图

            textureTiling: 1, // 默认为1，也就是拉伸填满。大于 1 的时候，数字表示纹理平铺重复的次数

          },

          top: -50,

          tooltip: 'axis', //提示框设置

          emphasis: {

            //当鼠标放上去  地区区域是否显示名称

            label: {

              show: true,

              formatter: (params) => {

                this.city = params.name

                return this.city

              },

            },

          },

        },

      }

      return option

    },//三维地图封装，其中二维地图作为纹理贴图使用

    mapinit() {

      var data = this.convertData(this.chinaDatas)  //数据处理

      let myChart3 = echarts.init(document.getElementById('myChart'))//获取节点

      const chartOption3d = this.LoadMapping3d('china', data)

      myChart3.setOption(chartOption3d)   //绘制中国地图

      myChart3.getZr().on('click', (params) => {

        if (this.$refs.ele.childNodes[0].style.cursor == 'pointer') {

          if (this.city && this.iscity==true) {

            console.log(this.city);

            this.iscity=false;

            const chartOption3d = this.LoadMapping3d(this.city, this.shanxidatas)

            myChart3.setOption(chartOption3d)

          }else{

            this.iscity=true;

            const chartOption3d = this.LoadMapping3d('china', data)

            myChart3.setOption(chartOption3d)

          }

        }

      })

    },//后面为省份地图下钻，其中点击事件不好用，获取不到，然后查阅资料，用getZr（）方法，但只能获取到横纵坐标，起码可以点击了，然后就是获取省份名称，实现下钻，获取方法为在鼠标划过时，return出省份名称，然后绑定ref，通过判断是否点击到ref节点，然后判断是否获取到城市，然后看是否可以下钻，也就是状态，下钻后改变状态，改变option中城市传值，然后重新渲染地图， 再次点击时，不可继续下钻，绘制中国地图，

地图加动画的话涟漪效果，加图片用到了自定义scatter，格式一定要对，

    symbol: 'image://' + require('../../assets/homepage/hdpi/yu.png')，否则不生效，

总之，在echartsgl中加动画没想到好的办法，就在三位地图上加二维地图，这也是参考别人的，第一次发文章，不会使用，附上参考文章地址吧，使用echartgl构建3D中国地图_zhuantou000的博客-CSDN博客_echarts-gl地图