openlayers WebGL 切片图层样式修改（曝光度、对比度、饱和度、明暗度、颜色）

本篇介绍一下使用 openlayers WebGL 切片图层样式修改（曝光度、对比度、饱和度、明暗度、颜色）

1 需求

WebGL 切片图层样式修改（曝光度、对比度、饱和度、明暗度、颜色）

2 分析

WebGLTile 的 style 属性修改
ol/expr/expression 的简单使用官网解释

WebGLTile 的 style 有以下属性：

属性	说明
variables	样式变量对象，可使用 updateStyleVariables 方法动态修改
color	颜色（直接设置会覆盖切片内容）
brightness	明暗度
contrast	对比度
exposure	曝光度
saturation	饱和度
gamma	伽马矫正

一般步骤：

定义样式变量对象
使用 ExpressionValue 为 style 各个属性赋值
改变样式变量对象中的属性并调用 updateStyleVariables 方法（传入最新的各个属性值）

3 实现

3.1 动态修改颜色及其他属性

javascript 复制代码

<template>
  <div id="map" class="map"></div>
  <div class="toolbar">
    <div>
      <div>
        <span>颜色</span>
        <el-color-picker
          v-model="color"
          color-format="rgb"
          show-alpha
          size="small"
          @active-change="handleColorChange"
        />
      </div>
      <div>
        <span>伽马矫正</span>
        <el-slider v-model="gamma" :min="0" :step="0.1" @input="handleInput"></el-slider>
      </div>
    </div>
    <div>
      <div>
        <span>曝光度</span>
        <el-slider
          v-model="exposure"
          :min="-1"
          :max="1"
          :step="0.1"
          @input="handleInput"
        ></el-slider>
      </div>
      <div>
        <span>对比度</span>
        <el-slider
          v-model="contrast"
          :min="-1"
          :max="1"
          :step="0.1"
          @input="handleInput"
        ></el-slider>
      </div>
    </div>
    <div>
      <div>
        <span>饱和度</span>
        <el-slider
          v-model="saturation"
          :min="-1"
          :max="1"
          :step="0.1"
          @input="handleInput"
        ></el-slider>
      </div>
      <div>
        <span>明暗度</span>
        <el-slider
          v-model="brightness"
          :min="-1"
          :max="1"
          :step="0.1"
          @input="handleInput"
        ></el-slider>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Map, View } from 'ol';
import { asArray } from 'ol/color';
import { WebGLTile as WebGLTileLayer } from 'ol/layer';
import { get } from 'ol/proj';
import { XYZ } from 'ol/source';

const projection = get('EPSG:4326');
const key = '替换为天地图key';
const layerTypeMap = {
  vector: ['vec', 'cva'], // [矢量底图, 矢量注记]
  image: ['img', 'cia'], // [影像底图, 影像注记]
  terrain: ['ter', 'cta'] // [地形晕渲, 地形注记]
};
const color = ref('rgba(79, 31, 128,1)');
const exposure = ref(0);
const contrast = ref(0);
const saturation = ref(0);
const brightness = ref(0);
const gamma = ref(1);

const variables = computed(() => ({
  exposure: exposure.value,
  contrast: contrast.value,
  saturation: saturation.value,
  brightness: brightness.value,
  gamma: gamma.value,
  red: asArray(color.value)[0],
  green: asArray(color.value)[1],
  blue: asArray(color.value)[2],
  alpha: asArray(color.value)[3]
}));

let map = null;
const imageLayer = new WebGLTileLayer({
  style: {
    exposure: ['var', 'exposure'], //从样式变量对象中获取exposure
    contrast: ['var', 'contrast'], //从样式变量对象中获取contrast
    saturation: ['var', 'saturation'],
    brightness: ['var', 'brightness'],
    gamma: ['var', 'gamma'],
    color: ['color', ['var', 'red'], ['var', 'green'], ['var', 'blue'], ['var', 'alpha']],
    variables: variables.value
  },
  source: new XYZ({
    url: `https://t{0-7}.tianditu.gov.cn/DataServer?T=${layerTypeMap['image'][0]}_c&tk=${key}&x={x}&y={y}&l={z}`,
    projection
  })
});

