Angular中echarts与百度地图的结合使用(二)

此篇是在Angular中echarts与百度地图的结合使用(一)的基础上进行调整。

调整部分：

(1)解决拖拽地图后echarts与地图分层现象；

(2)通过echarts的事件触发替换百度地图的标记事件触发。

代码如下：

import { Component, OnInit } from '@angular/core';
declare var BMap, echarts: any;
declare var BMAP_ANCHOR_TOP_LEFT: any;
@Component({
  selector: 'app-echarts-topo',
  templateUrl: './echarts-topo.component.html',
  styleUrls: ['./echarts-topo.component.scss']
})
export class EchartsTopoComponent implements OnInit {
  // 模拟标记数据
  buildData = [
    {
      'long': 116.404177,
      'lat': 39.909652,
      'address': '天安门广场'
    },
    {
      'long': 116.407851,
      'lat': 39.91408,
      'address': '天安门东'
    },
    {
      'long': 116.39805,
      'lat': 39.913776,
      'address': '天安门西'
    }
  ];
  // 模拟迁徙效果数据-效果图一
  echartsDatas = [
    {
      fromName: '北京',
      toName: '广州',
      coords: [[116.404, 39.915], [113.5107, 23.2196]]
    },
    {
      fromName: '北京',
      toName: '印度',
      coords: [[116.404, 39.915], [80.158246, 22.870061]]
    },
    {
      fromName: '北京',
      toName: '巴基斯坦',
      coords: [[116.404, 39.915], [68.121138, 29.763922]]
    }
  ];
  // 模拟迁徙效果数据-效果图二
  echartsDatas1 = [
    {
      fromName: '天安门',
      toName: '首都机场',
      coords: [[116.404, 39.915], [116.611579, 40.086312]]
    },
    {
      fromName: '天安门',
      toName: '南苑机场',
      coords: [[116.404, 39.915], [116.400712, 39.790456]]
    }
  ];
  myChart;
  map;
  changeFlag;
  constructor() {
  }

