前世：在项目中原技术的选型用的是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使用文档，减少后续同学的开发学习时间成本。