ECHART与百度地图API的邂逅 ECHART气泡散点图与百度地图的信息窗体的使用

前世：在项目中原技术的选型用的是echart与高德地图的搭配，但是因为高德地图放大缩小后，坐标有点移位，且无百度地图那么多的动态效果，考虑下一版本更新后，则用百度地图代替高德地图。

今生；本文章重点讲述的是，echart气泡散点图与百度地图的信息窗体的使用

1、百度地图的引用

2、全局配置及引入

3、页面引入及echart的初始化

<template>

<div id="mapLocation1" class="mapLocation" /> // 绑定echart的id

</template>

<script>

import * as echarts from "echarts"; // 引入echart

import "echarts/extension/bmap/bmap"; // 引入echart 的百度扩展 必须要引入

this.chartDom = document.getElementById("mapLocation1");

this.myChart = echarts.init(this.chartDom); // 初始化echart

this.positionArr = [[114.107502, 22.575034] // 多个坐标点的参数

,[114.112326, 22.583428]

]

const option = { echart的设置项

bmap: { // bmap百度地图的配置  amap为高德地图的配置

center: [114.097569, 22.577754], // 地图的中心

zoom: 17, // 地图的放大参数

roam: true // 可以拖拉放大地图

},

series: [

{

type: 'effectScatter', // 气泡动态效果

// type: 'scatter', // 气泡静态效果

coordinateSystem: 'bmap', // 地图选择项bmap为百度地图

data: this.positionArr ,

// 标记的大小

symbolSize: 40,

encode: {

value: 2

},

// 配置何时显示特效。 render 绘制完成后显示特效。emphasis 高亮（hover）的时候显示特效。

showEffectOn: 'render',

rippleEffect: {

// 波纹的绘制方式 stroke 和 fill

// brushType: 'stroke'

number: 3, // 波纹的数量

scale: 2, // 波纹放大的倍数

color: '#8FD1C3'

},

hoverAnimation: true,

// 标记的图形。

// symbol: `path://M250 150 L150 350 L350 350 Z`,svg类型

symbol: `image://${this.getImgUrl('fix')}`, // 图片类型

// symbol: 'pin',

label: {

formatter: '{b}',

position: 'right',

show: true

},

itemStyle: {

shadowBlur: 50,

shadowColor: '#8FD1C3'

// areaColor: '#DB5BC4'

},

zlevel: 3

}

]

};

this.myChart.setOption(option); 

this.map = this.myChart.getModel().getComponent('bmap').getBMap()

// 获取echart中百度地图的实例对象 这一步很重要，这个和百度的New.Bmap.map() 一样

this.map.setMapStyle({ // 可以设置百度的风格，自定义或者直接取百度地图的12种样式类型

style: 'grayscale' // 高冷灰

// style: 'light' // 清新蓝风格

})

this.windowInfo()

4、百度地图的信息窗体的使用，及自动轮询展示

windowInfo() {

const self = this

This.positionArr.forEach((item, index) => { // 多个坐标的渲染标注点及事件

var myIcon = new BMap.Icon(this.getImgUrl('fix'),

 new BMap.Size(40, 40), {

offset: new BMap.Size(-10, 35), 

imageOffset: new BMap.Size(0 - 30, 0 - 40)

}); // 标注点的样式

var marker = new BMap.Marker(

new BMap.Point(item.position[0], item.position[1]),

 { icon: myIcon });// 创建标注点

item.content = `文本`; // 文本或者dom都行

self.markerArr.push(marker) // 把每一个标注点放一个数组里面

marker.addEventListener("click", function() { // 创建标注点的点击事件 各种事件都可以绑定

self.num = index 

self.setPositionShow('click', item)

})

self.map.addOverlay(marker); // 绑定到对应的map上面去

})

},

setPositionShow(type, item) { //设置点

const self = this

const items = item || this.lnglats[this.num]

var newOption = self.myChart.getOption(); // 获取当前echart的所有设置

newOption.series[0].data = self.positionArr // 设置气泡点更新数据

self.myChart.setOption(newOption, false); // echart的更新数据的设置

self.map.setCenter(items.position) // 地图的中心的设置

self.map.openInfoWindow( // 打开百度地图的信息窗体

new BMap.InfoWindow(items.content, { offset: new BMap.Size(-20, 0) }),

 // items.content 动态设置信息窗体的内容

new BMap.Point(items.position[0], items.position[1]));

// 信息窗体弹窗的位置

},

getImgUrl(icon) {

return require("路径" + icon + '.类型');

}

总结：

可视化的展示，一般都是使用echart，本文是echart与百度地图的结合使用，echart里面百度地图的样式比高德的动态效果图要多些，坐标放大缩小不会偏移。百度地图与高德地图相比，唯一的不足，则是api文档没有高德地图那么友好，开发使用时，需要花费更多的时间来学习，所以，根据这个可视化小功能点，写了一个大概的api使用文档，减少后续同学的开发学习时间成本。