公司项目有个需求是要在百度地图上设置电子围栏，电子围栏很简单嘛，就是一个覆盖物就能搞定了，然而UI又在搞事情，设计的效果图中电子围栏外卖填充颜色，电子围栏内不填充颜色。
最后我还是写出了这个效果，浅浅的复盘一下：

狗狗太可爱了给他用电子围栏描个边边

我是怎么做到的呢，我使用的还是百度地图的CanvasLayer:

然后利用canvas绘图的一个特性：
绘制路径的时候，如果两个路径的方向不一致，就会出现挖空的效果，所以就让外面罩住屏幕的大框是顺时针，电子围栏的路径是逆时针。

至于怎么判断是顺时针还是逆时针，写在另一篇文章里 判断路径是顺时针还是逆时针

实现

实现大致就这样几个步骤：

1. 以顺时针定义外部矩形的路径，我使用了zrender作为绘图库
   
2. 计算电子围栏的路径是顺时针还是逆时针，如果是顺时针就将路径的点翻转一下成为逆时针拼接在矩形路径后

需要注意的是，我们在计算路径是否顺时针的时候，是用经纬度去计算，然后再用百度地图的api将经纬度转换为实际屏幕像素位置拼接在矩形路径后面。

zr = null

var canvasLayer = new BMap.CanvasLayer({
   
    update: function () {
   
        if (!zr) {
   
            zr = zrender.init(this.canvas); //初始化zrender
        }
        const canvasWidth = zr.getWidth()
        const canvasHeight = zr.getHeight()
        zr.clear() //先清空之前画的
        zr.resize()

        // 这是外部大框的路径，这个大框实际尺寸超出canvas
        let pathString = `M -10,-10 L ${
     canvasWidth + 10},-10 L ${
     canvasWidth + 10} ${
     canvasHeight + 10