百度地图围栏

效果图

 map = new BMap.Map("electronic_fence", {
                enableMapClick: false
            })
            // 去除百度地图的地名
            // map.setMapStyle({
            //     styleJson: style
            // });
            // 地图中心坐标
            map.centerAndZoom(new BMap.Point(116.307852, 40.057031), 16); //设置中心点坐标和地图级别
            // 添加地图控件 控制显示地图右上角只显示地图与卫星
            map.addControl(new BMap.MapTypeControl({
                mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP]
            }));
            //    开启鼠标滚轮事件
            map.enableScrollWheelZoom(true);
            map.addEventListener('dblclick', function (e) {

           
                var point = e.point
                for (var j = 0; j < overlays.length; j++) {
                    var overlayss = overlays[j].getPath();
                }
               
                var flag = {}
                // 双击显示顶点信息
                for (var h = 0; h < overlayss.length; h++) {
                   
                    if (JSON.stringify(flag) == '{}') {
                        flag = overlayss[h]
                        
                    }
                    if (Math.abs(overlayss[h].lng - point.lng) < Math.abs(flag.lng - point.lng) && Math
                        .abs(overlayss[h].lat - point.lat) < Math.abs(flag.lat - point.lat)) {
                        flag = overlayss[h]
                       
                    }

                }
       
                if (states == 'enable') {
                    var opts = {
                        width: 200, // 信息窗口宽度
                        height: 100, // 信息窗口高度
                        title: "坐标信息", // 信息窗口标题
                        enableMessage: false, //设置允许信息窗发送短息
                    }
                    var infoWindow = new BMap.InfoWindow('当前坐标：</br> lng：' + flag.lng + '<br/>lat：' +
                        flag.lat,
                        opts); // 创建信息窗口对象 

                    map.openInfoWindow(infoWindow, point); //开启信息窗口

                }
                map.disableDoubleClickZoom()
            });


            map.enableContinuousZoom();
            //鼠标绘制完成回调方法   获取各个点的经纬度
            overlaycomplete = function (e) {
                overlays.push(e.overlay);
                if (e.drawingMode == 'marker') {
                    var path = e.overlay.point
                    mlnglat.push(new BMap.Point("lng:" + path.lng + ",lat:" + path.lat));
                } else {
                    var path = e.overlay.getPath(); //Array<Point> 返回多边型的点数组   
                    for (var i = 0; i < path.length; i++) {
                        mlnglat.push(new BMap.Point(path[i].lng, path[i].lat));
                    }
                }


            };
            // 开启面编辑按钮
            $('#openEdit').on('click', function () {
                Editing('enable')
                states = 'enable'
            })
            // 点击关闭面编辑按钮
            $('#closeEdit').on('click', function () {
                Editing('disable')
                states = 'disable'
            })
            // 点击提交区域信息按钮
            $('#getPoint').on('click', function () {
                Editing('disable')
                var data = getPoint()
                // console.log(window.sessionStorage.getItem('clearAll'));
                if (overlays.length == 0 && data.length == 0) {
                    if (window.sessionStorage.getItem('clearAll') == 'true') {
                        // console.log(data);
                        submitPost(data)
                        return
                    }
                    layer.msg("请先设置电子围栏！");
                    return
                } else {
                    if (data.length == 0) {
                        for (var i = 0; i < overlays.length; i++) {
                            mlnglat.push(new BMap.Point(overlays[i].lng,
                                overlays[i].lat));
                        }
                    }
                 
                   

                }
            })
            // 判断是否开启面编辑
            function Editing(state) {
                for (var i = 0; i < overlays.length; i++) {
                    state == 'enable' ? overlays[i].enableEditing() : overlays[i].disableEditing();
                }
            }
            // 获取点经纬度
            function getPoint() {
                if (overlays.length == 0) return []
                for (var i = 0; i < overlays.length; i++) {
                    overlay = overlays[i].getPath();
                }
                return overlay
            }
            
                        init_elec(workAreaList[l])
                 
          
            
            // 绘制区域图形
            function init_elec(res) {
                var bPoints = []
                var Enclosure = JSON.parse(res.list);
                if (Enclosure.length == 1) {
                    map.centerAndZoom(new BMap.Point(116.307852, 40.057031), 16);
                } else {
                    for (var i = 0; i < Enclosure
                        .length; i++) {
                        Enclosure[i] = new BMap.Point(
                            Enclosure[i].lng,
                            Enclosure[i]
                            .lat);
                        bPoints.push(Enclosure[i])
                    }
                    var styleOptions = {
                        strokeColor: "red",
                        //边线颜色。
                        fillColor: "red",
                        //填充颜色。当参数为空时，圆形将没有填充效果。
                        strokeWeight: 1,
                        //边线的宽度，以像素为单位。
                        strokeOpacity: 0.8,
                        //边线透明度，取值范围0 - 1。
                        fillOpacity: 0.3,
                        //填充的透明度，取值范围0 - 1。
                        strokeStyle: 'solid' //边线的样式，solid或dashed。
                    };

                    // console.log(Enclosure);
                    polygon = new BMap.Polygon(Enclosure,
                        styleOptions);
                    map.addOverlay(polygon);
                    overlays[0] = polygon
                    // };
                    // mlnglat = bPoints
                    setZoom(bPoints)

                }


            };
            // 设置地图中心
            function setZoom(bPoints) {
                var view = map.getViewport(eval(bPoints));
                var mapZoom = view.zoom;
                // console.log(mapZoom);
                centerPoint = view.center;
                map.centerAndZoom(centerPoint, mapZoom - 2);
            }
            // 围栏属性配置
            var styleOptions = {
                strokeColor: "red", //边线颜色。
                fillColor: "red", //填充颜色。当参数为空时，圆形将没有填充效果。
                strokeWeight: 1, //边线的宽度，以像素为单位。
                strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
                fillOpacity: 0.3, //填充的透明度，取值范围0 - 1。
                strokeStyle: 'solid' //边线的样式，solid或dashed。
            }
            //实例化鼠标绘制工具
            var drawingManager = new BMapLib.DrawingManager(map, {
                isOpen: false, //是否开启绘制模式
                enableDrawingTool: true, //是否显示工具栏
                drawingToolOptions: {
                    anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
                    offset: new BMap.Size(5, 5), //偏离值
                },
                polygonOptions: styleOptions, //多边形的样式
            });
            //添加鼠标绘制工具监听事件，用于获取绘制结果
            drawingManager.addEventListener('overlaycomplete', res => {
                if (res.drawingMode == 'marker') {
                    return
                }
                overlaycomplete(res)
            });
            // 清除围栏
            $('#NF-delete').on('click', function () {
                layer.confirm('你确定要清空全部围栏吗？', function () {
                    for (var i = 0; i < overlays.length; i++) {
                        map.removeOverlay(overlays[i]);
                    }
                    overlays.length = 0
                    mlnglat = []
                    if (typeof (polygon) != "undefined") {
                        map.removeOverlay(polygon);
                        map.centerAndZoom(new BMap.Point(116.307852, 40.057031),
                            16);
                    }
                    window.sessionStorage.setItem('clearAll', true)
                    layer.closeAll()
                })

            });