openalyers 好玩的效果之蒙版图层

Giser_往事随风

已于 2022-07-09 15:59:38 修改

阅读量1.4k

点赞数 2

分类专栏： openlayers 文章标签： openalyers mask蒙版

于 2022-07-04 17:09:54 首次发布

本文链接：https://blog.csdn.net/kk_bluebule/article/details/125602692

版权

openlayers 专栏收录该内容

3 篇文章 5 订阅

订阅专栏

先看下我之前利用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>