1. 写在前面 常见的地图覆盖物为这三种类型，如：popup弹窗、label标注信息、text文本信息等。 上篇讲了overlay的一些属性方法事件等，这篇主要讲overlay三种最常用的案例。更多可以参考上篇内容openlayers6【八】地图覆盖物overlay详解，这两篇会有关联。 popup弹窗 基本是经常遇到的需求案例，所有单独给大家讲下，让地图更富有生命力！！！ 你需要理解：overlay 然后通过map进行绑定，承载在页面的 dom 上的元素。 2. overlay 实现popup弹窗 2.1 vue 页面 addPopup() 方法详解 ①：实例一个 new Overlay()，设置相关的属性，element 是和页面的 最外层弹窗的dom进行绑定 ②：通过 map.addOverlay(this.overlay) 把 overlay弹窗添加到页面 ③：closer.onclick 添加一个 x 关闭弹窗事件 ④：通过 this.map.on("singleclick", function(evt) 事件点击地图触发弹窗效果 具体代码如下： 效果 2.2 autoPan 属性为false效果 点击了屏幕最右边，可以看到不会根据鼠标点击位置进行适应地图。 3. overlay 实现 label标注信息 vue 页面 4 overlay 实现 text文本信息 vue 页面 5. 附上完整代码 到此这篇关于openlayers6之地图覆盖物overlay三种常用用法(popup弹窗marker标注text文本)的文章就介绍到这了,更多相关vue openlayer popup地图覆盖物内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！