百度地图加载海量点并使用自定义图标vue-baidu-map + mapv

最近用vue做一款城管的项目，需要用到在地图上在线查看店铺广告，及巡查人员的功能。地图就选择了百度地图，用了别人封装好的vue-baidu-map组件。里面的标点就直接用的bm-marker组件。刚开始的时候店铺广告量很少，没发现啥问题，之后用户导入了5000个店铺数据，直接导致地图管理页面打不开，浏览器卡死崩溃现象。后台数据返回的肯定是毫秒级的，那么问题就出现在前端渲染上。当然百度地图提供了海量点以及聚合的功能，但是貌似不支持自定义的图标，你要是不在意，就大可不必往下看了。

可能是因为小众的原因，官方并无太多文档介绍，接下来就看使用百度的mapv插件让加载5000条数据从卡死到3秒钟完成，当然配合vue的缓存使用的话之后打开都是秒开

首先我们安装依赖

npm install mapv
npm install vue-baidu-map 

使用了mapv后，vue-baidu-map并不是必须的，只因我之前用了它，这里用它只是拿到百度地图的实例而已

一，从后台接口拿数据，改造之（因为我是改造，所以原先的数据不符合要求）

listMap(this.storeSearch)
.then(res => {
  this.pointArray = res.rows
  // 处理数据
  this.pointArray.map(item => {
	item.geometry = {
	  type: 'Point',
	  coordinates: [item.lng, item.lat]
	}
	item.icon = item.type === 1 ? storePointIcon : adPointIcon
  })
  this.mapvShow(baidumap, this.pointArray)
})

/*
*解释说明
*listMap 为我后台的接口
*pointArray 为我拿到的后台数据
*baidumap为百度地图实例，我是在vue-baidu-map中拿的
*import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
*然后用map方法对数据进行改造，主要增加了如下
geometry = {
  type: 'Point',
  coordinates: [经度, 纬度],
}
icon:'' 图标
*/

二，改造完之后进行展示

// mapv店铺广告标记
mapvShow(baidumap, pointArray) {
  var that = this
  const mapv = require('mapv')
  const dataSet = new mapv.DataSet(pointArray)
  const options = {
	methods: {
	  click: function(item) {
		that.openInfo(item)
	  }
	},
	size: 20,
	width: 20,
	height: 28,
	draw: 'icon'
  }
  this.mapvLayer = new mapv.baiduMapLayer(baidumap, dataSet, options)
}
/*
*解释说明
*mapv = require('mapv') 引入mapv
*new mapv.DataSet(pointArray) 设置数据源
*options 配置项，用来配置点击事件
*this.mapvLayer = new mapv.baiduMapLayer(baidumap, dataSet, options) 通过mapv的layer把数据渲染到地图上
至此就已经完成了标点的渲染
*/

这里为什么用this.mapvLayer接收了一下，因为我这里还有一个切换商铺和广告的功能，在切换的时候要清理掉原先的层
比如只显示商铺的标记

// 只显示商铺标记
showStorePoint() {
  this.mapvLayer.hide()
  this.mapvShow(this.baidumap, this.mapPoint)
}
/*
*this.mapPoint 为商铺的数据集合
*/

这么看来还是很简单，不过这中间的弯路在没有文档帮助的情况下还是要走不少的，希望能给大家一些参考