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

一、效果图预览及说明

图一

图二

图三

实现效果说明：初次加载实现图一效果，即北京到广州、印度、巴基斯坦的迁徙图；点击北京图标后，实现图二效果，即*到首都机场、南苑机场的迁徙图；点击*图标，实现图三效果，标记*附近的一些位置。当地图缩放后，根据缩放等级不同，显示不同的效果。

二、准备知识

要实现上述效果需要掌握：

Angular框架的了解(https://www.angular.cn/docs)；

echarts相关知识及API的使用(http://echarts.baidu.com/api.html#echarts)；

百度地图相关知识及API的使用(https://lbsyun.baidu.com/index.php?title=jspopular)。

三、具体实现

实现思路：因为是在同一个div上使用echarts和百度地图，使用时先初始化echarts，然后调用echarts的方法初始化bmap，再调用百度地图api。通过echarts的setOption方法异步加载和更新数据。

这里，我从三个部分进行说明：Angular的使用；百度地图的实现部分；echarts与百度地图结合实现部分。

效果中的迁徙、散点调用的是echarts，地图渲染、标记、单击事件、地图缩放监听调用的是百度地图api.

1) Angular的使用

在Angular项目中使用Angular CLI创建一个名为echarts-topo的组件，

ng generate component echarts-topo

在echarts-topo.component.html中，

<div id = "main" style="height:974px;width: 2000px"></div>

2) 百度地图的实现部分

百度地图与Angular的简单结合使用，请查看https://blog.csdn.net/yuyinghua0302/article/details/80624274。

• 地图渲染

   如图一所示，展示的地图是通过个性化定制编辑出来的，具体请查看https://lbsyun.baidu.com/index.php?title=jspopular/guide/custom。如下显示的是部分地图样式：

'styleJson': [
            {
              'featureType': 'water',
              'elementType': 'all',
              'stylers': {
                'color': '#103446'
              }
            },
            {
              'featureType': 'land',
              'elementType': 'geometry',
              'stylers': {
                'color': '#1E2D1E'
              }
            },
            {
              'featureType': 'highway',
              'elementType': 'all',
              'stylers': {
                'visibility': 'off'
              }
            }
          ]

• 标记及单击事件

   如图三中的*西门、*东门、*广场使用了百度地图中的标记。

const markerPoint = new BMap.Point(long, lat);
const marker = new BMap.Marker(markerPoint);
map.addOverlay(marker);      
marker.addEventListener('click', function () {
   map.centerAndZoom(markerPoint, 12);
});

• 地图缩放监听

map.addEventListener('zoomend', () => {
   //事件
});

通过监听地图缩放比例，显示不同的效果图。

3) echarts与百度地图结合使用实现部分

在一个div上同时使用echarts和百度地图

this.myChart = echarts.init(document.getElementById('main'));//初始化echarts
this.myChart.setOption(options);
const bmap = this.myChart.getModel().getComponent('bmap').getBMap();//调用echarts的方法初始化bmap

四、echarts-topo.component.ts完整代码

