Openlayers 中设置的Icon随着地图的缩放而变大变小

在此之前，你的地图已经加载完毕，已经实例化，图片已经设置成功，并且能拿到你的设置图片的实例对象

//一般实例化地图的地方，就可以注入监听地图操作，当前例子是在angular框架下进行，如下
ngOnInit(): void {
    // this.map = this.mapContext.getViewer();
.
.
.
.
//上面是你地图实例化操作，然后赋值给map

    // 初始化防抖函数，这里做了一点优化，不能每次滚动就不停的设置，
        const debouncedLogZoom = this.debounce(() => {
           // 获取地图的缩放值
            const zoom = this.map.getView().getZoom();
            console.log(this.currentPhotoFeatures)
            //这里是你的当前图片的icon实例
            if (this.currentPhotoFeatures.length > 0) {
                // 修改图片按照zoom比例缩小放大，这里比例自己定义，注意需要避开最大最小缩放
                let scale = 1;
                if (zoom < 18) {
                    scale = zoom / 18;
                }
                console.log(scale);
                this.currentPhotoFeatures.forEach((t: any) => {
                    //这些都是api，在网上找的
                    let feature = t.feature;
                    let style = feature.getStyle();
                    let image = style.getImage();
                    //Icon-----import Icon from  ol/style/Icon ;
                    if (image instanceof Icon) {
                        // 修改 scale 属性
                        image.setScale(scale); 
                    }
                    feature.setStyle(style);
                })
            }
        }, 500);
        //最后开始监听
        this.map.getView().on( change:resolution , debouncedLogZoom)

}

 // 防抖优化
    debounce(func: any, immediate: any) {
        let timeout: string | number | NodeJS.Timeout | null | undefined = null;
        return () => {
            let context = this, args = arguments;
            if (timeout) {
                clearTimeout(timeout);
            }
            timeout = setTimeout(() => {
                func.apply(context, args);
            }, immediate);
        }
    }