十六、openlayers官网示例Color Manipulation解析——加载RasterSource数据源调整HCL色彩值修改栅格图层颜色

挂网demo地址：​​​​​​​​​​​​​​

Color Manipulation

这个示例讲的是如何使用通过修改HCL（色相、色度、亮度）的值来更改地图的颜色。

首先定义一个初始的HCL颜色对象

colorObj: {
        hue: 0, //色相
        chroma: 100, //色度
        lightness: 100,//亮度
      }

加载一个RasterSource数据源，这个数据源中的Operation是RasterSource特定需要传的参数，而Operation这个函数里面用到的变量方法需要在lib中定义。

this.raster = new RasterSource({
      sources: [
        new StadiaMaps({
          layer: "stamen_watercolor",
        }),
      ],
      //对像素数据进行处理
      operation: function (pixels, data) {
        //将 RGB 像素值转换为 HCL（色相、色度、亮度）值。
        const hcl = rgb2hcl(pixels[0]);
        //根据 data.hue 调整色相值，并确保色相值在 0 到 2π 的范围内。
        let h = hcl[0] + (Math.PI * data.hue) / 180;
        if (h < 0) {
          h += twoPi;
        } else if (h > twoPi) {
          h -= twoPi;
        }
        hcl[0] = h;
        //调整色度（Chroma）和亮度（Lightness）：
        hcl[1] *= data.chroma / 100;
        hcl[2] *= data.lightness / 100;
        //将 HCL 转换回 RGB：
        return hcl2rgb(hcl);
      },
      //lib 是一个对象，用于包含在 operation 函数中使用的辅助函数和常量。
      lib: {
        rgb2hcl: rgb2hcl,
        hcl2rgb: hcl2rgb,
        rgb2xyz: rgb2xyz,
        lab2xyz: lab2xyz,
        xyz2lab: xyz2lab,
        xyz2rgb: xyz2rgb,
        Xn: Xn,
        Yn: Yn,
        Zn: Zn,
        t0: t0,
        t1: t1,
        t2: t2,
        t3: t3,
        twoPi: twoPi,
      },
    });