百度地图加MapVGL实现多覆盖物加图标，且可点击

主要代码

initFun(){
            //创建百度地图
            this.map = new BMapGL.Map('map');
            var point = new BMapGL.Point(123.43218,41.777273);
            this.map.centerAndZoom(point, 15);
            this.map.enableScrollWheelZoom(true);
            this.map.setMapStyleV2({styleJson: this.styleJsonV})
            
            // 创建MapVGL图层管理器
            this.view = new mapvgl.View({
                map: this.map
            });
            this.lineNameList = []
            //循环管道数据
            for(let i in this.lineData){
                let arr = [];
                let pngObj = [];
                //由于管道是多个段落组成，此处用户判断第一个段落的中心点，用于显示隐患等级图标
                pngObj.push(Number(((this.lineData[i].latANDlon[0].lon+this.lineData[i].latANDlon[1].lon)/2).toFixed(8)))
                pngObj.push(Number(((this.lineData[i].latANDlon[0].lat+this.lineData[i].latANDlon[1].lat)/2).toFixed(8)));

                //设置空图片
                let imgPng =null;
                //判断管道隐患等级，给imgPng赋值用require导入的图片地址
                switch(this.lineData[i].hiddenDangerLevel){
                    case 1:
                        imgPng=marker1
                        break;
                    case 2:
                        imgPng=marker2
                        break;
                    case 3:
                        imgPng=marker3
                        break;
                    case 100:
                        imgPng=marker4
                        break;
                }
                //创建MapVGL的icon图标层
                this.layer = new mapvgl.IconLayer({
                    // flat:true,
                    blend: 'lighter',
                    width: 40,
                    height: 60,
                    offset: [0, -30],
                    opacity: 1,
                    icon: imgPng,//设置图片
                    enablePicked: true, // 是否可以拾取
                    onClick: (e) => { // 点击事件
                        if(e.dataIndex ==0){
                            this.pipingId =this.lineData[i].pipeid;//点击时记录被点击管道的id
                        }
                    },
                });

                //设置图标在地图上显示的位置
                var data = [{
                    geometry: {
                        type: 'Point',
                        coordinates: pngObj
                    },
                    size: 30
                }];
                this.layer.setData(data);

                //给MapVGL添加图标
                this.view.addLayer(this.layer);

                //循环当前管道的所有段落，将所有经纬度添加到arr中
                for(let j in this.lineData[i].latANDlon){
                    arr.push(new BMapGL.Point(this.lineData[i].latANDlon[j].lon,this.lineData[i].latANDlon[j].lat))
                }
                var strokeColor

                //判断当前管道的风险等级，从而显示不同的颜色
                switch(this.lineData[i].riskLevel){
                    case 0:
                        strokeColor='#ECEFF7'
                        break;
                    case 1:
                        strokeColor='#66ccff'
                        break;
                    case 2:
                        strokeColor='#ffff00'
                        break;
                    case 3:
                        strokeColor='#ff9900'
                        break;
                    case 4:
                        strokeColor='#ff0033'
                        break;
                }

                //将根据经纬度形成的点的arr数组，通过BMapGL.Polyline()方法绘制成线，也就是管道
                let p= new BMapGL.Polyline(arr, {
                    strokeColor: strokeColor,//颜色
                    strokeWeight: 10,//粗细
                    strokeOpacity:0.5,//透明度
                });
                p.pipeid=this.lineData[i].pipeid;//管道是可以被点击的，所以要给管道手动加上pipeid属性
                this.map.addOverlay(p);//将管道覆盖物加到地图上
                this.lineNameList.push(p);
            }
            //给每个管道都加上点击事件
            this.lineNameList.map(item =>{
                item.addEventListener('click', e => {
                    this.pipingId=e.currentTarget.pipeid;//点击时记录被点击管道的id，与隐患图标被点击时的需求一致
                });
            })

            //定义鼠标移入移出两个事件
            var moveEvts = ['mouseover', 'mouseout'];
            //给每个管道都加上鼠标移入、移出事件，用于做鼠标移入高亮显示
            for (let i = 0; i < moveEvts.length; i++) {
                const event = moveEvts[i];
                this.lineNameList.map(item =>{
                    item.addEventListener(event, e => {
                        switch (event) {
                            case 'mouseover':
                                item.setStrokeOpacity(1);//鼠标移入高亮
                            break;
                            case 'mouseout':
                                item.setStrokeOpacity(0.5);//鼠标移出恢复默认状态
                            break;
                        }
                    });
                })
            }  
        }

效果图

我做功能的时候需要点击覆盖物或图标需要弹出弹框，并发送请求展示一些信息，可以在created里面监听点击事件来实现

created(){
        var that = this
        document.addEventListener('click', function(event) {
            //判断当前弹框是否打开 && 判断当前点击的是不是管道，如果是管道 pipingId 值不为null
            if(!that.visible && that.pipingId != null){
                that.infoLeft = event.clientX; // 鼠标相对于浏览器窗口的水平位置
                that.infoTop = event.clientY; // 鼠标相对于浏览器窗口的垂直位置
                that.infoGaspipeGas();//详情接口，用于获取详情，并打开弹框
            }else{
                that.pipingId=null;
                that.visible=false;
            }
        });
    },

使用<el-popover>，这样可以避免弹框超出屏幕

<el-popover
            placement="top"
            title=""
            width="200"
            trigger="manual"
            v-model="visible"
            popper-class="OfficialwebsitesecurityStyle"
            style="background: #000;color: #fff;">
            <div :style="{position:'fixed',top:infoTop+'px',left:infoLeft+'px'}" slot="reference" ></div>
            <div class='officialwebsitesecurityinfo'>
                <!-- <div class='officialwebsitesecuritytitle'>管道信息</div> -->
                <div class='content'>管道编号：{{boxInfo.pipesn}}</div>
                <!-- <div class='officialwebsitesecuritytitle'>风险信息</div> -->
                <div class='content'>风险等级：{{rlFun(boxInfo.risklevel)}}</div>
                <!-- <div class='officialwebsitesecuritytitle'>隐患信息</div> -->
                <div class='content'>隐患等级：{{hdlFun(boxInfo.hiddendangerlevel)}}</div>
            </div>
            <div class="jump">
                <el-button type="text" @click="goRisk()">风险评估</el-button>
                <el-button type="text" @click="goDanger()">管道隐患</el-button>
            </div>
        </el-popover>