隐藏要使用css比较彻底，例如$("#markerLbs").hide()。
如果使用markerLbs.setVisible(false)，当地图刷新后再次显示，可能我的用法不对，欢迎指教。
我的demo是一个gif动画，当zoom变化时控制gif显隐，完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>overlayer+gif动画</title>
<link rel="stylesheet" href="./js/ol.css" />
<script type="text/javascript" src="./js/ol.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style type="text/css">
html,
body,
#map {
border: 0px;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
font-size: 13px;
}
#markerLbs {
text-align: center;
color: #f00;
/* background-color: #0f0; */
}
</style>
</head>
<body>
<div id="map"></div>
<div id="markerOverlayContainer">
<div id="markerLbs">
<div>
<!-- <img src="./lbs1.gif" style="width:50px" /> -->
<img src="https://openlayers.org/en/latest/examples/data/globe.gif" style="width:100px"/>
</div>
<div>gif动画</div>
</div>
</div>
</body>
<script type="text/javascript">
var tileLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
})
});
var markerLbs = new ol.Overlay({
position: ol.proj.fromLonLat([103.584297498027, 36.119086450265]), // 默认空
positioning: 'center-bottom',
element: document.getElementById('markerLbs'), // 绑定上面添加的元素
offset: [-25, -11]
})
var map = new ol.Map({
controls: [],
target: 'map',
layers: [tileLayer],
overlays: [markerLbs],
view: new ol.View({
center: ol.proj.fromLonLat([103.584297498027, 36.119086450265]),
zoom: 4,
})
});
map.on('moveend', (e) => {
var zoom = e.target.getView().getZoom()
console.log(zoom)
if (zoom > 4) {
$("#markerLbs").hide()
// markerLbs.setVisible(false) // 地图刷新后再次显示
} else {
$("#markerLbs").show()
// markerLbs.setVisible(true)
}
})
</script>
</html>
