百度地图API（三）电子围栏—地图点击事件创建多边形

百度地图API（四）电子围栏—DrawingManager

分析

电子围栏：顾名思义就是一个多边形，然后终端或者其他什么东西在这个围栏中，如果离开围栏则通知离开了围栏，而做这个电子围栏应该就是鼠标点击多个点然后形成一个多边形。所以我们可以拆分业务

1. 地图点击连线形成多边形
2. 点击保存不再点击连线并将最新的围栏数据传给后台
3. 点击创建重新创建电子围栏
4. 显示服务器保存的数据的围栏
5. 判定终端是否在围栏内部

下面是代码，分析都在注释里面了

class fence {
   constructor(props) {
       //传入map对象
       this.map = props;
       //点数据
       this.points = [];
       //绘制多边形用的数据
       this.bPoints = []
       //多边形
       this.polyLine;
       //因为使用addEventListener绑定的事件使用了bind,所以移除不了事件就定一个key吧
       this.canDraw;
   }
   add() {
       this.init()
   } //重新画图初始化
   init() {
       //注意this指向
       this.canDraw = true;
       this.points = []; //重新
       this.bPoints = [];
       this.remove()
       this.map.setDefaultCursor("crosshair");
       this.map.addEventListener("click", this.overlayerComplete.bind(this), false);
   }
   save() {
       this.map.setDefaultCursor("default");
       this.canDraw = false; //将数据传给后台--------- this.points
   }
   show(points) {
       points.forEach(element = > {
           let[lng, lat] = element;
           let Bpoint = new BMap.Point(lng, lat)
           this.bPoints.push(Bpoint) this.drawLine()
       });
   }
   overlayerComplete(e) {
       if (!this.canDraw) return;
       let[lng, lat] = [e.point.lng, e.point.lat];
       let point = [e.point.lng, e.point.lat];
       this.points.push(point) //添加进点中
       this.bPoints.push(Bpoint) //添加进画多边形
       //画线
       this.drawLine()
   }
   remove() { //删除电子围栏 多边形+
       var overLayers = this.map.getOverlays();
       for (var item of overLayers) {
           if (item.fence) {
               this.map.removeOverlay(item);
           }
       }
   }
   inFence(point) {
       let {
           lng,
           lat
       } = point;
       let Bpoint = new BMap.Point(lng, lat)
       let result = 3;
       if (_fence.polyLine) {
           result = BMapLib.GeoUtils.isPointInPolygon(Bpoint, _
           }
           return result;
           fence.polyLine) == true ? 1 : 2;
   }
   return result;
   }
}

使用

// 注册电子围栏画图
 _fence = new fence(map)
//显示电子围栏

function showFence() {
    var points = [
            [113.961565, 22.549194], [113.969255, 22.551998], [113.971339, 22.547659], [113.97195, 22.544588], [113.965338,
                22.544788], [113.961637, 22.549261]]
    _fence.show(points)
}
function addFence() {
    _fence.init()
}
function saveFence() {
    _fence.save()
} //测试是否在电子围栏中

function isOver() {
    var point = {
        lng: '113.969255',
        lat: '22.551998',
    }
    const result = _fence.inFence(point) let a = {
        1: () = > {
            layer.msg('终端在围栏中 ')
        },
        2: () = > {
            layer.msg('终端不在围栏中 ')
        },
        3: () = > {
            layer.msg('没有电子围栏')
        }
    }
    a[result]()
}