提示:当前为默认节点,你可以在后盾窜改为你想要的站点!
站长资源
中国站长网站

百度地图加载海量点并使用自定义图标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 为商铺的数据集合
*/

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

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » 百度地图加载海量点并使用自定义图标vue-baidu-map + mapv

评论 抢沙发

评论前务必登录!