onMounted(() => {
  initMap('image');
});

const initMap = (layerType = 'image') => {
  // c: 经纬度 w: 墨卡托
  const matrixSet = 'c';
  map = new Map({
    target: 'map',
    layers: [
      // 底图
      imageLayer,
      // 注记
      new WebGLTileLayer({
        source: new XYZ({
          url: `https://t{0-7}.tianditu.gov.cn/DataServer?T=${layerTypeMap[layerType][1]}_${matrixSet}&tk=${key}&x={x}&y={y}&l={z}`,
          projection
        })
      })
    ],
    view: new View({
      center: [116.406393, 39.909006],
      projection: projection,
      zoom: 5,
      maxZoom: 17,
      minZoom: 1
    })
  });
};

const handleInput = () => {
  imageLayer.updateStyleVariables(variables.value);
};

const handleColorChange = val => {
  if(val){
    color.value = val;
    handleInput();
  }

};
</script>
<style scoped lang="scss">
.map {
  width: 100%;
  height: 100%;
}
.toolbar {
  position: absolute;
  top: 20px;
  left: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  .el-slider {
    margin-right: 10px;
    margin-left: 10px;
  }
  div {
    width: 200px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      width: 120px;
      margin-left:10px;
    }
  }
}
</style>

可以看到，卫星影像是被设置的颜色覆盖掉的

3.2 仅动态修改其他属性（显示卫星影像切片）

当取消颜色自定义时，也就是注释掉下面一行代码

css 复制代码

color: ['color', ['var', 'red'], ['var', 'green'], ['var', 'blue'], ['var', 'alpha']],

3.3 动态修改颜色及其他属性（显示卫星影像切片）

如果想显示出卫星影响切片，还要自定义颜色，有两种方法：

在WebGLTile的style的color属性上使用ExpressionValue

将style中的color修改如下，则只会选择出红色通道

javacript 复制代码

 color: [
      'color',
      ['*',['band', 1], 255],
      0,
      0,
      1
    ],

将style中的color修改如下，则只会选择出红色通道，并且r>=128的r=255;r<128的r=0

javacript 复制代码

 color: [
      'color',
      ['*', ['case', ['<', ['band', 1], 0.5], 0, ['>=', ['band', 1], 0.5], 1, 1], 255],
      0,
      0,
      1
    ],

在source上绑定tileLoadFunction(之前的文章介绍过)

关键代码：

javascript 复制代码

const handleTileLoadFunction=(imageTile: any, src: string) => {
  // 该函数默认为imageTile.getImage().src = src;
  // 以下为自定义
  let img = new Image();
  img.setAttribute('crossOrigin', 'Anonymous');
  img.src = src;
  img.onload = () => {
    let canvas = document.createElement('canvas');
    let w = img.width;
    let h = img.height;
    canvas.width = w;
    canvas.height = h;
    let context = canvas.getContext('2d');
    // 使用过滤器整体改变像素
    context!.filter = 'hue-rotate(100deg)';
    context?.drawImage(img, 0, 0, w, h, 0, 0, w, h);
    const imageData = context!.getImageData(0, 0, canvas.width, canvas.height);
    const pixelData = imageData?.data ?? [];
    // 遍历每个切片上的像素进行自定义
		// pixelData 为数组 是[r,g,b,a]的循环结构
    for (let i = 0; i < pixelData.length; i++) {
      // pixelData[i * 4 + 0] r 通道;
      // pixelData[i * 4 + 1] g 通道;
      // pixelData[i * 4 + 2] b 通道;
      // pixelData[i * 4 + 3] a 通道;
    }
    context!.putImageData(imageData, 0, 0, 0, 0, canvas.width, canvas.height);
    imageTile.getImage().src = canvas.toDataURL('image/png');
  };

};


new XYZ({
    url: `https://t{0-7}.tianditu.gov.cn/DataServer?T=${layerTypeMap['image'][0]}_c&tk=${key}&x={x}&y={y}&l={z}`,
    projection,
    tileLoadFunction:handleTileLoadFunction
  })