海量点标记 MassMarks批量切换样式实现不同zoom下显示不同样式坐标

最新推荐文章于 2024-08-22 22:01:04 发布

不一样又怎样

最新推荐文章于 2024-08-22 22:01:04 发布

阅读量269

点赞数

文章标签： swift 开发语言 ios

本文链接：https://blog.csdn.net/xxx_holic123/article/details/131591647

版权

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)
            }
        },