Cesium 自定义深色(各种颜色)地图特效

Cesium 自定义深色(各种颜色)地图特效,

简介

通过对UrlTemplateImageryProvider 的 requestImage 方法进行重写使用css实现样式滤镜，实现了对瓦片图像的实时处理功能。

功能特点

XYZ 瓦片图层加载
实时图像后处理
可配置的地图层级范围
蓝色主题滤镜效果
图像垂直翻转功能
动态控制图像处理效果

安装和导入

typescript 复制代码

import { createCustomXYZImageryProvider } from './CustomXYZImagery';

使用方法

基本用法

typescript 复制代码

// 创建自定义 XYZ 图层提供器
const customProvider = createCustomXYZImageryProvider({
// 这里暂时使用高德的图层
  url: 'https://webst01.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}'
});

// 将图层添加到 Cesium Viewer
viewer.imageryLayers.addImageryProvider(customProvider);

配置参数

参数	类型	描述
url	string	XYZ 瓦片服务 URL 模板，支持 `{x}`, `{y}`, `{z}` 占位符

默认配置

minimumLevel: 3 (最小缩放级别)
maximumLevel: 18 (最大缩放级别)

图像处理功能

插件内置了图像处理函数 myImageProcessor，实现以下效果：

蓝色主题滤镜

使用 CSS 滤镜组合实现蓝色主题效果：

css 复制代码

grayscale(98%) invert(87%) sepia(25%) hue-rotate(182deg) saturate(1314%) brightness(89%) contrast(104%)

滤镜参数说明：

grayscale(98%): 将图像转为灰度图像，98% 表示只有 2% 的彩色保留
invert(87%): 将图像进行反色处理
sepia(25%): 添加 25% 的深褐色（复古风格）
hue-rotate(182deg): 对图像进行色相旋转 182 度
saturate(1314%): 增加图像的饱和度到原来的 13 倍
brightness(89%): 调整图像亮度到原来的 0.89 倍
contrast(104%): 调整图像对比度到原来的 1.04 倍

图像翻转

通过以下代码实现图像垂直翻转：

typescript 复制代码

ctx.scale(1, -1);
ctx.drawImage(image, 0, -h); // 注意 y 坐标要调整为负值

自定义配置

调整层级范围

在 Cesium.UrlTemplateImageryProvider 配置中修改：

typescript 复制代码

const provider = new Cesium.UrlTemplateImageryProvider({
  url: url,
  minimumLevel: 0,   // 调整最小层级
  maximumLevel: 20,  // 调整最大层级
});

修改滤镜效果

在 myImageProcessor 函数中修改 ctx.filter 值：

typescript 复制代码

ctx.filter = "grayscale(100%)"; // 灰度滤镜示例

控制图像翻转

启用/禁用图像翻转功能：

typescript 复制代码

// 启用翻转（默认启用）
ctx.scale(1, -1);
ctx.drawImage(image, 0, -h);

// 禁用翻转（注释或删除上述代码）
ctx.drawImage(image, 0, 0);

工作原理

基于 Cesium.UrlTemplateImageryProvider 创建基础图层提供器
重写 requestImage 方法拦截图像加载过程
对加载的每张瓦片图像应用自定义处理
返回处理后的图像数据供 Cesium 渲染使用

注意事项

图像处理会增加性能开销，建议在必要时使用
确保 XYZ 瓦片服务 URL 格式正确，包含 {x}, {y}, {z} 占位符
根据实际需求调整最小/最大缩放级别参数
滤镜效果可能影响地图可读性，请根据实际场景调整
图像翻转功能可能影响地图方向，请根据需要启用或禁用

源代码在下面

arduino 复制代码

import * as Cesium from "cesium";

 

// 1. 定义自定义的XYZ ImageryProvider
export function createCustomXYZImageryProvider(options: { url: string }) {
  const { url } = options;
  // 通常基于UrlTemplateImageryProvider
  const provider = new Cesium.UrlTemplateImageryProvider({
    url: url,
    // 其他配置如tileWidth, tileHeight, maximumLevel等
    minimumLevel: 3,
    maximumLevel: 18,
  });

  // 保存原始方法
  const originalRequestImage = provider.requestImage.bind(provider);

  // 重写requestImage方法
  provider.requestImage = function (x, y, level, request) {
    const res = originalRequestImage(x, y, level, request);
    if (!res) {
      return res;
    }
    // 首先请求原始图像
    return res.then(function (image) {
      // ctx.drawImage(image, 0, 0);

      // 调用外部传入的图像处理函数
      const processedCanvas = myImageProcessor(image);
      console.log(1);
      // 返回处理后的Canvas或ImageData
      return processedCanvas || image;
    });
  };

  return provider;
}

// 2. 图像处理函数示例
function myImageProcessor(image: Cesium.ImageryTypes) {
  // 将图像绘制到Canvas上进行处理
  const canvas = document.createElement("canvas");
  const h = image.height;
  canvas.width = image.width;
  canvas.height = h;
  const ctx = canvas.getContext("2d");
  if (!ctx) {
    return image;
  }

  // 可以自己通过逻辑控制动态控制
  /*
    代码释义：
    grayscale(98%): 将图像转为灰度图像，参数值表示转换的程度，98% 表示只有2%的彩色保留。

    invert(100%): 将图像进行反色处理，使颜色变为相反的形式。

    sepia(20%): 将图像转为深褐色（复古风格），参数值表示转换的程度，20% 表示20%的褐色添加到图像中。

    hue-rotate(180deg): 对图像进行色相旋转，参数值表示旋转的角度，180deg 表示顺时针旋转180度。

    saturate(1600%): 增加图像的饱和度，参数值表示增加的程度，1600% 表示饱和度增加到原来的16倍。

    brightness(80%): 调整图像的亮度，参数值表示调整的程度，80% 表示亮度增加到原来的0.8倍。

    contrast(90%): 调整图像的对比度，参数值表示调整的程度，90% 表示对比度增加到原来的0.9倍。*/
  // 蓝色主题
  ctx.filter =
    "grayscale(98%) invert(87%) sepia(25%) hue-rotate(182deg) saturate(1314%) brightness(89%) contrast(104%)";
  // 将图片翻转
  ctx.scale(1, -1);
  ctx.drawImage(image, 0, -h); // 注意 y 坐标要调整为负值
  // context.translate(-canvas.width, 0);
  // ctx.drawImage(image, 0, 0, w, h, 0, 0, w, h);
  // ctx.drawImage(image, 0, 0);

  return canvas; // 返回处理后的canvas
}