openlayers高德瓦片利用filter参数自定义图层

效果展示

HTML结构

    <div class="mapFlter-box">
    <div id="mapFlter"></div>
    <el-form ref="form" :model="form" label-width="120px" class="formClass">
        <el-card>
            <div
              slot="header"
              style="
                display: flex;
                justify-content: space-between;
                line-height: 14px;
              "
            >
              <span>filter参数</span>
            </div>
                <el-form-item label="高斯模糊(px)">
                    <el-input v-model="form.blur" type="number"  min="0"> <template slot="append">px</template></el-input>
                </el-form-item>
                <el-form-item label="亮度(%)">
                    <el-slider v-model="form.brightness"></el-slider>
                </el-form-item>
                <el-form-item label="对比度(%)">
                    <el-slider v-model="form.contrast"></el-slider>
                </el-form-item>
                <!-- drop-shadow -->
                <el-form-item label="阴影效果(h)">
                    <el-input v-model="form.shadowH" type="number"  min="0">
                        <template slot="append">px</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="阴影效果(v)">
                    <el-input v-model="form.shadowV" type="number"  min="0">
                        <template slot="append">px</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="阴影效果(blur)">
                    <el-input v-model="form.shadowBlur" type="number"  min="0" >
                        <template slot="append">px</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="阴影效果(color )">
                    <el-color-picker
                          v-model="form.shadowColor"
                         ></el-color-picker>
                </el-form-item>
                <!--  end-->
                <el-form-item label="灰度(%)">
                    <el-slider v-model="form.grayscale"></el-slider>
                </el-form-item>
                <el-form-item label="色相旋转(deg)">
                    <el-input v-model="form.hueRotate" type="number"   min="0" max="360"><template slot="append">deg</template></el-input>
                </el-form-item>
                <el-form-item label="反转输入图像(%)">
                    <el-slider v-model="form.invert"></el-slider>
                </el-form-item>
                <el-form-item label="饱和度(%)">
                    <el-slider v-model="form.saturate"></el-slider>
                </el-form-item>
                <el-form-item label="深褐色(%)">
                    <el-slider v-model="form.sepia"></el-slider>
                </el-form-item>
                <el-form-item label="透明程度(%)">
                    <el-slider v-model="form.opacity"></el-slider>
                </el-form-item>
  
          </el-card>
      </el-form-item>
    </el-form>
  </div>

Vue-data 初始化

    data() {
        return {
          map: null,
          canvas: null,
          form:{
            blur:0,
            brightness:100,
            shadowH:0,
            shadowV:0,
            shadowBlur:0,

            shadowColor:'#fff',
            contrast:100,
            grayscale:0,
            hueRotate:0,
            invert:0,
            saturate:100,
            sepia:0,
            opacity:100,
          }
        };
      },

地图初始化、获取canvas、初始化filter

  mounted() {
    let map = new Map({
      // 设置地图图层
      layers: [gaodeMapLayer],
      // 设置显示地图的视图
      view: new View({
        center: transform([104.065735, 30.659462], "EPSG:4326", "EPSG:3857"),
        zoom: 9,
        minZoom: 1,
        maxZoom: 21,
        rotation: 0,
      }),
      // 让id为map的div作为地图的容器
      target: "mapFlter",
      interactions: defaultInteractions({
        doubleClickZoom: false, // 取消双击放大功能交互
      }),
    });
    this.map = map;
    gaodeMapLayer.on("prerender", (ev) => {
      this.getParameters(ev, map);
    });
  },
   methods: {
    getMixFilter(){
        let {blur,brightness,shadowH,shadowV,shadowBlur,shadowColor,contrast,grayscale,hueRotate,invert,saturate,sepia,opacity}=this.form;
       return  `drop-shadow(${shadowH}px ${shadowV}px ${shadowBlur}px ${shadowColor}) invert(${invert}%) brightness(${brightness}%) contrast(${contrast}%) grayscale(${grayscale}%) opacity(${opacity}%) saturate(${saturate}%) sepia(${sepia}%) hue-rotate(${hueRotate}deg)`
    },
    upFilter() {
        let {canvas,map}=this
        canvas.filter = this.getMixFilter();
        canvas.save();
        map.render()
    },
    getParameters(evt, map) {
      this.canvas = evt.context;
      evt.context.filter =this.getMixFilter() ;//设置滤镜值
      evt.context.save();
    },
  },

vue-watch 监听form变化

  watch: {
    "form":{
        deep:true,
        handler (){
            this.upFilter()
        }
    }
  },