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.測試運行效果；