新增画电子围栏时，跟随鼠标画线功能，修复地图中右键弹窗系统菜单bug

Administrator

2021-04-24 e6ba8937cee878ed932213d27b2e563b11620a8a

新增画电子围栏时，跟随鼠标画线功能，修复地图中右键弹窗系统菜单bug

 public/map/widgets/securityMap/SecurityMap.js

@@ -135,6 +135,7 @@
        polygonFlag: false,
        editToolbar: null,
        addPolygonEntitys: null,
        addLineEntitys: null,

        //是否选中电子围栏区域
        isChecked: false,
@@ -185,6 +186,12 @@
                id: 'addPolygonEntitys'
            });


            // 添加线的图层
            this.addLineEntitys = new GraphicsLayer({
                id: 'addLineEntitys'
            });

            // 添加所有图层的地方
            this.entityPolygonAll = new GraphicsLayer({
                id: 'entityPolygonAll'
@@ -193,6 +200,7 @@

            this._map.addLayer(this.addEntitys);
            this._map.addLayer(this.addPolygonEntitys);
            this._map.addLayer(this.addLineEntitys);
            this._map.addLayer(this.entityPolygonAll);

        },
@@ -342,9 +350,14 @@
            //鼠标右击事件
            document.getElementById('mainMapWidget').onmousedown = function(event) {
                //去除系统默认右键功能
                event.preventDefault();
                document.oncontextmenu = function() {
                        //alert("当前页面不能使用右键！");
                        return false;
                    }
                    //event.preventDefault();
                if (event.button == 2) {
                    if (that.polygonFlag == true) {
                        if (that.polygonData.length >= 2) {
                        // 勾画最后一个点
                        var normalizedVal = webMercatorUtils.xyToLngLat(event.mapPoint.x, event.mapPoint.y);
                        that.polygonData.push([normalizedVal[0], normalizedVal[1]]);
@@ -386,16 +399,21 @@
                                    that.polygonData = [];
                                    //新增按钮颜色改回
                                    $("#insertEngineeringMap").css("color", "#757575");
                                }
                            }
                        })
                    }
                                        //清空线图层信息
                                        that.addLineEntitys.clear();
                    //修改电子围栏数据状态
                    that.isEngineer = true;
                    //修改电子围栏选中状态
                    that.isChecked = false;
                    //修改电子围栏编辑状态
                    that.polygonFlag = false;
                                    }
                                }
                            })
                        }

                    }

                }
            }
        },
@@ -406,8 +424,10 @@
            var self = this;
            self._map.onClick = mapClick;


            //点击事件
            function mapClick(evt) {
                //坐标格式转换
                var normalizedVal = webMercatorUtils.xyToLngLat(evt.mapPoint.x, evt.mapPoint.y);
                var y = self._map.toMap({
                    spatialReference: '4326',
@@ -415,7 +435,6 @@
                    x: evt.screenPoint.x,
                    y: evt.screenPoint.y,
                });


                // 编辑中的
                if (self.polygonFlag == true) {
@@ -459,10 +478,10 @@

            }

            // 提示信息
            // 鼠标移动监听事件
            $(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');
@@ -490,6 +509,25 @@
                        oDiv3.style.top = oEvent.clientY + scrollTop + 'px';
                        oDiv3.style.display = 'block';
                    }

                    //已经有一个点或以上
                    if (self.polygonData.length >= 1) {
                        //鼠标移动，上个点和当前点之间画线
                        //临时的线数据
                        var tempLineData = [];
                        //鼠标当前点的数据
                        var normalizedVal = webMercatorUtils.xyToLngLat(oEvent.originalEvent.mapPoint.x, oEvent.originalEvent.mapPoint.y);
                        //获取面数据
                        var polygonArr = self.polygonData;
                        //上个点的数据
                        var prevPointArr = polygonArr[self.polygonData.length - 1];
                        //封装数据
                        tempLineData.push([prevPointArr[0], prevPointArr[1]]);
                        tempLineData.push([normalizedVal[0], normalizedVal[1]]);
                        console.log(tempLineData, 123);
                        //画线
                        self.addLine(self.addLineEntitys, tempLineData);
                    }
                } else {
                    oDiv3.style.display = 'none';
                }
@@ -510,12 +548,39 @@
            })
        },

        //新增线
        /**
         * 新增线图层
         * @param {*} entitys  addPolygonEntitys
         * @param {*} path  坐标点的数据
         */
        addPolyline: function(entitys, path) {
            entitys.clear();
            var polylineSymbol = new SimpleLineSymbol();
            polylineSymbol.color = [255, 0, 0, 1];
            polylineSymbol.width = 4;
            polylineSymbol.width = 2;
            var polyline = new Polyline({
                "paths": [path],
                "spatialReference": {
                    "wkid": 4326
                }
            });

            entitys.add(new Graphic(polyline, polylineSymbol));
        },


        /**
         * 新增线图层
         * @param {*} entitys  addLineEntitys
         * @param {*} path  坐标点的数据
         */
        addLine: function(entitys, path) {
            entitys.clear();
            var polylineSymbol = new SimpleLineSymbol();
            //var polylineSymbol = new SimpleMarkerSymbol();
            polylineSymbol.color = [255, 0, 0, 1];
            polylineSymbol.width = 2;
            polylineSymbol.style = "short-dot";
            var polyline = new Polyline({
                "paths": [path],
                "spatialReference": {