囿于江湖
囿于江湖
  • 发布:2021-11-09 14:41
  • 更新:2022-08-30 17:12
  • 阅读:1032

map地图渲染marker 当marker数量超过1000 页面加载出来需要接近10s

分类:nvue
        const { windowWidth, windowHeight } = uni.getSystemInfoSync();  
            let xValue = -15  
            let yValue = -35  
            let xValue2 = -15  
            let yValue2 =  -35  
            if(!val || !val.lat || !val.lng) {  
                return  
            }  
           this.pieces.map(p => {  
             if(!val['pm10']) {  
               val['pm10'] = ''  
             }  
             if(val['pm10'] && ((val['pm10'] === p.value) || (p.gt <= val['pm10'] && val['pm10'] < p.lte && val['pm10'] !== ''))) {  
                 //let pm10Value = val.pm10 + ''  
                 let padValue = 6  
                 // if(pm10Value.length === 1){  
                    //  val.pm10 = val.pm10 + '.'  
                 // }  
                 // if(pm10Value.length === 3){  
                 //    val.pm10 = val.pm10 + ' '  
                    // padValue = 4  
                 // }  
                 // console.log(padValue)  
               switch(type) {  
                 case 1:  
                        this.covers.push({  
                            id:index+'',  
                            zIndex: index + 900,  
                            latitude: val.lat - 0,  
                            longitude: val.lng - 0,  
                            width:40,  
                            height:40,  
                            // alpha:0.3,  
                            iconPath: `/static/img/markers/06-${p.icon}.png`,  
                            label: { //marker气泡  
                                content: `${val.pm10}`,  
                                color: "#fff",  
                                bgColor: `${p.color}`,  
                                borderRadius: 30,  
                                fontSize: 15,  
                                width: 30,  
                                height: 30,  
                                textAlign: "center",  
                                 // 数字定位,放在中间  
                                x: `${xValue}`,  
                                y: `${yValue}`,  
                            },  
                            callout: { //marker气泡  
                                content: `名称:${val.name}\n统计时间:${val.date}\npm10:${val.pm10}`,  
                                color: "#fff",  
                                bgColor: "rgba(15, 158, 250, 1)",  
                                borderRadius: 10,  
                                fontSize: 12,  
                                textAlign: "left",  
                                padding: 6,  
                                display: 'BYCLICK',  
                            }  
                        })  
                   break;  
                 case 2:  
                   this.covers.push({  
                        id:index+'',  
                        zIndex: index + 900,  
                        latitude: val.lat - 0,  
                        longitude: val.lng - 0,  
                        width:40,  
                        height:40,  
                        // alpha:0.3,  
                        iconPath: `/static/img/markers/06-${p.icon}.png`,  
                        label: { //marker气泡  
                            content: `${val.pm10}`,  
                            color: "#fff",  
                            bgColor: `${p.color}`,  
                            borderRadius: 30,  
                            fontSize: 15,  
                            width: 30,  
                            height: 30,  
                            textAlign: "center",  
                             // 数字定位,放在中间  
                            x: `${xValue}`,  
                            y: `${yValue}`,  
                        },  
                        callout: { //marker气泡  
                            content: `名称:${val.name}\n统计时间:${val.date}\npm10:${val.pm10}`,  
                            color: "#fff",  
                            bgColor: "rgba(15, 158, 250, 1)",  
                            borderRadius: 10,  
                            fontSize: 12,  
                            textAlign: "left",  
                            padding: 6,  
                            display: 'BYCLICK',  
                        }  
                    })  
                   break;  
                 case 3:  
                   this.covers.push({  
                        id:index+'',  
                        zIndex: index + 900,  
                        latitude: val.lat - 0,  
                        longitude: val.lng - 0,  
                        width:40,  
                        height:40,  
                        // alpha:0.3,  
                        iconPath: `/static/img/markers/07-${p.icon}.png`,  
                        label: { //marker气泡  
                            content: `${val.pm10}`,  
                            color: "#fff",  
                            bgColor:  `${p.color}`,  
                            borderRadius: 30,  
                            fontSize: 15,  
                            width: 30,  
                            height: 30,  
                            textAlign: "center",  
                             // 数字定位,放在中间  
                            x: `${xValue2}`,  
                            y: `${yValue2}`,  
                        },  
                        callout: { //marker气泡  
                            content: `设备名称:${val.deviceName}\n统计时间:${val.date}\npm10:${val.pm10}`,  
                            color: "#fff",  
                            bgColor: "rgba(15, 158, 250, 1)",  
                            borderRadius: 10,  
                            fontSize: 12,  
                            textAlign: "center",  
                            padding: 5,  
                            display: 'BYCLICK',  
                        }  
                    })  
                   break;  
               }  
             }  
           })
2021-11-09 14:41 负责人:无 分享
已邀请:
DCloud_Android_ST

DCloud_Android_ST

超过1000这种情况属于极端测试了 正常不会放置这么多的marker。如果你需求是这样请减负。采用聚合减少marker个数

FullStack

FullStack - 【插件开发】【专治疑难杂症】【ios上架、马甲包、白包、过审、已成功上架过几百个】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=22130】【非诚勿扰】QQ:543610866

该问题目前已经被锁定, 无法添加新回复