openlayers6改变底图颜色为暗色系

迷路时你就往前走i

于 2024-07-01 15:39:02 发布

阅读量105

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/weixin_45803033/article/details/140102694

版权

import TileLayer from "ol/layer/Tile"; // 瓦片图层类
import XYZ from "ol/source/XYZ"; // XYZ格式的切片数据，继承于TileImage

const layer = new TileLayer({
    source: new XYZ({
        url: 在线地图url,
        crossOrigin: "anonymous",
        tileLoadFunction: function(imageTile, src) {
            // 使用滤镜 将白色修改为深色
            const img = new Image();
            // img.crossOrigin = ''
            // 设置图片不从缓存取，从缓存取可能会出现跨域，导致加载失败
            img.setAttribute("crossOrigin", "anonymous");
            img.onload = function() {
                const canvas = document.createElement("canvas");
                const w = img.width;
                const h = img.height;
                canvas.width = w;
                canvas.height = h;
                const context = canvas.getContext("2d");
                context.filter = "grayscale(98%) invert(100%) sepia(20%) hue-rotate(180deg) saturate(1600%) brightness(80%) contrast(90%)";
                context.drawImage(img, 0, 0, w, h, 0, 0, w, h);
                imageTile.getImage().src = canvas.toDataURL("image/png");
            };
            img.src = src;
        }
    }),
    visible: true
});
map.addLayer(layer);