openlayers给地图添加颜色

效果图：

实现代码

1.在创造图层实例的时候给图层添加一个类名

function getLayer(layerName, layerType) {
    return new Promise((resolve, reject) => {
        try {
            // 创建 TileLayer 图层实例
            const layer = new TileLayer({
                source: new XYZ({
                    // 天地图 WMTS 服务的 URL
                    url: `http://t0.tianditu.gov.cn/${layerName}/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=${layerType}&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${key.value}`,
                }),
                className: layerName,  // 给图层设置类名
            });

            if (layer) {
                resolve(layer);
            } else {
                reject(new Error('获取图层失败'));
            }
        } catch (error) {
            // 捕获任何异常并拒绝 Promise，返回错误信息
            reject(new Error(`创建图层时发生错误: ${error.message}`));
        }
    });
}

2.当地图渲染完成时，给指定的元素添加滤镜效果

const map = ref(null)
const mapCenter = ref([114.42742665908969, 23.127858267967294])
const mapZoom = ref(15) // 默认缩放级别
async function initMap() {
    // 判断是否已经存在地图实例，如果存在则销毁
    if (map.value) {
        map.value.setTarget(undefined); // 解除当前地图实例的 target，确保 DOM 元素不会被重复使用
        map.value = null; // 将 map 实例置为空，以便后续创建新地图实例
    }
    //根据给定的图层名称和类型，获取相应的图层
    const layer1 = await getLayer('img_w', 'img');//影像底图 - 经纬度投影
    const layer2 = await getLayer('vec_w', 'vec');//影像底图 - 经纬度投影
    const layer3 = await getLayer('cva_w', 'cva'); // 矢量注记 -	球面墨卡托投影
    // 渲染地图视图
    map.value = new Map({
        target: 'map', // 地图将绑定到 HTML 元素 id 为 'map' 的 DOM 元素
        layers: [layer2, layer3], // 添加三层异步获取的图层到地图上
        view: new View({
            center: fromLonLat(mapCenter.value), // 将经纬度转换为地图投影坐标系，设置地图中心点
            zoom: mapZoom.value, // 设置初始缩放等级，
            maxZoom: 18, // 设置地图最大缩放等级为 18，防止缩放过大 天地图最大就是18再大就不会显示地图
            projection: 'EPSG:3857' // 地图的投影坐标系，
        })
    });
    // 监听地图的渲染完成事件 整个图层
    map.value.once("rendercomplete", () => {
        console.log('地图渲染完成');
        // 添加滤镜到背景图层
        document.querySelector(".vec_w canvas").style.filter =
            "brightness(0.88) contrast(1.22) grayscale(0) hue-rotate(380deg) opacity(1) saturate(1.1) sepia(0.94) invert(0.9)";
        document.querySelector(".cva_w canvas").style.filter =
            "brightness(0.7) contrast(2) grayscale(5) hue-rotate(360deg) opacity(1) saturate(1.8) sepia(0.94) invert(1)";
    });

}

缺陷：

当地图还未完全加载出来时，到加载完成后会有一个颜色变化，影响用户体验感，