137.在 Vue3 中使用 OpenLayers 实现蒙版图层遮罩挖空，显示底图图像

进入页面之后的新手指引

vue实现全局loading加蒙层

openalyers 实现蒙版图层

1，driver.js 新用户引导 https://kamranahmed.info/driver.js/#single-element-no-popover 模型大致如下图： 2，代码如下： import Driver from 'driver.js' // import driver.js import 'driver.js/dist/driver.min.css' // import ...

综上所述，通过Vue.js和OpenLayers库的结合，我们可以轻松实现控制蒙版层的显示与隐藏，并在蒙版中部挖空展示下方地图信息的功能。本文将介绍如何使用Vue.js和OpenLayers库来实现控制蒙版层的显示与隐藏，并在蒙版中部挖空展示下方地图信息。生命周期钩子函数中，我们可以获取地图容器的DOM元素，并初始化地图对象。在Vue组件的JavaScript代码中，我们可以使用OpenLayers库来创建地图并添加蒙版图层。然后，我们创建了一个。最后，我们可以在Vue的根实例中渲染这个自定义的地图组件。

欢迎来到 Vue3＋Openlayers 系列教程，这里是我在 CSDN 编写的所有 Vue3＋Openlayers 系列相关文章的索引页，适合初学者到进阶用户系统阅读。👀 更多教程正在持续更新中，欢迎关注我，一起探索 Openlayers 的强大魅力！

vue+openlayers系列教程旨在为开发者提供简单快捷的示例。在每一个示例中，解释相应的API知识点。

Vue自定义指令实现加载蒙层效果

如图所示，遮罩层就是覆盖在地图上面的蓝色透明图层，但是中间是挖空掉的，挖空掉的部分就显示地图原本的样子。一些业务需求就是要这种效果，感觉只是在造型上起到作用吧（bushi）。（本篇文章前提是了解openlayers具体使用方法，关键词：遮罩层、图层反转、图层挖空）所以我们需要两个主要的数据，一个是遮罩层（相当于橡皮泥），一个是边界线（相当于磨具）大致原理其实就是：emm...上图！

在后台管理系统的项目开发中，弹窗组件用到的地方很多。由于自带的默认样式不太符合视觉要求，因此需要利用maskStyle属性来自定义modal弹窗的遮罩样式。

前言 最近在uniapp中要写一个弹窗，弹窗好写，但是遮罩没有接触过。找到了下面这篇文章，推荐仔细阅读一下。在这篇文章的基础下，简单封装了一个遮罩。 推荐文章：论如何用Vue实现一个弹窗-一个简单的组件实现 遮罩 备注 组件名不要命名为mask，控制台会提示Do not use built-in or reserved HTML elements as component id，意思是不要将内置或保留的HTML元素用作组件id 效果 添加了一个close-on-click-modal属性，默认点击遮罩，遮罩

前言： openlayers中渲染图片是有多种方法的，Icon ，Image 等等都可以实现将图片放到地图上面，但是操作图片的话，方法比较少了，这里是配合 ol-ext 来实现的。 相关资料: 1、ol-ext官方地址：入口 2、ol-ext 对应的资料地址：入口 3、ol-ext 源码gitee地址：入口 4、openlayers 最新官网：入口 5、openlayers 官网api：入口 6、实际坐标转换视图坐标（getPixelFromCoordinate）：入口 ...

直接在遮罩层添加 @touchmove.prevent 可以实现禁止页面滚动，但是同时遮罩层内部也无法滚动了。 方法一：(此方法可以实现需求，但是关闭遮罩层后主页面会滑动到顶部，无法回到原来的浏览位置) function mo = function(e){ e.preventDefault(); }; //禁止滚动 stop(){ document.body.style.overflow='hidden'; documen

data中设置一个数据 windowheight:{ //高度等于屏幕高度 height:document.documentElement.clientHeight+'px', overflow:'hidden', } 在最外层的盒子进行判断，蒙版markshow出现为ture，就执行上面代码， 当关闭蒙版，设置为false，不执行上述代码，页面正常滚动 <div class="detail" :style="m..

现在可以根据 ol-ext 文档提供的功能，通过 JavaScript 代码来使用各种 ol-ext 提供的扩展功能，比如额外的图层、控件、交互等。ol-ext 是一个用于在 OpenLayers 地图上增加额外功能和控件的扩展库，ol-ext提供了许多额外的功能和控件，如动画效果、3D 功能、图层样式等，可以帮助开发者实现更丰富的地图交互体验。在 Vue 2 项目中的任何页面或组件中，引入并使用上面创建的地图组件，以展示 OpenLayers 地图和 ol-ext 功能。