openalyers 好玩的效果之蒙版图层

先看下我之前利用arcgis js api实现的蒙版效果：

arcgis js 4.18新体验：阴影滤镜图层_Giser_往事随风的博客-CSDN博客arcgis api for javascript 4.18 又双叕出了，感叹 esri 开发团队高产的同时，又不得不怀疑自己能否追的上技术更新换代的速度。唯有变被动为主动，不断的提高自己，才能拿跟上时代的发展。4.18所有的图层都添加了一个effect 这样一个属性，简单了解下，类似于前端css的filter 的滤镜效果话不多说，老规矩先看下实现的效果：直接上代码吧（是完整的代码哦），里面用到的技术是蒙版效果与滤镜属性相结合；<!DOCTYPE html>...https://blog.csdn.net/KK_bluebule/article/details/111382043

arcgis js 4.18新体验：阴影滤镜图层

然后老规矩，看下利用 ol 去实现的效果吧

用的资源都是在线网址，不是切好的tif哦~~~

第一张图是可以只露出想要区域的底图，外部的可以设置透明色；

第二张图在第一份的基础上加了个影像，只显示mask 内部的影像。

很简单，也很有意思，可以延伸出其他在前端可以展示的效果。

实现过程：

主要用的是 ol-ext 的插件实现的（哈哈我也是站在别人的肩膀上蹦跶下的）

插件网址：ol-ext

然后直接上代码吧

<template><div id="olMap"></div>
</template><script>
import 'ol-ext/dist/ol-ext.min.css';
import { Map, View } from "ol";
import OSM from "ol/source/OSM"
import Stamen from 'ol/source/Stamen'
import TileLayer from "ol/layer/Tile"
import GeoJSON from "ol/format/GeoJSON";
import Fill from "ol/style/Fill";
import Mask from 'ol-ext/filter/Mask'
import Crop from 'ol-ext/filter/Crop'
import {createTDTImg} from '@/components/map/olMap/modules/basemap'
export default {name: "ol-蒙版图层",data() {return {mapObj:{map:null,view:null,},namespace:'testKH',layername:'shushan',baseUrl:'http://localhost:7777/geoserver/testKH/'}},mounted() {this.initMap();},methods: {initMap(){const osmBaseLayer = new TileLayer({source:new OSM()})this.mapObj.view = new View({center: [117.28, 31.86],zoom: 8,projection: 'EPSG:4326',})this.mapObj.map = new Map({layers :[osmBaseLayer],view:this.mapObj.view,target:'olMap'})//添加蒙版图层let f = new GeoJSON().readFeature(require('@/assets/indexMap.json').features[0])var mask = new Mask({feature: f,wrapX: true,inner: false,fill: new Fill({ color:[255,255,255,0.6] })});var crop = new Crop({feature: f,wrapX: true,inner: false});// 若不加天地图就直接将osmlayer 使用addFilter 就行// osmBaseLayer.addFilter(crop);// osmBaseLayer.addFilter(mask);let tdtImgLayer = createTDTImg();tdtImgLayer.addFilter(crop);tdtImgLayer.addFilter(mask);this.mapObj.map.addLayer(tdtImgLayer)}},components: {}
}
</script><style scoped>
#olMap{height:100%;width: 100%;
}
</style>

openalyers 好玩的效果之蒙版图层相关推荐

好玩gan_效果超赞服务器挤爆！用GAN生成人像油画火了，带你一秒回到文艺复兴...
好玩的是,即使你输入了一张笑得很开心的照片,AI Portrait Ars也会倾向于让你看上去严肃点. 文 | 鱼羊栗子转载自:量子位 (ID:QbitAI) 给GAN一张照片,它就能带你回到文艺 ...
css 蒙版效果_CSS蒙版的过渡效果
css 蒙版效果 View demo 查看演示 Download Source 下载源 Today we'd like to show you how to create an intriguingl ...
如何使用pr的超级键效果-达到蒙版的效果
pr制作带有老电视线条的视频效果 1.首先准备好素材这是我网盘的下载地址:链接:https://pan.baidu.com/s/1OJ0ikS7CkbGs6eUxxctnxQ 提取码:mizj 2 ...
iOS 烟花撒花效果，图层渐变，图层倒影特效。CAEmitterLayer粒子发射器
iOS 烟花撒花效果,图层渐变,图层倒影特效.CAEmitterLayer粒子发射器上一节我写了一个关于视图图层的相关类,有关CALayer这个类的使用和一些用法,具体看这里,就是我们在处理视图的时 ...
photoshop蒙版俗解：写给还在问蒙版是什么的新人
"如果你有一个疑问,向专家讨教之后,你的疑问有可能由一个变成了三个.因为专家解释问题的方式是:他可能用两个术语来解释你不明白的那个术语,结果是,你不明白的术语由一个变成了三个".- ...
关于 Photoshop 图层
今天跟小常来了解一下关于 Photoshop 图层的知识吧! 小常说一下: 就算是Believe,中间也藏了一个lie: 就算是Friend,还是免不了end: 就算是Lover,还可能会over: ...
故障效果，制作抖音效果的幻影海报
故障效果,制作抖音效果的幻影海报感兴趣的小伙伴可以关注我哦,有什么不懂可以加群问:741090028 本篇教程通过PS制作抖音效果风格的海报,抖音风格又叫故障效果和幻影效果,前者叫的多,此类风格之前 ...
PhotoShop如何使用图层之实例演示？
文章目录 0.引言 1.创建简单的立体书效果图 2.给人像制作逼真的影子 3.用调整图层除去图像中的灰色 4.制作有质感的口红颜色 5.给黑白图像上色 6.制作粉笔文字效果 0.引言因科研等多场 ...
制作卡通（动漫风）效果
本文制作卡通效果(动漫风)的主要思路: 分成线稿和色彩两部分来处理.通过海报边缘滤镜.阈值命令.油画滤镜等提取并勾勒出图像的线稿: 通过表面模糊滤镜.油画滤镜.木刻滤镜等色块化图像. 步骤及说明: 1 ...
Ae 效果详解：音频频谱
Ae菜单:效果/生成/音频频谱 Effect/Generate/Audio Spectrum 音频频谱 Audio Spectrum效果用于实现音频可视化. 此效果显示指定频率范围内的各频率的音频电平 ...

openalyers 好玩的效果之蒙版图层

openalyers 好玩的效果之蒙版图层相关推荐

最新文章

热门文章