import { Component, OnInit } from '@angular/core';
declare var BMap, echarts: any;
declare var BMAP_ANCHOR_TOP_LEFT, BMAP_NAVIGATION_CONTROL_LARGE: any;
@Component({
  selector: 'app-echarts-topo',
  templateUrl: './echarts-topo.component.html',
  styleUrls: ['./echarts-topo.component.scss']
})
export class EchartsTopoComponent implements OnInit {
  // 模拟标记数据-效果图一
  markerArr = [
    {
      'long': 116.404,
      'lat': 39.915,
      'address': '北京'
    },
    {
      'long': 113.5107,
      'lat': 23.2196,
      'address': '广州'
    },
    {
      'long': 80.158246,
      'lat': 22.870061,
      'address': '印度'
    },
    {
      'long': 68.121138,
      'lat': 29.763922,
      'address': '巴基斯坦'
    }];
  // 模拟标记数据-效果图二
  yuanData = [
    {
      'long': 116.404,
      'lat': 39.915,
      'address': '*'
    }, {
      'long': 40.086312,
      'lat': 22.3877,
      'address': '首都机场'
    }, {
      'long': 116.400712,
      'lat': 39.790456,
      'address': '南苑机场'
    },
  ];
  // 模拟标记数据-效果图三
  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]]
    }
  ];
  // buildMarkers主要用于标记点的移除
  buildMarkers = [];
  myChart;

  constructor() {
  }

  ngOnInit() {
    this.myChart = echarts.init(document.getElementById('main')); // 先初始化 Echarts
    this.myChart.setOption(this.setOptions([78.473184, 24.041486], 4, this.setSeries(this.echartsDatas)));
    const bmap = this.myChart.getModel().getComponent('bmap').getBMap(); // 调用Echarts的方法来初始化bmap
    this.setMap(bmap);
  }

  // echarts配置项，http://echarts.baidu.com/option.html#title
  setSeries(echartsData) {
    const series = [];
    echartsData.map(function (Item) {
      series.push({
          name: Item.fromName,
          type: 'effectScatter',
          coordinateSystem: 'bmap',
          zlevel: 2,
          rippleEffect: {
            brushType: 'stroke'
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              formatter: '{b}'
            }
          },
          symbolSize: function (val) {
            return val[2] / 4;
          },
          showEffectOn: 'render',
          itemStyle: {
            normal: {
              color: '#C82C2B'
            }
          },
          data: [{
            name: Item.fromName,
            value: Item.coords[0].concat([120])
          }]
        },
        {
          name: Item.fromName,
          type: 'lines',
          coordinateSystem: 'bmap',
          zlevel: 1,
          effect: {
            show: true,
            period: 6,
            trailLength: 0.7,
            color: '#fff',
            symbolSize: 3
          },
          lineStyle: {
            normal: {
              color: '#C82C2B',
              width: 0,
              curveness: 0.2
            }
          },
          data: echartsData
        },
        {
          name: Item.fromName,
          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'
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              formatter: '{b}'
            }
          },
          symbolSize: function (val) {
            return val[2] / 8;
          },
          itemStyle: {
            normal: {
              color: '#C82C2B'
            }
          },
          data: echartsData.map(function (dataItem) {
            return {
              name: dataItem.toName,
              value: dataItem.coords[1].concat(100)
            };
          })
        });
    });
    return series;
  }

  // echarts配置项，http://echarts.baidu.com/option.html#title
  setOptions(center, zoom, series) {
    const option = {
      tooltip: {
        trigger: 'item'
      },
      bmap: {
        center: center,
        zoom: zoom,
        roam: true,
        label: {
          normal: {
            show: true,
            position: 'right',
            formatter: '{b}',
            textStyle: {
              fontSize: 15
            }
          }
        },
        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'
              }
            }
          ]
        }
      },
      series: series
    };
    return option;
  }

  // 设置地图
  setMap(map) {
    setInterval(function () {
      map.closeInfoWindow();
    }, 1);
   // 启动鼠标滚轮操作
    map.enableScrollWheelZoom(true);
    // 添加带有定位的导航控件
    const navigationControl = new BMap.NavigationControl({
      anchor: BMAP_ANCHOR_TOP_LEFT,
      type: BMAP_NAVIGATION_CONTROL_LARGE,
      enableGeolocation: true
    });
    map.addControl(navigationControl);
    // 监听地图缩放
    map.addEventListener('zoomend', () => {
      this.funcAddMapMaker(map);
    });
    this.funcAddMapMaker(map);
  }

  funcAddMapMaker(map) {
    const flag = map.getZoom(); // 获取缩放等级
    const centerLoc = [map.getCenter().lng, map.getCenter().lat]; // 获取当前地图中心经纬度
    for (let i = 0; i < this.buildMarkers.length; i++) {
      map.removeOverlay(this.buildMarkers[i]); //  移除标记
    }
    if (flag < 11) {　// 等级小于11，展示效果图一
      this.myChart.setOption(this.setOptions(centerLoc, flag,
        this.setSeries(this.echartsDatas))); // echarts可通过setOption异步加载与更新数据
      for (let i = 0; i < this.markerArr.length; i++) {
        const markerPoint = new BMap.Point(this.markerArr[i].long, this.markerArr[i].lat);
        const marker = new BMap.Marker(markerPoint);
        map.addOverlay(marker); // 地图上添加标记
        this.buildMarkers[this.buildMarkers.length] = marker;
        marker.addEventListener('click', function () {
          map.centerAndZoom(markerPoint, 12); // 点击标记后放大地图到等级12
        });
      }
    } else if (flag >= 11 && flag < 16) { // 等级大于11小于16，展示效果图二
      this.myChart.setOption(this.setOptions(centerLoc, flag,
        this.setSeries(this.echartsDatas1))); // echarts可通过setOption异步加载与更新数据
      for (let j = 0; j < this.yuanData.length; j++) {
        const yuanPoint = new BMap.Point(this.yuanData[j].long, this.yuanData[j].lat);
        const yuanMarker = new BMap.Marker(yuanPoint);
        map.addOverlay(yuanMarker); // 地图上添加标记
        this.buildMarkers[this.buildMarkers.length] = yuanMarker;
        yuanMarker.addEventListener('click', function () {
          map.centerAndZoom(yuanPoint, 17); // 点击标记后放大地图到等级17
        }.bind(this));
      }
    } else { // 等级大于16，展示效果图三
      this.myChart.setOption(this.setOptions(centerLoc, flag,
        null)); // echarts可通过setOption异步加载与更新数据
      for (let k = 0; k < this.buildData.length; k++) {
        const buildPoint = new BMap.Point(this.buildData[k].long, this.buildData[k].lat);
        const buildMarker = new BMap.Marker(buildPoint);
        map.addOverlay(buildMarker); // 地图上添加标记
        this.buildMarkers[this.buildMarkers.length] = buildMarker;
        const buildLabel = new BMap.Label(this.buildData[k].address, {offset: new BMap.Size(10, 17)});
        buildLabel.setStyle({
          color: 'white',
          fontSize: '10px',
          border: 'hidden',
          backgroundColor: 'rgba(0,0,0,0)'
        });
        buildMarker.setLabel(buildLabel); // 设置文字标签
      }
    }
  }
}