maptalks + echarts 实现地图划线

    最近在做和地图相关的项目，之前也是接触这方面的知识很少，几天下来也是查了不少东西，最后还是用了选择了用echarts实现，这里只是简单的写了个小例子，有这些在实现难得效果也不是问题。这里也不细说，感觉没难度，还是直接上代码。实现步骤如下；

1.导入依赖;

import * as maptalks from 'maptalks';
import { E3Layer } from 'maptalks.e3';
import 'maptalks/dist/maptalks.css';

2.绘制底层地图；

drawMap () {
      var that = this;
      // 地图对象的初始化
      that.map = new maptalks.Map('map', {
        center: [113.14, 40.25],
        centerCross: true,
        zoom: 8,
        seamlessZoom: true,
        zoomInCenter: true,
        // 缩放级别控件
        zoomControl: false,
        scaleControl: true,
        baseLayer: new maptalks.GroupTileLayer('base', [
          new maptalks.TileLayer('tile2', {
            urlTemplate: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.jpg',
            subdomains: ['a', 'b', 'c', 'd'],
            attribution: ''
          })
        ])
      });
      new maptalks.VectorLayer('vector').addTo(that.map);
}

 3.绘制线条；

drawline () {
      var that = this;
      var lines = [{
        'fromName': '大同', 'toName': '北京', 'coords': [[113.14, 40.25], [116.23, 40.22]]}
      ];
      var option = {
        series: [{
          name: '',
          type: 'lines',
          polyline: true,
          lineStyle: {
            normal: {
              color: '#00aaff',
              width: 2,
              opacity: 0.8,
              curveness: 0.2
            }
          },
          data: lines
        }]
      };
      new E3Layer('e4', option).addTo(that.map);
}

4.测试运行效果；