angular echarts百度地图散点图

上次做的数据大屏中的中国散点图放大时不支持显示城市及以下级别的地名，所以今天我们结合百度地图来优化一下。

1. 在 angular.json 中引入 bmap.js
   echarts 包中已经有现成的bmap，直接将其引入到angular.json中即可

    "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
              "scripts": [
                  "./node_modules/echarts/dist/extension/bmap.js";          
              ]
          }
        }
      }

2. 在main.ts 中导入 bmap

import 'echarts/dist/extension/bmap.min.js';

3.生成百度地图密钥并在index.html中引入
点击创建百度地图应用，生成密钥，我们的地图是在 PC 端使用，所以应用类型选择浏览器端

ak.png
提交成功后复制密钥，在index.html中引入

 <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script>

4.配置echart option

public options = {
  bmap: {
      center: [104.114129, 37.550339], // 地图中心点坐标
      zoom: 5, // 当前视角的放大倍数
      roam: true, // 是否允许缩放
      mapStyle: {} // 百度地图样式配置
      ...
  },
  series: [{
       name: '销售散点图',
       type: 'scatter', // 添加散点系列
       coordinateSystem: 'bmap', // 坐标系关联到 bmap
       ...
  }]
}

mapStyle 地图样式json 可以参考百度地图个性化编辑
http://lbsyun.baidu.com/customv2/editor/cbecf047f31697f17e590fbcadea43fe
https://developer.baidu.com/map/custom/

监听地图缩放事件

当地图缩放时可能需要做一些交互或数据的处理，有两种方法
①监听bmap的 zoomend 事件

    //  注意: 地图渲染完成之后才能获取到bmap实例， 可在chartFinished方法中调用
    this.bmap= this.echartInstance.getModel().getComponent('bmap').getBMap();
    this.bmap.addEventListener('zoomend', () => {
      const zoom = this.bmap.getZoom();
      console.log("当前放大级别: " + flag);
});

②监听echart的 bmaproam 事件

this.echartInstance.on('bmaproam', () => {
  const zoom = this.echartInstance.getOption()["bmap"][0]["zoom"];
  console.log('当前放大倍数:' + zoom);
});

图片.png

初步效果已经出来了，左下角的 logo 看起来很烦人，在css 中加上样式:

// 隐藏百度地图中的logo
.anchorBL {
  display: none;
}

最终效果

效果图.png