地图热力图+轨迹

最近做的一个项目，里边需要地图热力图，并绘制来访出访的轨迹，在echarts找到一个地图坐标系上散点+折线图实现的例子，最终效果

首先需要国家地图坐标，和国家名中英文对照表（因为echarts内置都是英文名称）

// 数据格式
data = [{name:"中国",value:200},{name:"英国",value:200},{name:"美国",value:200},{name:"俄罗斯",value:200}...]

// 图中一共用到三种效果，分别为航线特效图、飞机航线图以及城市图标涟漪图。
      for (let i = 0; i < data.length; i++) {
        series.push(
          {
            // 白色航线特效图（闪光效果）
            type: 'lines',
            zlevel: 1, // 用于分层，z-index的效果
            effect: {
              show: true, // 动效是否显示
              period: 6, // 特效动画时间
              trailLength: 0.7, // 特效尾迹的长度
              color: '#fff', // 特效颜色
              symbolSize: 5 // 特效大小
            },
            lineStyle: {
              normal: {
                // 正常情况下的线条样式
                color: _this.linesColor,
                width: 0, // 因为是叠加效果，要是有宽度，线条会变粗，白色航线特效不明显
                curveness: -0.2 // 线条曲度
              }
            },
            data: _this.convertData(data[i]) // 特效的起始、终点位置
          },
          {
            // 小飞机航线效果（蓝色）
            type: 'lines',
            zlevel: 2,
            // symbol: ['none', 'arrow'],   // 用于设置箭头
            symbolSize: 10,
            effect: {
              show: true,
              period: 6,
              trailLength: 0,
              symbol: _this.planePath, // 特效形状，可以用其他svg pathdata路径代替
              symbolSize: 15
            },
            tooltip: {
              // position: ['150%', '150%']
            },
            lineStyle: {
              normal: {
                color: _this.linesColor,
                width: 2,
                opacity: 0.6,
                curveness: -0.2
              }
            },
            data: _this.convertData(data[i]) // 特效的起始、终点位置，一个二维数组，相当于coords: convertData(item[1])
          }
        )
      }
      series.push({
        // 散点效果（重点地区名字和散点效果）
        type: 'effectScatter',
        coordinateSystem: 'geo', // 表示使用的坐标系为地理坐标系
        zlevel: 3,
        rippleEffect: {
          brushType: 'stroke' // 波纹绘制方式
        },
        label: {
          normal: {
            // 默认的文本标签显示样式
            color: '#fff',
            position: 'left', // 标签显示的位置
            formatter: '{b}', // 标签内容格式器(目前只显示国家)
            textBorderColor: '#000',
            textBorderWidth: 1
          }
        },
        tooltip: {
          show: false
        },
        itemStyle: {
          normal: {
            color: '#000'
          }
        },
        data: data.map(function (dataItem) {
          return {
            name: dataItem.name,
            value: [_this.geoCoordMap[dataItem.name][0], _this.geoCoordMap[dataItem.name][1], 0], // 起点的位置
            symbolSize: 10, // 散点的大小，通过之前设置的权重来计算，val的值来自data返回的value
            color: '#000'
          }
        })
      })
      // 显示终点位置,类似于上面最后一个效果，放在外面写，是为了防止被循环执行多次
      series.push({
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 3,
        rippleEffect: {
          brushType: 'stroke'
        },
        label: {
          normal: {
            position: 'left',
            formatter: '{b}'
          }
        },
        tooltip: { show: false },
        symbolSize: 10,
        itemStyle: {
          normal: {
            color: _this.linesColor
          }
        },
        data: [
          {
            name: '中国',
            // value: [117.2524760549, 38.2790211218, 80],
            value: [_this.geoCoordMap['中国'][0], _this.geoCoordMap['中国'][1], 0],
            label: {
              normal: {
                show: false,
                position: 'top'
              }
            }
          },
          {
            name: '南极',
            value: [43.5107, -53.2196, 0],
            label: {
              normal: {
                show: true,
                position: 'right'
              }
            }
          }
        ]
      })
      // 地图
      series.push({
        type: 'map',
        geoIndex: 0,
        label: {
          normal: {
            color: '#fff',
            show: false
          }
        },
        textFixed: {
          Alaska: [20, -20]
        },
        tooltip: {
          show: false
        },
        data: data
      })
      // 最后初始化世界地图中的相关数据
      this.chart.setOption({
        tooltip: {
          trigger: 'item',
          triggerOn: 'click'
        },
        toolbox: {
          show: true,
          left: 'right',
          iconStyle: {
            normal: {
              borderColor: '#ddd'
            }
          },
          feature: {},
          z: 202
        },
        visualMap: {
          show: false,
          min: 0,
          max: _this.maxMapData,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
        geo: {
          map: 'world', // 与引用进来的地图js名字一致
          show: true,
          roam: true, // 允许缩放平移
          zoom: 1.2,
          // 可以自定义地区名称，配置后 china显示为“中国”
          nameMap: _this.mapCompare,
          selectedMode: 'single', // 国家单选
          itemStyle: {
            // 每个区域的样式
            normal: {
              // areaColor: '#d7e4f5',
              // borderColor: '#b1c6e1'
              areaColor: '#b1c6e1',
              borderColor: '#fff'
            },
            // 鼠标悬停区块颜色
            emphasis: {
              areaColor: 'blue',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 5,
              borderWidth: 0,
              shadowColor: 'rgba(6, 67, 183, 0.2)'
            }
          },
          // 是否默认展示国家信息
          label: {
            emphasis: {
              show: true,
              color: '#fff',
              textBorderColor: '#012a77',
              textBorderWidth: 1
            }
          },
          // 缩放比例
          scaleLimit: {
            min: 1.2,
            max: 3
          },
          // 特殊区域
          regions: [
            {
              // 选中的区域
              name: '中国',
              selected: true,
              itemStyle: {
                // 高亮时候的样式
                normal: {
                  areaColor: 'red'
                },
                emphasis: {
                  areaColor: 'red'
                }
              },
              label: {
                // 高亮的时候显示标签
                emphasis: {
                  show: true,
                  textBorderWidth: 0
                }
              }
            }
          ]
        },
        series: series, // 图表列表
        textStyle: {
          fontSize: 14
        }
      })

还要实现点击地图效果，这里要注意，绑定事件之前要解绑，否则每次更新搜索条件重新渲染地图，事件都会重新绑定一次。