| | |
| | | polygonFlag: false, |
| | | editToolbar: null, |
| | | addPolygonEntitys: null, |
| | | addLineEntitys: null, |
| | | |
| | | //是否选中电子围栏区域 |
| | | isChecked: false, |
| | |
| | | id: 'addPolygonEntitys' |
| | | }); |
| | | |
| | | |
| | | // 添加线的图层 |
| | | this.addLineEntitys = new GraphicsLayer({ |
| | | id: 'addLineEntitys' |
| | | }); |
| | | |
| | | // 添加所有图层的地方 |
| | | this.entityPolygonAll = new GraphicsLayer({ |
| | | id: 'entityPolygonAll' |
| | |
| | | |
| | | this._map.addLayer(this.addEntitys); |
| | | this._map.addLayer(this.addPolygonEntitys); |
| | | this._map.addLayer(this.addLineEntitys); |
| | | this._map.addLayer(this.entityPolygonAll); |
| | | |
| | | }, |
| | |
| | | //鼠标右击事件 |
| | | document.getElementById('mainMapWidget').onmousedown = function(event) { |
| | | //去除系统默认右键功能 |
| | | event.preventDefault(); |
| | | document.oncontextmenu = function() { |
| | | //alert("当前页面不能使用右键!"); |
| | | return false; |
| | | } |
| | | //event.preventDefault(); |
| | | if (event.button == 2) { |
| | | if (that.polygonFlag == true) { |
| | | // 勾画最后一个点 |
| | | var normalizedVal = webMercatorUtils.xyToLngLat(event.mapPoint.x, event.mapPoint.y); |
| | | that.polygonData.push([normalizedVal[0], normalizedVal[1]]); |
| | | // 声明空字符串,存储数据 |
| | | var dataStr = ''; |
| | | var data = null; |
| | | if (that.patrolIndex == 1) { |
| | | that.addPolyline(that.addPolygonEntitys, that.polygonData); |
| | | // 获取数据 |
| | | data = that.addPolygonEntitys.graphics[0].geometry.paths[0]; |
| | | } else { |
| | | that.addPolygon(that.addPolygonEntitys, that.polygonData); |
| | | // 获取数据 |
| | | data = that.addPolygonEntitys.graphics[0].geometry.rings[0]; |
| | | } |
| | | |
| | | // 组装数据 |
| | | for (var i = 0; i < data.length; i++) { |
| | | dataStr += (data[i][0] + ' ' + data[i][1] + ','); |
| | | } |
| | | dataStr = dataStr.substring(0, dataStr.length - 1); |
| | | |
| | | //将数据存入数据库 |
| | | $.ajax({ |
| | | url: that.pathUrl + '/enclosure/enclosure/insertes', |
| | | type: 'POST', |
| | | dataType: 'JSON', |
| | | data: { |
| | | aname: realname, |
| | | anumber: anumber, |
| | | routeInfo: dataStr |
| | | }, |
| | | success: function(result) { |
| | | if (result.code == 200) { |
| | | layui.use('layer', function() { |
| | | layui.layer.msg('新增电子围栏成功!') |
| | | }) |
| | | //清除点信息 |
| | | that.polygonData = []; |
| | | //新增按钮颜色改回 |
| | | $("#insertEngineeringMap").css("color", "#757575"); |
| | | } |
| | | if (that.polygonData.length >= 2) { |
| | | // 勾画最后一个点 |
| | | var normalizedVal = webMercatorUtils.xyToLngLat(event.mapPoint.x, event.mapPoint.y); |
| | | that.polygonData.push([normalizedVal[0], normalizedVal[1]]); |
| | | // 声明空字符串,存储数据 |
| | | var dataStr = ''; |
| | | var data = null; |
| | | if (that.patrolIndex == 1) { |
| | | that.addPolyline(that.addPolygonEntitys, that.polygonData); |
| | | // 获取数据 |
| | | data = that.addPolygonEntitys.graphics[0].geometry.paths[0]; |
| | | } else { |
| | | that.addPolygon(that.addPolygonEntitys, that.polygonData); |
| | | // 获取数据 |
| | | data = that.addPolygonEntitys.graphics[0].geometry.rings[0]; |
| | | } |
| | | }) |
| | | |
| | | // 组装数据 |
| | | for (var i = 0; i < data.length; i++) { |
| | | dataStr += (data[i][0] + ' ' + data[i][1] + ','); |
| | | } |
| | | dataStr = dataStr.substring(0, dataStr.length - 1); |
| | | |
| | | //将数据存入数据库 |
| | | $.ajax({ |
| | | url: that.pathUrl + '/enclosure/enclosure/insertes', |
| | | type: 'POST', |
| | | dataType: 'JSON', |
| | | data: { |
| | | aname: realname, |
| | | anumber: anumber, |
| | | routeInfo: dataStr |
| | | }, |
| | | success: function(result) { |
| | | if (result.code == 200) { |
| | | layui.use('layer', function() { |
| | | layui.layer.msg('新增电子围栏成功!') |
| | | }) |
| | | //清除点信息 |
| | | that.polygonData = []; |
| | | //新增按钮颜色改回 |
| | | $("#insertEngineeringMap").css("color", "#757575"); |
| | | //清空线图层信息 |
| | | that.addLineEntitys.clear(); |
| | | //修改电子围栏数据状态 |
| | | that.isEngineer = true; |
| | | //修改电子围栏选中状态 |
| | | that.isChecked = false; |
| | | //修改电子围栏编辑状态 |
| | | that.polygonFlag = false; |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | |
| | | } |
| | | //修改电子围栏数据状态 |
| | | that.isEngineer = true; |
| | | //修改电子围栏选中状态 |
| | | that.isChecked = false; |
| | | //修改电子围栏编辑状态 |
| | | that.polygonFlag = false; |
| | | |
| | | } |
| | | } |
| | | }, |
| | |
| | | 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', |
| | |
| | | x: evt.screenPoint.x, |
| | | y: evt.screenPoint.y, |
| | | }); |
| | | |
| | | |
| | | // 编辑中的 |
| | | if (self.polygonFlag == true) { |
| | |
| | | |
| | | } |
| | | |
| | | // 提示信息 |
| | | // 鼠标移动监听事件 |
| | | $(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'); |
| | |
| | | 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'; |
| | | } |
| | | |
| | | //编辑电子围栏提示语 |
| | | if (that.editToolbarStatus) { |
| | | $("#securityMapTips4").css("width", "200px"); |
| | | $("#securityMapTips4").css("height", "36"); |
| | | $("#securityMapTips4").css("width", "220px"); |
| | | $("#securityMapTips4").css("height", "40px"); |
| | | $("#securityMapTips4").css("line-height", "20px"); |
| | | $("#securityMapTips4 span").css("line-height", "20px"); |
| | | var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; |
| | | var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; |
| | | oDiv4.style.left = oEvent.clientX + scrollLeft + 15 + 'px'; |
| | |
| | | }) |
| | | }, |
| | | |
| | | //新增线 |
| | | /** |
| | | * 新增线图层 |
| | | * @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": { |