css滤镜--filter
使用场景1：
在接触到maptalks 地图的底图常常会有不同的图层设置风格滤镜。 图层的 cssFilter 属性可以用 css filter 来给图层设置风格滤镜。 对底层的baseLayer 设置cssFilter
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>瓦片图层与地理投影 - 底图风格滤镜</title>
<style type="text/css">
html,body{margin:0px;height:100%;width:100%}
.container{width:100%;height:100%}
</style>
<link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
<body>
<div id="map" class="container"></div>
<script>
var map = new maptalks.Map('map', {
center: [105.08052356963802, 36.04231948670001],
zoom: 5,
minZoom:1,
maxZoom:19,
baseLayer: new maptalks.TileLayer('base', {
urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
subdomains: ['a','b','c','d'],
attribution: '© <a href="http://osm.org">OpenStreetMap</a> contributors, © <a href="https://carto.com/">CARTO</a>',
// css filter
cssFilter : 'sepia(100%) invert(90%)'
})
});
</script>
</body>
</html>
注释：代码来源于maptalks官网：maptalks.org/examples/cn…
使用场景2：
在特定的时期需要对特定的颜色底色时，采用grayscale(1)的参数做内容输出。
filter: grayscale(1);
设置完成后就能达到应有的效果。
使用场景3：
需要指定一个长度值作为参数，表示要应用的模糊程度。模糊程度越大，图像就越模糊。便使用blur()函数 eg:blur(5px)/blur(5%)/blur(5rem)
.filter {
filter: blur(5px);
}
使用场景4：
调整图像的亮度,接受一个百分比值或者小数作为参数，用于指定亮度的级别 eg:brightness(120%)/brightness(1.2),大于1增加亮度，小于1 减少亮度
.filter {
filter: brightness(120%); /* 或者 filter: brightness(1.2); */
}
使用场景5：
调整图像的对比度,接受一个百分比值或者小数作为参数，用于指定亮度的级别 eg:contrast(120%)/contrast(1.2),大于1增加对比度，小于1 减少对比度
.filter {
filter:contrast(120%); /* 或者 filter:contrast(1.2); */
}
使用场景6：
图像添加阴影效果。它可以接受多个参数，包括阴影的颜色、偏移量、模糊度等。
.filter {
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
}
drop-shadow()函数的参数说明：
水平偏移量：阴影相对于元素的水平位移量。可以为负数，表示阴影向左偏移。 垂直偏移量：阴影相对于元素的垂直位移量。可以为负数，表示阴影向上偏移。 模糊半径：阴影模糊的半径大小。可以为0，表示完全不模糊。 阴影颜色：阴影的颜色。可以使用命名颜色、RGB值、十六进制颜色、HSL值等表示颜色的格式，也可以使用rgba()函数指定颜色和透明度。
使用场景7：
图像进行色相旋转。它接受一个角度值作为参数，用于指定旋转的角度。
.filter {
filter: hue-rotate(90deg);
}
使用场景8：
图像进行反色处理。它接受一个百分比值或者小数作为参数，用于指定反色的程度。
.filter {
filter: invert(50%); /* 或者 filter: invert(0.5); */
}
使用场景9：
调整元素的不透明度（透明度）。它接受一个百分比值或者小数作为参数，用于指定元素的透明度级别。
.filter {
filter: opacity(50%); /* 或者 filter: opacity(0.5); */
}
使用场景10：
调整图像的饱和度。它接受一个百分比值或者小数作为参数，用于指定饱和度的级别。
.filter {
filter: saturate(200%); /* 或者 filter: saturate(2); */
}
使用场景11：
图像转换为深褐色（复古）效果。它接受一个百分比值或者小数作为参数，用于指定sepia（褐色）效果的程度。
.filter {
filter: sepia(100%); /* 或者 filter: sepia(1); */
}
使用场景12：
多个滤镜函数的组合使用，以创建更复杂的效果。可以通过空格将多个函数链接在一起，它们的顺序会影响最终效果。
/*亮度增强和对比度增强的效果*/
.brightness-contrast {
filter: brightness(150%) contrast(150%);
}
/*模糊且半透明*/
.blur-opacity {
filter: blur(5px) opacity(50%);
}
/*灰度、褐色和饱和度增强的效果，使图像呈现出复古的灰色调*/
.grayscale-sepia-saturate {
filter: grayscale(100%) sepia(50%) saturate(200%);
}
总结：
- filter 过滤属性
① 模糊（blur）: 单位可为px或rem，值越大，越模糊
eg:filter:blur(3px)
filter:blur(0.3rem)
②亮度(brightness)： 值可为数字或百分数，小于1时，亮度更暗；等于1时，无变化；大于1时，亮度更亮
eg : filter:brightness(1.5)
filter:brightness(150%)
③对比度 (contrast)： 值可为数字或百分数，小于1时，对比度更低；等于1时，无变化；大于1时，对比度更高
eg:filter:contrast(0.7)
filter:contrast(70%)
④阴影 (drop-shadow): 四个属性分别为：offset-x（阴影左右偏移的位置） offset-y（阴影上下偏移的位置） blur-radius（阴影模糊范围） color（阴影颜色）
eg：filter:drop-shadow(-20px 10px 14px #c112d1)
⑤灰度 (grayscale)： 值可为数字或百分数，等于0时，无变化；等于1时，为全灰；小于0大于1时，灰度为中间值
eg:filter:grayscale(0.8)
filter:grayscale(80%)
⑥色调旋转(hue-rotate)： 单位为deg，值为0deg时，无变化，90deg=0.25turn，-90deg=270deg
eg:filter:hue-rotate(90deg)
filter:hue-rotate(0.25turn)
⑦反色(invert)： 值可为数字或百分数，等于0时，无变化；等于1时，完全反色
eg:filter:invert(0.6)
filter:invert(60%)
⑧透明度(opacity)： 值可为数字或百分数，等于0时，为透明；等于0.5时，半透明；等于1时，无变化
eg:filter:opacity(0.3)
filter:opacity(30%)
⑨饱和度(saturate)： 值可为数字或百分数，等于0时，无饱和度；等于0.5时，半饱和度；等于1时，无变化；大于1时，为更大饱和度
eg:filter:saturate(3)
filter:saturate(300%)
⑩褐度(sepia)： 值可为数字或百分数，等于0时，无变化；等于1时，为全褐；小于0大于1时，褐度为中间值
eg:filter:sepia(0.65)
filter:sepia(65%)
