百度地图超级多点卡顿问题整理

基于目前项目中百度地图的版本等原因，选择用mavgl解决。相关参考文档如下：

https://lbsyun.baidu.com/solutions/mapvdata

在public的index页面中引入

<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.51/dist/mapvgl.min.js"></script>
<script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>

然后在地图组件做代码操作如下：

<template>
  <!-- 这是平铺的地图 -->
    <div id="mapEch" class="new2dMap"></div>
</template>

script代码：

<script>
  export default {
    props: {
      zoom: {
        type: Number,
        default: 15
      },
      streetText: {
        type: String,
        default: ''
      },
      uptown_id:{
        type:String,
        default:''
      },
      MapBtnNum:{
        type:Number,
        default:0
      }
    },
    data() {
      return {
        initMap: '',
        pointList: [
          {id:'',lng:118.711996,lat:37.440117,name:'楼宇党群服务中心',type:1,value:100},
          {id:'',lng:118.678279,lat:37.431608,name:'XX护心加油站',type:2,value:100},
          {id:'',lng:118.723086,lat:37.431407,name:'小区党群服务驿站',type:3,value:100},
          {id:'',lng:118.697718,lat:37.446708,name:'康阳社区党群',type:4,value:100},
          {id:'',lng:118.698688,lat:37.432955,name:'天水社区党群',type:4,value:55},
          {id:'',lng:118.710582,lat:37.426421,name:'金融港社区党群',type:4,value:10}
        ],
        lng: 118.711996,
        lat: 37.440117,
      }
    },
    watch:{

    },
    methods: {
      //初始化百度地图
      initBDMap() {
        let that = this, level = this.zoom, point;
        point = new BMapGL.Point(that.lng, that.lat);
        let map = new window.BMapGL.Map("mapEch", {minZoom: 2, maxZoom: 20});
        map.centerAndZoom(point, level);
        map.enableScrollWheelZoom();

        that.initMap = map;
        let pointList = that.pointList
        //画水波纹图层动画
        var view = new mapvgl.View({
            map: map
        });
        var color;
        var data = pointList.map((item, index) => {
            if(item.value<20){
              color = 'rgba(35, 207, 58, 0.5)'
            }else if(item.value<60){
              color = 'rgba(66, 189, 253, 0.5)'
            }else if(item.value>60){
              color = 'rgba(253, 79, 66, 0.5)'
            }
            return {
                geometry: {
                    type: 'Point',
                    coordinates: [item.lng, item.lat]
                },
                color:color,
                size: item.type==4?30:'none',    // 圆的半径
                borderWidth:10,
                borderColor:'#ff0000'
            };

        });
        // RippleLayer
        var bubbleLayer = new mapvgl.CircleLayer({
            type: 'wave',// 绘制带波纹扩散的圆
            radius: r => 1.6 * r, // 扩散半径，支持直接设置和回调两种形式
            duration: 1 / 6, // 周期影响扩散速度，越小越快
            trail: 4,  // 拖尾影响波纹数，越大越多
            color : 'rgba(253, 79, 66, 0.5)'
            // zIndex:-1,
        });
        view.addLayer(bubbleLayer);
        bubbleLayer.setData(data);

        //绘制超级多的点，解决卡顿
        var dataPoint = [],iconImg;
        for(var i = 0;i<pointList.length;i++){
          if (pointList[i].type == 1) {
            //楼宇党群
            iconImg = require("@/assets/cockpit/partyIconBuild.png");
            // iconImg =  pointImg
          } else if (pointList[i].type == 2) {
            //加油站
            iconImg = require("@/assets/cockpit/partyIconOil.png");
          } else if (pointList[i].type == 3) {
            //小区党群
            iconImg = require("@/assets/cockpit/partyIconUptown.png");
          } else if (pointList[i].type == 4) {
            //社区党群
            if(pointList[i].value<20){
              iconImg = require("@/assets/cockpit/partyIconGreen.png");
            }else if(pointList[i].value<60){
              iconImg = require("@/assets/cockpit/partyIconBlue.png");
            }else if(pointList[i].value>60){
              iconImg = require("@/assets/cockpit/partyIconRed.png");
            }
          }
          let item = {
            geometry: {
              type: 'Point',
              coordinates: [pointList[i].lng, pointList[i].lat]
            },
            properties: {
                icon:iconImg,
                text:'这是一个文字的测试',
                fillSize:20
            }
          }
          dataPoint.push(item)
        }
        var layer = new mapvgl.IconLayer({
            width: 53,
            height:77,
            opacity: 1,
            enablePicked: true, // 是否可以拾取
            selectedIndex: -1, // 选中项
            selectedColor: 'rgba(66, 176, 253, 0.1)', // 选中项颜色  autoSelect为true的时候是可选中的，false即为不可选中
            autoSelect: false, // 根据鼠标位置来自动设置选中项
            onClick: (e) => { // 点击事件
                console.log('click', e);
            },
            // onDblClick: e => {
            //     console.log('double click', e);
            // },
            // onRightClick: e => {
            //     console.log('right click', e);
            // }
        });
        view.addLayer(layer);
        layer.setData(dataPoint);
      },
    },
    mounted() {

      this.initBDMap()
    },
  }
</script>