leaflet切片变色、地图滤镜逻辑实现 colorfilter

且白2026-05-31 10:48

下载leaflet插件 colorfilter

地址需魔法：Leaflet.TileLayer.ColorFilter

1.x版本的源码放这了

javascript 复制代码

/*!
  Leaflet.TileLayer.ColorFilter
  (c) 2018-2025, Claudio T. Kawakani
  A simple and lightweight Leaflet plugin to apply CSS filters on map tiles.
  https://github.com/xtk93x/Leaflet.TileLayer.ColorFilter
*/
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(require("leaflet")):"function"==typeof define&&define.amd?define(["leaflet"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).L)}(this,function(t){"use strict";const e=t.TileLayer.prototype.onAdd;t.TileLayer.include({_colorFilter:function(){let t=["blur:px","brightness:%","bright:brightness:%","bri:brightness:%","contrast:%","con:contrast:%","grayscale:%","gray:grayscale:%","hue-rotate:deg","hue:hue-rotate:deg","hue-rotation:hue-rotate:deg","invert:%","inv:invert:%","opacity:%","op:opacity:%","saturate:%","saturation:saturate:%","sat:saturate:%","sepia:%","sep:sepia:%"];return(this.options.colorFilter?this.options.colorFilter:[]).map(e=>{let i=e.toLowerCase().split(":");if(2===i.length){let e=t.find(t=>t.split(":")[0]===i[0]);if(e)return e=e.split(":"),i[1]+=/^\d+$/.test(i[1])?e[e.length-1]:"",`${e[e.length-2]}(${i[1]})`}return""}).join(" ")},updateColorFilter:function(t){this.options.colorFilter=t,this._container&&(this._container.style.filter=this._colorFilter())},onAdd:function(t){e.call(this,t),this.options.colorFilter&&(this._container.style.filter=this._colorFilter())}})});

使用

javascript 复制代码

let myFilter = [
    "blur: 0px", //应用以像素为单位的高斯模糊过滤
    "brightness: 100%", //控制平铺图像的亮度
    "contrast: 100%", //更改磁贴的颜色对比度
    "grayscale: 0%", //将图块的颜色更改为灰度
    "hue: 90deg", //在平铺颜色上应用以度为单位的色相旋转
    "opacity: 100%", //定义平铺的不透明度
    "invert: 80%", //反转平铺颜色
    "saturate: 100%", //使平铺颜色饱和
    "sepia: 10%" //将平铺颜色转换为棕褐色
];
const tileOptions = {
    tileSize: 256,
    opacity: 1,
    zIndex: 5,
    minZoom: defaultZoom.minZoom,
    maxZoom: defaultZoom.maxZoom,
    // 重点
    colorFilter: myFilter
};
tileLayer = L.tileLayer(tileUrl, tileOptions).addTo(map);