高德地图加遮罩灯光效果

概述：最近做大屏展示，UI突然有一个大胆的想法，他想把地图做成那种有点灯光照在上面的感觉，经过几番尝试后终于实现了相关效果，特此分享；

效果图

实现方式-css

/* 高德地图加载成功有一个amap-layers类名的标签，可以把遮罩赋给他
    问：为什么这么做？
    答：赋给它后添加marker会在遮罩之上;视觉上效果好一点;
*/
:global{
    .amap-layers{
        &::after{
            content: '';
            background: radial-gradient(ellipse at center, rgba(8, 112, 248, 0.18) 0%, rgba(8, 112, 248, 0.18) 10%, rgba(0, 30, 255, 0.1) 30%, rgba(0,0,0, 1) 100%);
            // 核心代码，设为none后鼠标事件会穿透，不影响拖动地图;
            pointer-events: none;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 0;
            filter: drop-shadow(0px 0px 20px rgba(255,255,255, .3));
        }
    }
}