四十七、openlayers官网示例Image Filters——给地图添加锐化、浮雕、边缘等滤镜效果

 官网demo示例：

Image Filters

这篇讲的是如何给地图添加滤镜。

一看代码，，好家伙，信息量满满，全都看不懂。。。

咱只能一段一段扒。。。

首先添加一个底图到地图上，这个好理解。

    const imagery = new TileLayer({
      source: new OGCMapTile({
        url: "https://maps.gnosis.earth/ogcapi/collections/NaturalEarth:raster:HYP_HR_SR_OB_DR/map/tiles/WebMercatorQuad",
        crossOrigin: "",
      }),
    });
    const map = new Map({
      layers: [imagery],
      target: "map",
      view: new View({
        center: fromLonLat([-120, 50]),
        zoom: 6,
      }),
    });

 新建一个对象定义了一组卷积核。

    const kernels = {
      none: [0, 0, 0, 0, 1, 0, 0, 0, 0], //无
      sharpen: [0, -1, 0, -1, 5, -1, 0, -1, 0], //锐化滤波器
      sharpenless: [0, -1, 0, -1, 10, -1, 0, -1, 0], //增强图像的边缘和细节，但比 sharpen 更强烈。
      blur: [1, 1, 1, 1, 1, 1, 1, 1, 1], //平滑滤波器，通过对邻域像素值求平均来模糊图像
      shadow: [1, 2, 1, 0, 1, 0, -1, -2, -1], //阴影滤波器
      emboss: [-2, 1, 0, -1, 1, 1, 0, 1, 2], //浮雕滤波器
      edge: [0, 1, 0, 1, -4, 1, 0, 1, 0], //边缘检测滤波器
    };

 等等，啥叫卷积核？

卷积操作是一种通过一个卷积核矩阵（kernel）来滤波图像的技术，它可以实现各种图像效果，比如锐化、模糊、阴影、浮雕和边缘检测等。

 

 啥叫卷积核矩阵？

卷积核是一个 3x3 的矩阵，每个元素代表像素在滤波时的权重。卷积操作通过将这个卷积核在图像上滑动，将核矩阵与图像中的每个 3x3 区域逐个相乘，然后求和，生成新的像素值。

例如，对于 sharpen 卷积核：

0  -1  0
-1  5 -1
 0 -1  0

这个卷积核在图像上滑动时，会增强中心像素值（乘以 5）并减弱周围像素值（乘以 -1）。通过这种方式，不同的卷积核可以实现各种图像处理效果，如锐化、模糊、浮雕等。 

卷积核进行归一化处理函数：

function normalize(kernel) {
      // 获取卷积核的长度
      const len = kernel.length;
      // 创建一个与卷积核相同长度的新数组
      const normal = new Array(len);
      let i,
        sum = 0;
      // 计算卷积核中所有元素的总和
      for (i = 0; i < len; ++i) {
        sum += kernel[i];
      }
      // 如果总和小于等于0，设置sum为1并标记为未归一化
      if (sum <= 0) {
        normal.normalized = false;
        sum = 1;
      } else {
        // 如果总和大于0，标记为已归一化
        normal.normalized = true;
      }
      // 将卷积核中的每个元素除以总和，得到归一化后的值
      for (i = 0; i < len; ++i) {
        normal[i] = kernel[i] / sum;
      }
      // 返回归一化后的卷积核
      return normal;
    }

将卷积核中的每个元素除以总和 sum，以确保所有元素的总和为1。这样可以保证在卷积操作过程中，图像的整体亮度不会改变 。

<