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
- 更新:2022-08-30 17:12
- 阅读:1032
map地图渲染marker 当marker数量超过1000 页面加载出来需要接近10s
分类:nvue
2 个回复
DCloud_Android_ST
超过1000这种情况属于极端测试了 正常不会放置这么多的marker。如果你需求是这样请减负。采用聚合减少marker个数
FullStack - 【插件开发】【专治疑难杂症】【ios上架、马甲包、白包、过审、已成功上架过几百个】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=22130】【非诚勿扰】QQ:543610866
海量点、官方nvue高德地图扩展:https://ext.dcloud.net.cn/plugin?id=9260