ol.Overlay+gif动画及隐藏问题

dragonzoebai

已于 2023-11-27 09:35:00 修改

阅读量294

点赞数

分类专栏： GIS javascript 文章标签： gis ol gif

于 2023-07-28 10:23:37 首次发布

本文链接：https://blog.youkuaiyun.com/dragonzoebai/article/details/131974850

版权

GIS 同时被 2 个专栏收录

29 篇文章

订阅专栏

javascript

15 篇文章

订阅专栏

该示例代码展示了一个基于OpenLayers的地图应用，当地图缩放级别改变时，通过CSS的hide方法或markerLbs.setVisible方法控制一个标记上的GIF动画显示与隐藏。在zoom大于4时，GIF隐藏；否则显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

隐藏要使用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>