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);