在此之前,你的地图已经加载完毕,已经实例化,图片已经设置成功,并且能拿到你的设置图片的实例对象
//一般实例化地图的地方,就可以注入监听地图操作,当前例子是在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);
}
}