1.将创建的massMark放在data中
this.massMarks = new AMap.MassMarks(this.markerList, {
cursor: 'pointer',
style: style
})
2.监听zoom
this.map.on('zoomend', () => {
let activeZoom = this.map.getZoom()
if (activeZoom >= 12 && this.zoom < 12) {
this.changeMarkerIcon(activeZoom)
} else if (activeZoom < 12 && this.zoom >= 12) {
this.changeMarkerIcon(activeZoom)
}
this.zoom = activeZoom
})
3.实现切换icon的style
changeMarkerIcon(zoom) {
let width, height
if (zoom >= 12) {
width = 32, height = 46
} else {
width = 50, height = 50
}
let style_zoom = [{
url: normalLogo_zoom,//这里是用import引入了图片路径方便复用
anchor: new AMap.Pixel((width / 2), (height * .8)),
size: new AMap.Size(width, height),
zIndex: 2
}, {
url: abnormalLogo_zoom,
anchor: new AMap.Pixel((width / 2), (height * .8)),
size: new AMap.Size(width, height),
zIndex: 3
}, {
url: offlineLogo_zoom,
anchor: new AMap.Pixel((width / 2), (height * .8)),
size: new AMap.Size(width, height),
zIndex: 1
}]
let style = [{
url: normalLogo,
anchor: new AMap.Pixel((width / 2), (height * .8)),
size: new AMap.Size(width, height),
zIndex: 2
}, {
url: abnormalLogo,
anchor: new AMap.Pixel((width / 2), (height * .8)),
size: new AMap.Size(width, height),
zIndex: 3
}, {
url: offlineLogo,
anchor: new AMap.Pixel((width / 2), (height * .8)),
size: new AMap.Size(width, height),
zIndex: 1
}]
if (zoom >= 12) {
this.massMarks.setStyle(style_zoom)//setStyle实现icon样式的设置
} else {
this.massMarks.setStyle(style)
}
},