vue使用mapGL实现添加批量标注

最近有个需求就是需要向地图添加1万个标注，如果直接向地图添加标注，可能几十个没什么问题，如果添加1万个就会特别卡，然后查看百度地图文档发现可以使用mapvgl实现

一、先 index.html 中引入

<script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=百度申请的ak"></script>
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.139/dist/mapvgl.min.js"></script>

二、使用

<!-- html -->
<div style="width: 100%; height: 100%">
    <div id="container"></div>
 </div>

/* css */
#container {
  width: 100%;
  height: 100%;
}

export default {

        data() {
            //这里存放数据
            return {
                map: null, // 地图实例对象
            };
        },
        mounted() {
           // 为了防止地图加载报错或白屏，这里使用this.$nextTick()
            this.$nextTick(() => {
                this.init();
            });
        },
        methods: {
             init() {
                  if(this.map) return
                  var map = new BMapGL.Map("container", {
                        minZoom: 5,
                        enableMapClick: false, //构造底图时，关闭底图可点功能
                        restrictCenter: false, // 不加该属性移动地图标注会错位
                  }); // 创建Map实例
                  map.centerAndZoom(new BMapGL.Point(113.930133, 22.77339), 7);
                  map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
                 // map.setMapStyleV2({
                 //     styleJson: json,  //自定义地图样式文件
                 // });
                  map.setTilt(60);  // 地图旋转角度
                  this.map = map;
                  this.addMapker()  // 添加标注函数
              },
                addMapker() {
                    let dataList = [];   // 保存渲染数据
                    this.map.clearOverlays();  // 清除地图上的覆盖物
                    this.list.forEach((item) => {  // 循环从后台得到的标注数据
                        dataList.push({
                            geometry: {
                                type: "Point",
                                coordinates: [item.longitude, item.latitude],  // 设置经纬度
                             },
                             color: "#ff5d5a",
                             size: 1,
                        });
                    })
                    let layer = new mapvgl.IconLayer({
                        data: dataList, // 循环保存的数据
                        width: 23, // 标注的宽度
                        height: 28,  // 标注的高度
                        offset: [0, -15],  // 设置标注的偏移量
                        opacity: 1,
                        icon: icon,  // 需要显示的标注图片
                        enablePicked: true, // 是否可以拾取
                        selectedIndex: -1, // 选中项
                        // selectedColor: "#50deaa", // 选中项颜色
                        // autoSelect: true, // 根据鼠标位置来自动设置选中项
                        onClick: (e) => {
                            // 鼠标点击标注触发
                        },
                        // onDblClick: (e) => {
                        //   console.log("double click", e);
                        // },
                        // onRightClick: (e) => {
                        //   console.log("right click", e);
                        // },
                    });
                  var view = new mapvgl.View({
                       map: this.map,
                  });
                  // 添加标注
                  view.addLayer(layer);
            },
        }

}