echarts实现地图数据迁徙效果

实际效果如下：

第一步，我们先获取地图底图，不包含区镇的地图文件可以从这个网站 上面下载DataV.GeoAtlas地理小工具系列,

如果要获取市或县底下的区镇数据，可通过下面的链接来获取

https://blog.sina.cn/dpool/blog/s/blog_c47286b00102zg2p.html

通过bigemap和geojson获取echarts精确到乡镇、街道的地图json数据(获取的json数据与echarts比少cp坐标，自行添加即可)

通过bigemap和geojson获取echarts精确到乡镇、街道的地图json数据

(一):进入bigemap下载页面,下载红框里的版本

(二):下载安装之后打开，可以在右上角进行区域的选择，可以发现，它是精确到镇级的,然后选择每个乡镇街道的区名等下载相应的kml,然后所有的区的kml文件放在一个文件夹

这里 不要点击左边的下载按钮，请选择图中 红框选中的导出按钮，即可保存kml文件:

可以在地图上看到效果:

（三）在geojson.io上把刚刚在bigemap地图下载器导出的kml文件导入进来geojson.io | powered by Mapbox

open-file 选中刚才的文件打开它

可以看到，左边就是你导入文件选择的数据区域，右边则是自动生成的geojson数据。

这样就完成了北京-平谷区其中一部分区域的绘制

接下来只要把所有区域选择一个区域一个区域下载下来，生成的kml文件导出保存在一个文件夹，再导入到这个网站，像拼拼图一样拼起来就可以了。

最后全部导入拼好之后，全选右边的数据，新建一个.json文件，拷贝进去保存，这样引用的时候就可以正常使用了。

既然地图的json已经获取到了，那如何通过echarts做成第一张的样子,下面是接口中返回的数据

[{
    "xmmc": "xxxx",
    "dtdmc": "xxxx",
    "sl": 101,
    "cfdjd": "120.980000",
    "cfdwd": "31.380000",
    "mddjd": "120.865",
    "mddwd": "31.145"
}]复制

<template>
  <div class="content" ref="echarts"></div>
</template>
  
  <script>
// 引入echarts
import * as echarts from 'echarts'
// 引入地图
import 'echarts/lib/chart/map'
import chinaMap from '@/utils/china.json'
// 引入js
//   import 'echarts/map/js/china.js'
 
