echarts多个地图之间飞线

前言

遇到这么一个场景，一个容器内需要由两个地图一个全国，一个具体省/市的地图具体效果如下图 就希望全国的地图飞线到单独省市的地图内很直观的看出哪些地区和该省有关系

在线预览 需要邮箱注册登录才可看，不想麻烦可以本地替换掉一下内容

//! 将$.get请求删除，china变量和shandong变量替换为下载的json，并import引入的变量即可
//! $.get实际上也是请求json的，替换即可
echarts.registerMap('china', china);
echarts.registerMap('shandong', shandong);

一、两个地图的展示

自行准备好geoJson，推荐两个下载网站

• datav.aliyun.com/portal/scho…
• www.isqqw.com/geojson 这个可以更细到镇、区域的划分数据

示例演示就想象成替换为import引入json，换个名字即可

let uploadedDataURL = "/asset/get/areas_v3/country/china.json";
let shandong = `/asset/get/areas_v3/province/370000_full.json`;
$.get(uploadedDataURL, function (china) {
   $.get(shandong, function (shandong) {
   	  //注册可用地图，这里使用的jquery请求的，用的echarts demo网站在线编辑，china和shandong替换为import的变量即可
   	  // https://www.isqqw.com/viewer?id=48485
      echarts.registerMap('china', china);
      echarts.registerMap('shandong', shandong);
      // 两个 geo 的 center
      const chinaCenter = [127, 10];
      const shandongCenter = [113.97, 40.01];
      option = {
         geo: [
            {
               map: 'china',
               zoom: 0.6,
               center: chinaCenter,
               itemStyle: {
                  shadowColor: 'black',
                  shadowBlur: 15,
                  shadowOffsetX: -5,
                  shadowOffsetY: 15,
               },
            },
            {
               map: 'shandong',
               zoom: 0.4,
               center: shandongCenter,
               itemStyle: {
                  shadowColor: 'black',
                  shadowBlur: 15,
                  shadowOffsetX: -5,
                  shadowOffsetY: 15,
               },
            },
         ],
      };
      myChart.setOption(option);
});

1. 获取到全国的地图json和某个省份的地图json
2. 将json注册可用的地图
3. 分别声明两个地图的中心点，设置center以展示不同位置
4. geo数组中添加不同地图配置和map对应字段

二、飞线添加

飞线的添加时开始结束的经纬度去确定线路的，就表示不能单独的给某一个地图添加飞线；

想实现的就是地图1和地图2之间的飞线，由于设置center移动了地图中心点这就有了偏差

我们可以通过convertToPixel和convertFromPixel方法将开始结束经纬度进行编码，同时设置xy轴，飞线逻辑设置为cartesian2d

添加x，y轴作为飞线逻辑轴

let uploadedDataURL = "/asset/get/areas_v3/country/china.json";
let shandong = `/asset/get/areas_v3/province/370000_full.json`;
// 飞线数据
let data = [
   [
      [116.405285, 39.904989], [117.000923, 36.675807]
   ],
   [
      [117.190182, 39.125596], [120.355173, 36.082982]
   ],
   [
      [114.502461, 38.045474], [118.047648, 36.814939]
   ],
   [
      [112.549248, 37.857014], [117.557964, 34.856424]
   ],
   [
      [111.670801, 40.818311], [118.66471, 37.434564]
   ],
   [
      [123.429096, 41.796767], [121.391382, 37.539297]
   ],
   [
      [126.642464, 45.756967], [119.107078, 36.70925]
   ],
   [
      [121.472644, 31.231706], [116.587245, 35.415393]
   ],
   [
      [118.767413, 32.041544], [117.129063, 36.194968]
   ],
   [
      [119.306239, 26.075302], [122.116394, 37.509691]
   ],
];

// 将飞线数据进行编码解析
let convertData = function () {
   let res = [];
   for (let index in data) {
      //  将坐标轴转换为像素
      let from = myChart.convertToPixel({ geoIndex: 0 }, data[index][0]);
      from = myChart.convertFromPixel('grid', from); //再将经纬度的像素，转为逻辑点轴
      let to = myChart.convertToPixel({ geoIndex: 1 }, data[index][1]);
      to = myChart.convertFromPixel('grid', to);
      res.push({
         coords: [from, to]
      });
   }

   return res;
};


$.get(uploadedDataURL, function (china) {
   $.get(shandong, function (shandong) {
      echarts.registerMap('china', china);
      echarts.registerMap('shandong', shandong);
      // 两个 geo 的 center
      const chinaCenter = [127, 10];
      const shandongCenter = [113.97, 40.01];

      option = {
         xAxis: {
            type: 'value',
            show: false,
            min: 0,
            max: 100,
            position: 'top'
         },
         yAxis: {
            type: 'value',
            show: false,
            min: 0,
            max: 100,
            inverse: true
         },
         geo: [
            {
               map: 'china',
               zoom: 0.6,
               center: chinaCenter,
               itemStyle: {
                  shadowColor: 'black',
                  shadowBlur: 15,
                  shadowOffsetX: -5,
                  shadowOffsetY: 15,
               },
            },
            {
               map: 'shandong',
               zoom: 0.4,
               center: shandongCenter,
               itemStyle: {
                  shadowColor: 'black',
                  shadowBlur: 15,
                  shadowOffsetX: -5,
                  shadowOffsetY: 15,
               },
            },
         ],
         series: [
            {

               id: 'feixian',
               type: 'lines',
               coordinateSystem: 'cartesian2d',
               xAxisIndex: 0,
               yAxisIndex: 0,
               data: [],
               lineStyle: {
                  width: 1,
                  opacity: 1,
                  curveness: 0.5, // 调整曲线弯曲程度
               },
               effect: {
                  show: true,
                  period: 4, // 动画周期
                  trailLength: 0.5,
                  color: 'yellow',
                  symbol: 'arrow', // 动画符号
                  symbolSize: 8,
               },
            },
         ],
      };
      myChart.setOption(option);
		
	  //convertToPixel和convertFromPixel方法需要通过实例去使用
      requestAnimationFrame(() => {
         myChart.setOption({
            series: [
               { id: 'feixian', data: convertData() }
            ]
         })
      })
   });
});