Vue2olRendererCanvasfilter

Canvas 滤镜

---

基础用法

启用

<template>
  <div style="background-color:white;position:absolute;z-index:1000;">
    <input type="checkbox" v-model="isFilter" />启用
  </div>
  <vue2ol-map style="height:400px;">
    <vue2ol-view :zoom="zoom" :center="center" :options="viewOptions">
    </vue2ol-view>
    <vue2ol-layer-tile>
      <vue2ol-source-tdt> </vue2ol-source-tdt>
    </vue2ol-layer-tile>
    <vue2ol-layer-vector>
      <vue2ol-source-vector>
        <vue2ol-feature :geometry="polygon"> </vue2ol-feature>
      </vue2ol-source-vector>
    </vue2ol-layer-vector>
    <vue2ol-renderer-canvasfilter
      v-if="isFilter"
      :brightness="'0.8'"
      :sort="['brightness', 'grayscale']"
    >
    </vue2ol-renderer-canvasfilter>
  </vue2ol-map>
</template>

<script>
import Polygon from "ol/geom/Polygon";

export default {
  data() {
    return {
      zoom: 8, //级别
      center: [119.5, 27.5], //中心点
      viewOptions: {
        projection: "EPSG:4326" //坐标系
      },
      polygon: null,
      isFilter: true
    };
  },
  mounted() {
    this.polygon = new Polygon([
      [
        [118, 28],
        [120, 28],
        [120, 27],
        [119, 27],
        [118, 28]
      ]
    ]);
  }
};
</script>

Expand Copy Copy

部分图层

<template>
  <vue2ol-map style="height:400px;">
    <vue2ol-view :zoom="zoom" :center="center" :options="viewOptions">
    </vue2ol-view>
    <vue2ol-layer-tile :options="{ className: 'ol-layer2' }">
      <vue2ol-source-tdt> </vue2ol-source-tdt>
    </vue2ol-layer-tile>
    <vue2ol-layer-vector>
      <vue2ol-source-vector>
        <vue2ol-feature :geometry="polygon"> </vue2ol-feature>
      </vue2ol-source-vector>
    </vue2ol-layer-vector>
    <vue2ol-renderer-canvasfilter
      :classNameList="['ol-layer2']"
      :grayscale="'50%'"
      :brightness="'50%'"
      :sort="['brightness', 'grayscale']"
    >
    </vue2ol-renderer-canvasfilter>
  </vue2ol-map>
</template>

<script>
import Polygon from "ol/geom/Polygon";
export default {
  data() {
    return {
      zoom: 8, //级别
      center: [119.5, 27.5], //中心点
      viewOptions: {
        projection: "EPSG:4326" //坐标系
      },
      polygon: null
    };
  },
  mounted() {
    this.polygon = new Polygon([
      [
        [118, 28],
        [120, 28],
        [120, 27],
        [119, 27],
        [118, 28]
      ]
    ]);
  }
};
</script>

Expand Copy Copy

Props

名称	描述	类型	取值范围	默认值
parentMap	父亲地图	null	-
grayscale	灰度	Number | String	-	null
sepia	深褐色	Number | String	-	null
saturate	饱和度	Number | String	-	null
hueRotate	色相	Number | String	-	null
invert	反相	Number | String	-	null
opacity	透明度	Number | String	-	null
brightness	亮度	Number | String	-	null
contrast	对比度	Number | String	-	null
blur		Number | String	-	null
dropShadow		string	-	null
options		object	-
classNameList	需要切割的图层 className 数组	{string[]}	-	["ol-layer"]
sort	顺序	{string[]}	-	[ "blur", "brightness", "contrast", "grayscale", "hueRotate", "invert", "opacity", "saturate", "sepia", "dropShadow", ]

Events

名称	属性	描述
init	mapObject import('utilsol/renderer/CanvasFilter').default - 地图元素	地图元素初始化完时触发
append	mapObject import('utilsol/renderer/CanvasFilter').default - 地图元素	地图元素初始化完时触发
ready	mapObject import('utilsol/renderer/CanvasFilter').default - 地图元素	组件就绪时触发