export default {
  components: {},
  props: ['mapArr', 'isOpen'],
  watch: {
    isOpen: {
      handler(newVal) {
        if (newVal) {
          this.lineData = this.mapArr
        }
      },
      deep: true
    }
  },
  data() {
    // 这里存放数据
    return {
      planePath:
        'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAF92lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0NDYwLCAyMDIwLzA1LzEyLTE2OjA0OjE3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMiAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjQtMDctMzFUMTA6Mjg6NDUrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDI0LTA3LTMxVDEwOjMxOjMyKzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDI0LTA3LTMxVDEwOjMxOjMyKzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjZlYTFiMjYwLTcyMzUtNDBlZS04ODQwLTQ2YjNiYzFiNDdlYyIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjVhM2E4Y2U1LTZlNzEtNWI0Mi1iOWI3LWNiNDU0OTFmZmQ1YiIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjQ0ZWQ5ZTAxLTQ0MzItNGNjNy04YmU4LTU5NWFmZDRkYzY1YSI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NDRlZDllMDEtNDQzMi00Y2M3LThiZTgtNTk1YWZkNGRjNjVhIiBzdEV2dDp3aGVuPSIyMDI0LTA3LTMxVDEwOjI4OjQ1KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMiAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NmVhMWIyNjAtNzIzNS00MGVlLTg4NDAtNDZiM2JjMWI0N2VjIiBzdEV2dDp3aGVuPSIyMDI0LTA3LTMxVDEwOjMxOjMyKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMiAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4bI5FAAAADMUlEQVRYhc2WTWxUVRSAv3Pfm1I6toPQNoo2SIgbSaBAgFBIbGLQkJBgSOjODWFBNNEVunABxr2GEPZEd4VIDGBMgARr2oipDJ2kA4U0Wmuhai2106Ezzbx7XLx5A9iZNy8zhOGs5p7fb+49594nqkojxTS0+vMA4IZaP3yXKx9/BUDe+ke1tdkDuAlsrhSm1n4GnAjWa19qrxFguXwyqSs+7ZJ8azlj8maK5EiK+9N/7b99e2wYuAhw5dLZugGOv9rSdOz1F9z48IMlcJY73Lk7zhcnTwfLbcAFq3ZPcT1YKXFoDxRUemPG/N7TvvLE2EIhfuTGHGcnH5b1HU3fAmBL9ya2dG8CQMTsFTF7w2pE2oFzUzm+ubcIwBpXyvrMz2cAmJ19UNIJdFTLHQkg9XeWmX/8AtmYA6+tWuazY/s27o6PMzExGaiSYql8+JEADL3rrvUn3pNY9s1MLhuo2yZn0v933Ql0b1xtfumIJQBOJW/twaH8eT0mEnYTeh8drOmaVPSJMXRPnq/o2/CLqOEAoT2QW8zTvHJFzcn3pWMAXK4V4InirkKh/AgCZC2cnxMGFgzzHu/PemDgy6L535oAlnJLNDU3+b8PT2DSrZhf40jGRRZcsI980znh69nSiXYIHPdc+3Nx/V1NAEFxANuZx3bmoXempJOsi5Nqw73awQ8Zf3d29+wEYHDoOsZwqC4Ar+DhuA52fflx1ngBbfEA6GpSQBgcuv7IDmNh+asCOK7/6tiuqvcJb7cpww+V1KIE1a9ZMWeqxUUaQye5qqrPiw4cbVfealXeaNYRkA8cZdpRpsPiIr0Fkim6eeI3YNCECy7mtxYAUovCsanS/9mM6IhBdxXXw3UBALgD7bgDayrav5/3t/6VtS8DMHXvvusJh+sCCJrQB6hcHPx7AGDDhvUBACiJ0KBqAEHxKNITV37KCgM/DpV0Br6tC0CEUVU2RgF4p03JqeVqRpjz+OPPgvlckf66AIy1fdaY/qgQBxLKgYQCtFgpjESJqTaGaWNtnwijUZI9JqtFZZ+oIFr5/YgCUA9EJIk6hmljbV9BpfNpAzT8gyT0m/BZSMN34D817xsTy1El4AAAAABJRU5ErkJggg==',
      res: [],
      series: [],
      lineData: []
    }
  },
 
  mounted() {
    // this.$nextTick(() => {
    //     this.init()
    // })
  },
  // 方法集合
  methods: {
    init() {
      echarts.registerMap('china', { geoJSON: chinaMap }) // 注册地图文件
      const myChart = echarts.init(this.$refs.echarts)
 
      this.res = []
      this.series = []
      let arr = []
      for (var i = 0; i < this.lineData.length; i++) {
        if (this.lineData[i].cfdjd && this.lineData[i].cfdwd) {
          arr.push({
            name: this.lineData[i].xmmc,
            value: [this.lineData[i].cfdjd, this.lineData[i].cfdwd],
            count: this.lineData[i].sl
          })
        }
        if (this.lineData[i].mddjd && this.lineData[i].mddwd) {
          arr.push({
            name: this.lineData[i].dtdmc,
            value: [this.lineData[i].mddjd, this.lineData[i].mddwd]
          })
        }
 
        if (
          this.lineData[i].cfdjd &&
          this.lineData[i].cfdwd &&
          this.lineData[i].mddjd &&
          this.lineData[i].mddwd
        ) {
          this.res.push({
            fromName: this.lineData[i].xmmc,
            toName: this.lineData[i].dtdmc,
            coords: [
              [this.lineData[i].cfdjd, this.lineData[i].cfdwd],
              [this.lineData[i].mddjd, this.lineData[i].mddwd]
            ],
            count: this.lineData[i].sl
          })
        }
      }
    //   console.log(this.res, 'this.res')
 
      this.series.push(
        //
        {
          name: '',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          // 要有对应的经纬度才显示，先经度再维度
          data: arr,
          showEffectOn: 'render',
          rippleEffect: {
            scale: 2, // 波纹的最大缩放比例
            brushType: 'stroke'
          },
          //   hoverAnimation: true,
          label: {
            normal: {
              show: true,
              formatter: params => {
                // console.log(params, 'params')
                return params.data.count ? params.data.count : ''
              },
              position: 'right',
            //   fontWeight: 500,
              fontSize: 14,
            //   color: '#fff'
            }
          },
          itemStyle: {
            normal: {
              color: '#00e3ff',
              shadowBlur: 10,
              shadowColor: '#333'
            }
          },
          emphasis: {
            itemStyle: {
              color: '#f4e925' // 高亮颜色
            }
          },
          zlevel: 1,
          tooltip: {
            show: true,
            formatter: params => {
                return `${params.data.name}`
                // console.log(params, 'params')
            }
          }
        },
        {
          name: '',
          type: 'lines',
          zlevel: 1,
          effect: {
            show: true,
            constantSpeed: 20,
            symbol: this.planePath,
            symbolSize: 20,
            trailLength: 0,
            symbolRotate: 90
          },
          tooltip: {
            formatter: function (param) {
                // console.log(param, 'params')
                return (`<div style="word-break: break-all;word-wrap: break-word;white-space: normal;margin: 0; padding: 0; max-width: 300px;">
                    <span style="margin: 0; padding: 0; line-height: 2; display: block;">起始地: ${param.data.fromName}</span>
                    <span style="margin: 0; padding: 0; line-height: 2; display: block;">目的地: ${param.data.toName}</span>
                    <span style="margin: 0; padding: 0; line-height: 2; display: block;">趟数:${param.data.count}</span>
                </div>`)
            //   return (
            //     param.data.fromName +
            //     '>' +
            //     param.data.toName +
            //     '<br>：' +
            //     param.data.count
            //   )
            }
          },
          lineStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: '#58B3CC'
                  },
                  {
                    offset: 1,
                    color: '#F58158'
                  }
                ],
                false
              ),
              width: 3,
              opacity: 0.5,
              curveness: 0.1
            }
          },
          data: this.res
        }
      )
 
      let option = {
        title: {
          text: '',
          textStyle: {
            // color: '#ffffff'
          }
        },
        legend: {
          show: true,
          selected: {},
          x: 'left',
          orient: 'vertical',
          textStyle: {
            color: 'white'
          },
          data: []
        },
        tooltip: {
          trigger: 'item',
          show: true
        },
        geo: {
          map: 'china',
          // show: true,
          roam: true,
          top: '0',
          center: [120.983219, 31.369131],
          zoom: 36,
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          // 地图的背景色
          itemStyle: {
            normal: {
              areaColor: '#09184F',
              borderColor: '#00ffff',
              shadowColor: '#09184F',
              shadowBlur: 20
            },
            emphasis: {
              // 设置高亮状态下的样式
              areaColor: '#0e64d7' // 地图区域的高亮背景色
            }
          }
        },
        series: this.series
      }
 
      myChart.setOption(option)
      // window.addEventListener('resize', function() {
      //   myChart.resize()
      // })
    }
  }
}
</script>
  <style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
}
</style>复制