echarts-extension-leaflet
Version:
echarts extension for leaflet
95 lines (85 loc) • 3.86 kB
JavaScript
// 来源这里： https://gitee.com/qwswqwe/leaflet-user-define-theme
// 对应的文章在这里：https://blog.csdn.net/qq_58771242/article/details/132981229
// 用于修改图层的颜色，如果在options中有color选项，则会使用该颜色来对图片的颜色做反转
// 有了这个思路之后，如果以后需要对瓦片做什么特殊处理，比如叠加显示一个特定的文本，也是可以的
/*
* @Author: zb
* @Date: 2023-09-18 16:23:04
* @LastEditTime: 2023-09-18 16:23:15
* @FilePath: \yangtze-outlet-web2\src\pages\BigScreenHome\DesingMap\index.ts
* @页面功能: 加载自定义颜色的地图底图
*/
import L from "leaflet/src/Leaflet";
class DesignTileLayer extends L.TileLayer {
createTile(coords, done) {
const { color } = this.options;
if(!color){
return super.createTile(coords, done)
}
/**获取外部接受的颜色*/
console.warn("createTile", this.options);
console.warn("createTile color", color);
// 创建一个用于绘图的 <canvas> 元素
var tile = L.DomUtil.create("canvas", "leaflet-tile");
// 根据选项设置瓦片的宽度和高度
var size = this.getTileSize();
tile.width = size.x;
tile.height = size.y;
// 获得一个 canvas 上下文，并使用 coords.x、coords.y 和 coords.z 在上面画东西
var ctx = tile.getContext("2d");
// 使用传入的 URL 模板替换变量
var url = this.getTileUrl(coords);
// 创建一个图像对象来加载瓦片
var img = new Image();
// 解决跨域的问题，https://blog.csdn.net/leftfist/article/details/106947101
img.setAttribute("crossOrigin", "");
// 以下是TileLayer的createTile方法内对于跨域的处理，可以考虑参考下
// https://github.com/Leaflet/Leaflet/blob/21d27856f2e314d267ea6120363eb60660bae123/src/layer/tile/TileLayer.js#L145
// if (this.options.crossOrigin || this.options.crossOrigin === "") {
// tile.crossOrigin =
// this.options.crossOrigin === true ? "" : this.options.crossOrigin;
// }
// // for this new option we follow the documented behavior
// // more closely by only setting the property when string
// if (typeof this.options.referrerPolicy === "string") {
// tile.referrerPolicy = this.options.referrerPolicy;
// }
img.src = url; // 替换为你的图片路径
// 当图片加载完成后，绘制到 Canvas 上
img.onload = ()=> {
// 绘制图片到 Canvas 上
console.warn("img onLoad", tile.width, tile.height);
ctx.drawImage(img, 0, 0, tile.width, tile.height);
// 获取图像的像素数据
var imageData = ctx.getImageData(0, 0, tile.width, tile.height);
if (color) {
// 获取原来的图片的像素颜色
var pixels = imageData.data;
for (let i = 0; i < pixels.length; i += 4) {
const r = pixels[i],
g = pixels[i + 1],
b = pixels[i + 2],
a = pixels[i + 3];
//计算灰度
var grayVal = (r + g + b) / 3;
//灰度反转--会使图片整体变成灰色--方便上色
grayVal = 255 - grayVal;
//将灰度替换掉原始的颜色
pixels[i] = grayVal + color.r;
pixels[i + 1] = grayVal + color.g;
pixels[i + 2] = grayVal + color.b;
//设置一个前景透明度，以便和背景混合
if (color.a) {
pixels[i + 3] = a * color.a;
}
}
}
// 将修改后的像素数据放回 Canvas
ctx.putImageData(imageData, 0, 0);
this._tileOnLoad(done, img);
};
// 返回瓦片，以便在屏幕上呈现
return tile;
}
}
export default DesignTileLayer;