vue2 百度地图中渲染海量数据点解决方案----Mapv的使用

[前言]之所以采用mapv而不用百度地图自带的海量点,是因为mapv对开发者更开放,自定义操作空间大

mapv官网,Demo实例里找项目要用的样式,如下图

再点击右上角源码,复制配置代码到自己项目中,如下图

1.页面正常引入使用vue-baidu-map,还不清楚地图的使用,可点这里查看vue-baidu-map的使用

2.安装使用Mapv

// 方案1.安装插件
npm install mapv

// 方案2. 直接加载官网(mapv.baidu.com)最新的js脚本文件
<script src="http://mapv.baidu.com/build/mapv.min.js"></script>
// 或
<script src="http://huiyan-fe.github.io/mapv/build/mapv.min.js"></script>

// 方案3. 下载最后发布的版本到项目中,也可以使用示例中的版本。
https://github.com/huiyan-fe/mapv/releases

3.调用并初始化Mapv配置(我这里使用的是mapv聚合样式,以他举例)

// 这里是获取海量点位的接口

let mapvLayer = null
export default {
	data() {
    return {
    	mapv: null,
    	pointData: [], // 存放接口返回的点位数据
    	// 地图上标记点的图片
        mapMarkerIcon: {
          url: require('@/assets/img/icon_default.png'),
          size: {
            width: 30,
            height: 41,
          }
      },
	}
}


async getData(){
	// 省略接口数据请求处理
	.
	.
	.
	// 调用Mapv
	this.initMapv()
}

    // **使用mapv地图上无法点击下钻，mapv生成的canvas覆盖在地图上，层级比地图高,点击事件作用在canvas上,这样就是可以在点位上做文章了**
    initMapv() {
      console.log('initmapv*********************')
      this.mapv = require('@/utils/mapv.js') // [安装方案3] 引入mapv相关配置代码
      
	  // 若之前渲染过了mapv,先销毁在重新生成,避免渲染多层mapv的canvas
      mapvLayer && this.destroyMapVLayer()

	  // 存放点位数据
      let mapVData = []
	  // 自定义渲染点位图片,注意替换路径
      var img = new Image()
      img.src = require('@/assets/img/icon_1.png')

      img.onload = () => {
        this.pointData.forEach((item) => {
          // mapV地图处理
          mapVData.push({
            geometry: {
              type: 'Point',
              coordinates: [item.longitude * 1, item.latitude * 1],
            },
            // 支持image对象和url两种方式
            // icon: img,
            dataInfo: item, // 自定义放置字段，留着点击事件取值=
            icon: this.mapMarkerIcon, // 获取图标
          })
        })
        let dataset = new this.mapv.DataSet(mapVData)

		// ******* 下面配置项根据使用的demo替换 *******
        // mapv配置项
        let mapVOption = {
          zIndex: 999,
          methods: {
          	// 每个点位的点击事件
            click: (item) => {
              if (item) {
                console.log('这是 点击', item)
                // 点击操作逻辑
              } else {
                console.log('这是 点击--没有item', item)
              }
            },
          },
          draw: 'icon',
          size: 50, // 添加点击事件时候可以用来设置点击范围
          width: 24,
          height: 33,
        }

        // 销毁重建(destroy())点击会有问题,使用update()更新数据
        if (mapvLayer) {
          mapvLayer.update({ mapVOption })
        }
        
        mapvLayer = new this.mapv.baiduMapLayer(this.map, dataset, mapVOption)
      }
    },
    
	// 销毁mapv
    destroyMapVLayer() {
      mapvLayer.hide()
      console.log('destory***')
    },