南昌市物联网技防平台-前端
liuyg
2021-04-24 886ae93d02bf5350a67c84a7701f13f517801506
public/map/widgets/securityMap/SecurityMap.js
@@ -142,6 +142,9 @@
        //当前处警员是否已有电子围栏
        isEngineer: false,
        //是否可编辑
        isEdit: false,
        // 用来记录巡逻区域或者巡逻路线的下标的
        patrolIndex: 0,
@@ -151,6 +154,9 @@
        y: 0,
        offset: null,
        moveThis: null,
        //编辑工具激活后为true
        editToolbarStatus: false,
        //基础路径
        //pathUrl: "http://localhost:89",
@@ -196,7 +202,13 @@
            var that = this;
            //删除电子围栏点击事件
            $(".mapBtn .delete").click(function() {
            $(".mapBtn .delBtn").click(function() {
                if (!that.isEngineer) {
                    layui.use('layer', function() {
                        layui.layer.msg('请先新增电子围栏信息!')
                    })
                    return;
                }
                //需选中电子围栏,然后进行删除
                layer.confirm('是否确认删除', {
                    btn: ['确定', '取消'], //按钮
@@ -225,17 +237,39 @@
            })
            //新增电子围栏
            $('.mapBtn .insert').click(function() {
            $('.mapBtn .insBtn').click(function() {
                //修改按钮样式
                $("#insertEngineeringMap").css("color", "#3385FF")
                    //判断
                if (that.isEngineer) {
                    layui.use('layer', function() {
                        layui.layer.msg('已存在电子围栏');
                    })
                            layui.layer.msg('已存在电子围栏');
                        })
                        //新增按钮颜色改回
                    $("#insertEngineeringMap").css("color", "#757575");
                } else {
                    layui.use('layer', function() {
                        layui.layer.msg('请开始划分电子围栏');
                    })
                    that.polygonFlag = true;
                }
            })
            //编辑电子围栏
            $('.mapBtn .editBtn').click(function() {
                if (!that.isEngineer) {
                    layui.use('layer', function() {
                        layui.layer.msg('请先新增电子围栏信息!')
                    })
                    return;
                }
                $("#editEngineeringMap").css("color", "#3385FF");
                //修改为可编辑状态
                that.isEdit = true;
                layui.use('layer', function() {
                    layui.layer.msg('点击电子围栏图形即可编辑');
                })
            })
        },
@@ -307,13 +341,9 @@
            //鼠标右击事件
            document.getElementById('mainMapWidget').onmousedown = function(event) {
                //去除系统默认右键功能
                event.preventDefault();
                if (event.button == 2) {
                    if (that.polygonData.length < 2) {
                        layui.use('layer', function() {
                            layui.layer.msg('不能形成区域,请继续划分!!!')
                        })
                        return;
                    }
                    if (that.polygonFlag == true) {
                        // 勾画最后一个点
                        var normalizedVal = webMercatorUtils.xyToLngLat(event.mapPoint.x, event.mapPoint.y);
@@ -350,8 +380,12 @@
                            success: function(result) {
                                if (result.code == 200) {
                                    layui.use('layer', function() {
                                        layui.layer.msg('新增电子围栏成功!')
                                    })
                                            layui.layer.msg('新增电子围栏成功!')
                                        })
                                        //清除点信息
                                    that.polygonData = [];
                                    //新增按钮颜色改回
                                    $("#insertEngineeringMap").css("color", "#757575");
                                }
                            }
                        })
@@ -404,58 +438,75 @@
                        that.isChecked = true;
                        self.modifyPolygon();
                        //self.modifyPolygon();
                        self.activateToolbar(evt.graphic);
                        //进入编辑状态
                        //self.activateToolbar(evt.graphic);
                    } else { // 点击不在图形上
                        //修改电子围栏选中状态
                        that.isChecked = false;
                        self.modifyPolygon()
                    }
                    if (that.isEdit) {
                        that.isChecked = true;
                        self.modifyPolygon();
                        //进入编辑状态
                        self.activateToolbar(evt.graphic);
                    }
                }
            }
            // 提示信息
            $(document).off('mousemove').mousemove(function(e) {
                var y = e.clientY + 10;
                var x = e.clientX + 20;
                if (e.clientX < 40) {
                    var x = 40;
                }
                if (e.clientY < 42) {
                    y = 42;
                }
                if (e.clientY > ($(window).height() - 82)) {
                    y = ($(window).height() - 66);
                }
                if (e.clientX > ($(window).width() - 184)) {
                    x = ($(window).width() - 184);
                }
            $(document).off('mousemove').mousemove(function(ev) {
                var oEvent = ev || event;
                //鼠标移动
                var oDiv1 = document.getElementById('securityMapTips1');
                var oDiv2 = document.getElementById('securityMapTips2');
                var oDiv3 = document.getElementById('securityMapTips3');
                var oDiv4 = document.getElementById('securityMapTips4');
                //新增电子围栏提示语
                if (self.polygonFlag == true) {
                    $('.securityMapTips').stop().show();
                    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
                    if (self.polygonData.length == 0) {
                        $('.securityMapTips').text('单击左键开始绘制。');
                    } else {
                        if (e.clientY > ($(window).height() - 98)) {
                            y = ($(window).height() - 88);
                        }
                        $('.securityMapTips').text('单击左键新增加点。单击右键完成绘制。');
                        oDiv1.style.left = oEvent.clientX + scrollLeft + 15 + 'px';
                        oDiv1.style.top = oEvent.clientY + scrollTop + 'px';
                        oDiv1.style.display = 'block';
                    }
                    $('.securityMapTips').css({
                        'top': y,
                        'left': x,
                    })
                    if (self.polygonData.length == 1) {
                        oDiv1.style.display = 'none';
                        oDiv2.style.left = oEvent.clientX + scrollLeft + 15 + 'px';
                        oDiv2.style.top = oEvent.clientY + scrollTop + 'px';
                        oDiv2.style.display = 'block';
                    }
                    if (self.polygonData.length > 1) {
                        oDiv2.style.display = 'none';
                        oDiv3.style.left = oEvent.clientX + scrollLeft + 15 + 'px';
                        oDiv3.style.top = oEvent.clientY + scrollTop + 'px';
                        oDiv3.style.display = 'block';
                    }
                } else {
                    $('.securityMapTips').stop().hide();
                    oDiv3.style.display = 'none';
                }
                //编辑电子围栏提示语
                if (that.editToolbarStatus) {
                    $("#securityMapTips4").css("width", "200px");
                    $("#securityMapTips4").css("height", "36");
                    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
                    oDiv4.style.left = oEvent.clientX + scrollLeft + 15 + 'px';
                    oDiv4.style.top = oEvent.clientY + scrollTop + 'px';
                    oDiv4.style.display = 'block';
                } else {
                    oDiv4.style.display = 'none';
                }
            })
        },
@@ -510,18 +561,29 @@
                        routeInfo: dataStr
                    },
                    success: function(result) {
                        if (result.code == 200) {}
                        if (result.code == 200) {
                            layui.use('layer', function() {
                                layui.layer.msg('电子围栏修改成功!');
                            })
                            $("#editEngineeringMap").css("color", "#757575");
                            $("#securityMapTips4").css("display", "none");
                            self.isEdit = false;
                            self.editToolbarStatus = false;
                        }
                    }
                })
            }
        },
        activateToolbar: function(graphic) {
            var that = this;
            that.editToolbarStatus = true;
            var tool = 0;
            this.editToolbar = new Edit(this._map);
            // if (registry.byId("tool_move").checked) {
            tool = tool | Edit.MOVE;
@@ -566,7 +628,11 @@
        //在地图上新增点
        addPoint: function(entitys, lgtd, lttd, img) {
            var symbol = new esri.symbol.PictureMarkerSymbol(img, 22, 22);
            if (img == undefined) {
                var symbol = new esri.symbol.PictureMarkerSymbol('./images/point.png', 22, 22);
            } else {
                var symbol = new esri.symbol.PictureMarkerSymbol(img, 22, 22);
            }
            var pt = new Point(lgtd, lttd, new SpatialReference({
                wkid: 4326
            }));
@@ -574,6 +640,7 @@
            entitys.add(graphic);
        },
        //绘制多边形
        addPolygon: function(entitys, rings) {
            entitys.clear();