全面解析echarts bmap(echarts引入百度地图API)

一、概述

echarts bmap是由百度地图和echarts结合，实现了在echarts地图中使用百度地图底图，同时融合了echarts中数据可视化功能。通过bmap，我们可以在网页上通过图表展现地理信息。

在使用echarts bmap前，我们需要首先引进百度地图JavaScript API和echarts.js文件。然后，初始化百度地图：

    // 引入百度地图JS API
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=[your-key]">
    // 引入echarts.js文件
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js">
    
    // 初始化地图容器
    var myChart = echarts.init(document.getElementById('map'));
    var bmap = myChart.getModel().getComponent('bmap').getBMap();

二、bmap常用配置

1、设置地图中心点和缩放级别：

    // 设置地图中心和缩放级别
    bmap.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

2、添加控件：

    // 添加缩放、平移控件
    bmap.addControl(new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_RIGHT }));
    // 添加比例尺控件
    bmap.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }));

3、设置地图样式：

    // 自定义地图样式
    bmap.setMapStyleV2({
        styleId: 'your-style-id'
    });

4、启用地图拖拽、缩放、滚轮缩放：

    // 启用地图拖拽
    bmap.enableDragging();

    // 启用滚轮缩放
    bmap.enableScrollWheelZoom();

    // 启用双击放大
    bmap.enableDoubleClickZoom();

    // 启用缩放按钮
    bmap.enablePinchToZoom();

三、在bmap上添加echarts图表

在echarts中添加bmap组件，代码为：

    option = {
      // 设置bmap组件
      bmap: {
         center: [116.404, 39.915],
         zoom: 11,
         roam: true,
         mapStyle: {
             styleJson: [
                {
                    'featureType': 'water',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#d1d1d1'
                    }
                },
                {
                    'featureType': 'land',
                    'elementType': 'all',
                    'stylers': {
                        'color': '#f3f3f3'
                    }
                }]
            }
        },
        series: [
            // 设置散点图
            {
               type: 'scatter',
               coordinateSystem: 'bmap',
               data: [
                  [116.405, 39.915],
                  [116.404, 39.915],
                  [116.403, 39.915],
                  [116.402, 39.915],
                  [116.401, 39.915]
               ],
            }
        ]
    };
    // 将option赋给echarts实例
    myChart.setOption(option);

在上述代码中，我们通过设置bmap组件来添加echarts图表，散点图通过”type”：”scatter”来定义，”coordinateSystem”:”bmap”表示在bmap组件上绘制散点图，散点图数据通过”data”来设置。

四、bmap事件

通过bmap的事件函数，我们可以对地图上的交互进行响应，常用事件有click、dblclick、mouseover、mouseout等。以单击事件为例：

    // 用户单击bmap组件会触发的事件函数
    bmap.addEventListener('click', function (e) {
        // 获取单击点的经纬度信息
        var lng = e.point.lng;
        var lat = e.point.lat;
        console.log(lng, lat);
    });