  ngOnInit() {
    this.myChart = echarts.init(document.getElementById('main'));
    this.myChart.setOption(this.setOptions([70.473184,  24.041486],  4,
      this.setSeries(this.echartsDatas, [])), true);
    this.map = this.myChart.getModel().getComponent('bmap').getBMap();
    this.setMap(this.map);
    // echarts中事件的处理。
    // 更多请参考 https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-7o3u28yh.html
    this.myChart.on('click', (params) => {
      if (params.componentType === 'series') {
        if (params.seriesType === 'effectScatter') { // 点击散点图事件
          const markerPoint = new BMap.Point(params.value[0], params.value[1]);
          this.map.centerAndZoom(markerPoint, this.changeFlag);
        } else if (params.seriesType === 'scatter') {
        }
      }
    });
  }
  setSeries(echartsData, buildData) {
    const series = [];
    if (echartsData.length > 0) {
      echartsData.map(function (Item) {
        series.push(
          {
            name: Item.fromName + '>>>' + Item.toName,
            type: 'lines',
            coordinateSystem: 'bmap',
            zlevel: 1,
            animation: false,
            effect: {
              show: true,
              period: 6,
              trailLength: 0.7,
              symbolSize: 3,
              color: '#fff'
            },
            lineStyle: {
              normal: {
                width: 0,
                curveness: 0.2
              }
            },
            data: echartsData
          },
          {
            type: 'lines',
            coordinateSystem: 'bmap',
            zlevel: 2,
            effect: {
              show: true,
              period: 6,
              trailLength: 0,
              symbol: 'arrow',
              symbolSize: 10
            },
            lineStyle: {
              normal: {
                color: '#C82C2B',
                width: 1,
                opacity: 0.4,
                curveness: 0.2
              }
            },
            data: echartsData
          },
          {
            name: Item.fromName,
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            zlevel: 2,
            rippleEffect: {
              brushType: 'stroke'
            },
            tooltip: {
              formatter: function (params) {
                const res = params.name;
                return res;
              },
            },
            label: {
              normal: {
                show: true,
                position: 'right',
                formatter: '{b}'
              }
            },
            symbolSize: 30,
            showEffectOn: 'render',
            itemStyle: {
              normal: {
                color: '#C82C2B'
              }
            },
            data: [{
              name: Item.fromName,
              value: Item.coords[0]
            }]
          },
          {
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            zlevel: 2,
            rippleEffect: {
              brushType: 'stroke'
            },
            tooltip: {
              formatter: function (params) {
                const res = params.name;
                return res;
              },
            },
            label: {
              normal: {
                show: true,
                position: 'right',
                formatter: '{b}'
              }
            },
            symbolSize: 15,
            itemStyle: {
              normal: {
                color: '#C82C2B'
              }
            },
            data: echartsData.map(function (dataItem) {
              return {
                name: dataItem.toName,
                value: dataItem.coords[1]
              };
            })
          });
      });
    }
    if (buildData.length > 0) {
      series.push(
        {
          type: 'scatter',
          coordinateSystem: 'bmap',
          symbolSize: 20,
          data: buildData.map(function (dataItem) {
            return {
              name: dataItem.address,
              value: [dataItem.long, dataItem.lat]
            };
          }),
          tooltip: {
            formatter: function (params) {
              const res = params.name;
              return res;
            },
          },
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              show: true
            }
          },
          itemStyle: {
            normal: {
              borderColor: '#fff',
              color: '#ebe62b',
            }
          }
        });
    }
    return series;
  }
  setOptions(center, zoom, series) {
    const option = {
      tooltip : {
        trigger: 'item'
      },
      bmap: {
        center: center,
        zoom: zoom,
        roam: true,
        mapStyle: {
          'styleJson': [
            {
              'featureType': 'water',
              'elementType': 'all',
              'stylers': {
                'color': '#103446'
              }
            },
            {
              'featureType': 'land',
              'elementType': 'geometry',
              'stylers': {
                'color': '#1E2D1E'
              }
            },
            {
              'featureType': 'highway',
              'elementType': 'all',
              'stylers': {
                'visibility': 'off'
              }
            },
            {
              'featureType': 'arterial',
              'elementType': 'geometry.fill',
              'stylers': {
                'color': '#1E2D1E'
              }
            },
            {
              'featureType': 'arterial',
              'elementType': 'geometry.stroke',
              'stylers': {
                'color': '#0b3d51'
              }
            },
            {
              'featureType': 'local',
              'elementType': 'geometry',
              'stylers': {
                'color': '#1E2D1E'
              }
            },
            {
              'featureType': 'railway',
              'elementType': 'geometry.fill',
              'stylers': {
                'color': '#1E2D1E'
              }
            },
            {
              'featureType': 'railway',
              'elementType': 'geometry.stroke',
              'stylers': {
                'color': '#08304b'
              }
            },
            {
              'featureType': 'subway',
              'elementType': 'geometry',
              'stylers': {
                'lightness': -70
              }
            },
            {
              'featureType': 'building',
              'elementType': 'geometry.fill',
              'stylers': {
                'color': '#1E2D1E'
              }
            },
            {
              'featureType': 'all',
              'elementType': 'labels.text.fill',
              'stylers': {
                'color': '#857f7f'
              }
            },
            {
              'featureType': 'all',
              'elementType': 'labels.text.stroke',
              'stylers': {
                'color': '#1E2D1E'
              }
            },
            {
              'featureType': 'building',
              'elementType': 'geometry',
              'stylers': {
                'color': '#1E2D1E'
              }
            },
            {
              'featureType': 'green',
              'elementType': 'geometry',
              'stylers': {
                'color': '#0d2d1a'
              }
            },
            {
              'featureType': 'boundary',
              'elementType': 'all',
              'stylers': {
                'color': '#3e6c60'
              }
            },
            {
              'featureType': 'manmade',
              'elementType': 'all',
              'stylers': {
                'color': '#1E2D1E'
              }
            }
          ]
        }
      },
      animation: false, // 解决拖拽地图后，echarts效果乱跑现象
      series: series
    };
    return option;
  }

  // 设置地图
  setMap(map) {
    setInterval(function() {
      map.closeInfoWindow();
    }, 1);
    map.enableScrollWheelZoom(true);
    // 城市切换
    map.addControl(new BMap.CityListControl({
      anchor: BMAP_ANCHOR_TOP_LEFT,
    }));
    map.addEventListener('zoomend', () => { // 监听地图缩放
      this.funcAddMapMaker(map);
    });
    this.funcAddMapMaker(map);
  }
  funcAddMapMaker (map) {
    const flag = map.getZoom();
    const centerLoc = [map.getCenter().lng, map.getCenter().lat];
    if ( flag < 11 ) {
      this.myChart.setOption(this.setOptions(centerLoc,  flag,
        this.setSeries(this.echartsDatas, [])));
      this.changeFlag = 12;
    } else if (flag >= 11 && flag < 16 ) {
      this.myChart.setOption(this.setOptions(centerLoc,  flag,
        this.setSeries(this.echartsDatas1, [])));
      this.changeFlag = 17;
    } else {
      this.myChart.setOption(this.setOptions(centerLoc,  flag,
        this.setSeries([], this.buildData)));
    }
  }
}