mtk内阴影-polong

#### 背景地图可视化项目中往往有要求进行内阴影的需求，但是对于可视化能力比较弱的giser来说,这个没有现成的方案，一般都会说进行ui切图然后进行贴图就行，但是这样对于动态生成的场景就不太满足，本文基于canvas进行动态绘制内阴影。 #### 原理内阴影的原理主要是用的canvas的shadowBlur和globalCompositeOperation 属性，shadowBlur让它整体有模糊的效果,globalCompositeOperation为'source-out'在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。另外高亮区域使用的是canvas的裁剪。
#### 方案一使用maptalks原生api,这里只要设置一下symbol和layer
``` mtk内阴影-polong

``` 展示效果 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6dfe9c51107a49529b1d9ff2163a5207~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1920&h=911&s=699940&e=png&b=0f0f0f) #### 方案二本方案比较复杂且只支持二维还不支持每个层级重绘，通过绘制图形到canvas上导出base64在贴到图层上，要确定能缩放到图形整体，这样才能使用地图的api转换(目前支持单面)，首先将图形的点转为屏幕坐标（小技巧是要减去最小经纬度的屏幕坐标，这样绘制的图片会小一点），绘制图形，设置shadowblur和globalCompositeOperation（'source-out'），绘制完图形之后通过imageLayer就行了 ``` 瓦片图层与地理投影 - 百度投影底图

Export image

``` #### 效果 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1d6aab698b8149dabd3d5435f47eeb0f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1777&h=902&s=527882&e=png&b=101010) #### 结论看结果都知道方案一简单很多，不过我是通过做方案二时候才想出来方案一，两个方案各有优略，方案二可以自定义生成贴图用于不同的底图api,方案一非常简单适合新手。 #### 参考资料：
[w3chool canvas globalcompositeoperation参考](https://www.w3school.com.cn/tags/canvas_globalcompositeoperation.asp)
[canvas可视化效果之内阴影效果](https://www.jianshu.com/p/b13a5bf2c7d1)
[canvas内阴影?](https://zhuanlan.zhihu.com/p/627756577)