百度地图 - 在Echarts中使用地图api

这是我参与8月更文挑战的第9天，活动详情查看：8月更文挑战javascript

简介

在地图可视化项目的开发中，为了进度领导是不会给你多余的时间完成一个功能。这时，就须要咱们在社区中寻找框架，来实现这个功能。在许多符合条件的框架中，发现Echarts最符合产品的要求。html

Echarts地图扩展插件

贡献者：沈毅
百度地图扩展，能够在百度地图上展示点图，线图，热力图等。
数据格式跟在 geo 坐标系上同样，每一项都是 [经度，纬度，数值大小，其它维度...]

配置方式很是简单，以下:java

option = {
    // 加载 bmap 组件
    bmap: {
        // 百度地图中心经纬度
        center: [120.13066322374, 30.240018034923],
        // 百度地图缩放
        zoom: 14,
        // 是否开启拖拽缩放，能够只设置 'scale' 或者 'move'
        roam: true,
        // 百度地图的自定义样式，见 http://developer.baidu.com/map/jsdevelop-11.htm
        mapStyle: {}
    },
    series: [{
        type: 'scatter',
        // 使用百度地图坐标系
        coordinateSystem: 'bmap',
        // 数据格式跟在 geo 坐标系上同样，每一项都是 [经度，纬度，数值大小，其它维度...]
        data: [ [120, 30, 1] ]
    }]
}

// 获取百度地图实例，使用百度地图自带的控件
var bmap = chart.getModel().getComponent('bmap').getBMap();
bmap.addControl(new BMap.MapTypeControl());
复制代码

由于是在百度地图上使用，因此统计图类型也须要是经过坐标方式绘制数据的。其它类型的统计图只是在地图上层绘制原来的图形。
须要要注意bmap.min.js扩展插件是基于2D类型的地图开发的，如须要使用type=webgl类型的地图就须要修改部分源码。

开始使用

经过<script>标签引入地图api地址、echarts地址、扩展插件地址，这里的ak是你在地图服务中心注册的。不了解的能够点这里。

<!-- 百度 -->
    <script src="https://api.map.baidu.com/api?v=3.0&ak=?"></script>
    <!-- echarts -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <!-- 扩展地图插件 -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
    
复制代码

初始化echarts

...
<div id="bmap" class="bmap"></div>
...
      var myChart = echarts.init(document.getElementById('bmap'))
      option = {
        title: {
          text: '',
          left: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: function (res) {
            return res.name + ':' + res.value[2]
          }
        },
        bmap: {
          center: [104.114129, 37.550339],
          zoom: 6,
          roam: true
        },
        series: [
          {
            name: '测试',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            data: [
              { name: '上海', value: [121.480509, 31.23592, 10] },
              { name: '南京', value: [118.804147, 32.070037, 10] }
            ],
            symbolSize: function (val) {
              return val[2]
            },
            rippleEffect: {
              brushType: 'stroke'
            },
            itemStyle: {
              normal: {
                color: '#ff0000',
                shadowBlur: 10,
                shadowColor: '#333'
              }
            }
          }
        ]
      }
      myChart.setOption(option)
复制代码

这里的配置详解能够上官网了解。
主要的不一样是添加bmap参数配置百度地图，在series中天机coordinateSystem: 'bmap'让原来的坐标类型修改成百度地图的墨卡托类型。
在这里发现了一个小bug。浏览器外边框margin默认不是0，我修改html外边距为0后，Echarts绘制的点坐标错位。查找了半天，发现我给元素节点设置高为100%就会错位，当我固定元素节点高后坐标就对了。因此提醒你使用时最后设置固定高度。

添加点击事件

// 点击每一个站点能够进行相关操做
      myChart.on('click', function (e) {
        console.log(e) // 每一个标识点的信息
      })
复制代码

这里直接使用Echarts的监听事件，就能实现咱们想要的功能。

使用地图原生api

var bmap = myChart.getModel().getComponent('bmap').getBMap()
var pt = new BMap.Point(116.417, 39.909)
var markerTem = new BMap.Marker(pt) // 建立标注
bmap.addOverlay(markerTem) // 将标注添加到地图中
复制代码

经过Echarts获取到地图实例，后面就和直接使用百度地图没区别了。
结合使用就这么简单，固然这里只是简单的讲解了一下如何使用它们。在社区中不少大佬经过它们建立一些比较实用的功能，官方示例。