Openlayers 根据需求实现Overlay的隐藏与显示

最新推荐文章于 2025-06-03 17:12:42 发布

「已注销」

最新推荐文章于 2025-06-03 17:12:42 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

文章标签： gis 前端

本文链接：https://blog.csdn.net/weixin_41321355/article/details/119895395

本文介绍了一种更便捷的方法，避免记录Overlay位置，通过id属性筛选并直接控制其显示状态，适用于动态隐藏与显示需求。作者分享了利用元素display属性管理和自定义筛选的代码实例。

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

根据需求隐藏Overlay

我看了下网上的例子，没有找到符合自己需求的方法，网上都是通过调用**setPosition()**方法来实现Overlay的隐藏，但是想要重新在同一个位置显示，则需要记录Overlay之前显示的位置信息，我觉得比较麻烦，所以我想到了如下方法：

首先，我们可以根据Overlay的id属性来根据需求进行筛选，例如：

/**
* 此例中，allOverlays是存储了所有的Overlay的一个数组；
* 通过Array.filter()筛选出符合需求的Overlay；
* 根据需求，我在构建Overlay的时候就把id通过下划线进行连接（id: overlay_800Hz）
* 对应的，你可以根据自己的需求构建id，方便进行筛选
*/
let myOverlays = allOverlays.filter((item) => { // 此处可筛选出id内含有800Hz的Overlay
	return item.id.split('_').includes('800Hz');
});

关键代码：

/**
* 如下，通过element可以获取生成Overlay的dom，通过父元素的display属性便可以控制显示状态
* 若想让Overlay显示，将对应的display设置为''（空）就可以
*/
myOverlays.forEach((item) => {
	item.get('element').parentElement.style.display = 'none';
});

仅仅是为了记录下这个解决方案，大佬勿喷，不喜勿喷，如果有更好的解决方案，欢迎大佬分享！🙂