如何在Leaflet图像叠加层中替换指定颜色的所有像素

背景 #

• 图像信息：约8000×4000像素的色块图，局部示例：
  
• 已通过Leaflet加载图像，代码如下：

var map = L.map('map', {
    crs: L.CRS.Simple,
    minZoom: -2
});

var bounds = [[0,0], [3616,8192]];

var provinces = L.imageOverlay(
    'myimage.png', 
    bounds, 
    {opacity: 0.7}
).addTo(map);

• 颜色映射表：需要将表中指定颜色的像素替换为对应目标颜色：

var colour_mapping = {'#4287f5':'#42f5ef', '#a3911c':'#de3510', ...}

问题 #

已知通过Canvas修改特定像素颜色的方法，但不清楚如何在Leaflet中最优实现该需求。

实现方案 #

方案1：预处理图像后加载（适合静态替换） #

提前将图像处理完成，再作为ImageOverlay加载到Leaflet，适合不需要动态修改颜色的场景：

// 工具函数：十六进制颜色转RGB数组
function hexToRgb(hex) {
    const r = parseInt(hex.slice(1, 3), 16);
    const g = parseInt(hex.slice(3, 5), 16);
    const b = parseInt(hex.slice(5, 7), 16);
    return [r, g, b];
}

// 图像预处理函数，返回处理后的Data URL
function processImage(src, colourMap) {
    return new Promise((resolve) => {
        const img = new Image();
        img.crossOrigin = 'anonymous'; // 跨域图像需设置
        img.onload = () => {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
            
            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            const data = imageData.data;
            
            // 转换颜色映射表为RGB键值对，提升匹配效率
            const rgbMap = {};
            Object.keys(colourMap).forEach(hex => {
                const rgb = hexToRgb(hex);
                rgbMap[rgb.join(',')] = hexToRgb(colourMap[hex]);
            });
            
            // 遍历像素替换颜色
            for (let i = 0; i < data.length; i += 4) {
                const key = `${data[i]},${data[i+1]},${data[i+2]}`;
                if (rgbMap[key]) {
                    const [newR, newG, newB] = rgbMap[key];
                    data[i] = newR;
                    data[i+1] = newG;
                    data[i+2] = newB;
                }
            }
            
            ctx.putImageData(imageData, 0, 0);
            resolve(canvas.toDataURL());
        };
        img.src = src;
    });
}

// 加载处理后的图像到Leaflet
processImage('myimage.png', colour_mapping).then(processedSrc => {
    L.imageOverlay(processedSrc, bounds, {opacity: 0.7}).addTo(map);
});

方案2：自定义Leaflet图层（支持动态修改颜色） #

如果需要后续动态调整颜色映射，可自定义图层继承ImageOverlay，重绘时处理颜色：

// 自定义颜色替换图层
L.CustomColorOverlay = L.ImageOverlay.extend({
    initialize: function(src, bounds, options) {
        L.ImageOverlay.prototype.initialize.call(this, src, bounds, options);
        this._colourMap = options.colourMap || {};
    },
    
    // 动态更新颜色映射表并重绘
    setColourMap: function(newMap) {
        this._colourMap = newMap;
        this.redraw();
    },
    
    _draw: function() {
        if (!this._image) return;
        
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = this._image.width;
        canvas.height = this._image.height;
        ctx.drawImage(this._image, 0, 0);
        
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data;
        
        // 颜色映射转换
        const rgbMap = {};
        Object.keys(this._colourMap).forEach(hex => {
            const rgb = hexToRgb(hex);
            rgbMap[rgb.join(',')] = hexToRgb(this._colourMap[hex]);
        });
        
        // 像素替换逻辑
        for (let i = 0; i < data.length; i += 4) {
            const key = `${data[i]},${data[i+1]},${data[i+2]}`;
            if (rgbMap[key]) {
                const [newR, newG, newB] = rgbMap[key];
                data[i] = newR;
                data[i+1] = newG;
                data[i+2] = newB;
            }
        }
        
        ctx.putImageData(imageData, 0, 0);
        this._image.src = canvas.toDataURL();
        L.ImageOverlay.prototype._draw.call(this);
    }
});

// 工具函数：十六进制转RGB
function hexToRgb(hex) {
    const r = parseInt(hex.slice(1, 3), 16);
    const g = parseInt(hex.slice(3, 5), 16);
    const b = parseInt(hex.slice(5, 7), 16);
    return [r, g, b];
}

// 初始化自定义图层
const customOverlay = new L.CustomColorOverlay('myimage.png', bounds, {
    opacity: 0.7,
    colourMap: colour_mapping
}).addTo(map);

// 后续动态修改颜色示例
// customOverlay.setColourMap({'#4287f5':'#ff0000', '#a3911c':'#00ff00'});

关键注意事项 #

• 跨域处理：若图像来自外部域名，需确保服务器配置CORS，同时设置img.crossOrigin = 'anonymous'
• 性能优化：8000×4000的大尺寸图像处理可能阻塞主线程，建议将像素替换逻辑放在Web Worker中执行
• 内存占用：预处理方案生成的Data URL可能占用较多内存，若图像过大可考虑分片处理

内容的提问来源于stack exchange，提问作者Josh Kidd