/* * @Description: * @Version: 1.0 * @Author: yangsx * @Date: 2019-12-09 19:01:40 * @LastEditors: yangsx * @LastEditTime: 2019-12-14 14:44:57 */ define([ "dojo", "dojo/_base/declare", "dojo/_base/lang", "base/BaseWidget", "dojo/text!widgets/securityMap/template.html", "base/AppEvent", "base/ConfigData", "widgets/securityMap/config", "dojo/dom", "dojo/dom-construct", "dojo/dom-attr", "dojo/dom-style", "dojo/on", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/FeatureLayer", "controls/tab/TabControl", "esri/dijit/SymbolStyler", "esri/styles/basic", "dojo/_base/array", "esri/InfoTemplate", "esri/tasks/query", "esri/tasks/QueryTask", "esri/Color", "esri/toolbars/edit", "esri/graphic", "esri/geometry/Point", "esri/geometry/Polyline", "esri/geometry/Polygon", "esri/geometry/Extent", "esri/tasks/FeatureSet", "esri/renderers/HeatmapRenderer", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/symbols/PictureMarkerSymbol", "esri/symbols/SimpleMarkerSymbol", "esri/SpatialReference", "esri/tasks/GeometryService", "esri/tasks/ProjectParameters", "esri/layers/GraphicsLayer", "esri/layers/LabelLayer", "esri/symbols/TextSymbol", "esri/renderers/SimpleRenderer", "esri/renderers/ClassBreaksRenderer", "esri/tasks/Geoprocessor", "esri/tasks/DataFile", "esri/geometry/webMercatorUtils", "esri/symbols/Font", "esri/geometry/ScreenPoint", "esri/layers/ImageParameters", "esri/geometry/geometryEngine", "esri/dijit/PopupTemplate", "widgets/securityMap/FlareClusterLayer_v3", "dojo/domReady!" ], function( dojo, declare, lang, BaseWidget, template, AppEvent, ConfigData, config, dom, domConstruct, domAttr, domStyle, on, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, FeatureLayer, TabControl, SymbolStyler, basic, arrayUtils, InfoTemplate, Query, QueryTask, Color, Edit, Graphic, Point, Polyline, Polygon, Extent, FeatureSet, HeatmapRenderer, SimpleLineSymbol, SimpleFillSymbol, PictureMarkerSymbol, SimpleMarkerSymbol, SpatialReference, GeometryService, ProjectParameters, GraphicsLayer, LabelLayer, TextSymbol, SimpleRenderer, ClassBreaksRenderer, Geoprocessor, DataFile, webMercatorUtils, Font, ScreenPoint, ImageParameters, geometryEngine, PopupTemplate, FlareClusterLayer ) { var Widget = declare([BaseWidget], { widgetName: "SecurityMap", label: "处警队伍管理", templateString: template, _map: null, objThis: null, _siteLayer: new GraphicsLayer(), layuiLayer: null, layuiLadate: null, // 保留添加实体图层的变量 addEntitys: null, entitysData: [], // 存储新增点,线,面,数据的地方 polygonData: [], polygonFlag: false, editToolbar: null, addPolygonEntitys: null, addLineEntitys: null, //是否选中电子围栏区域 isChecked: false, //当前处警员是否已有电子围栏 isEngineer: false, //是否可编辑 isEdit: false, // 用来记录巡逻区域或者巡逻路线的下标的 patrolIndex: 0, // 拖拽 isDown: false, x: 0, y: 0, offset: null, moveThis: null, //编辑工具激活后为true editToolbarStatus: false, //基础路径 //pathUrl: "http://localhost:89", pathUrl: "http://61.131.136.25:2082/api/blade-jfpts", // 电子围栏需要新增的Id newElectronicFenceId: null, // 新增路线时,派发人员,人员名称,以及人员id anumber: null, realname: null, //存放聚合实体 clusterLayer: null, constructor: function(options, srcRefNode) { this._map = options.map; objThis = this; //创建图层 this.addEntitys = new GraphicsLayer({ id: 'addEntitys' }); // 添加点面线的图层 this.addPolygonEntitys = new GraphicsLayer({ 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); }, startup: function() { objThis._map.addLayer(objThis._siteLayer); var that = this; //删除电子围栏点击事件 $(".mapBtn .delBtn").click(function() { if (!that.isEngineer) { layui.use('layer', function() { layui.layer.msg('请先新增电子围栏信息!') }) return; } //需选中电子围栏,然后进行删除 layer.confirm('是否确认删除', { btn: ['确定', '取消'], //按钮 title: false }, function() { //删除数据库数据 $.ajax({ url: that.pathUrl + '/enclosure/enclosure/deleteByAnumber', type: 'POST', dataType: 'JSON', data: { anumber: anumber }, success: function(result) { if (result.code == 200) { layui.use('layer', function() { layui.layer.msg('删除电子围栏成功!') }) } } }) that.addPolygonEntitys.clear(); //修改围栏状态 that.isEngineer = false; }) }) //新增电子围栏 $('.mapBtn .insBtn').click(function() { //修改按钮样式 $("#insertEngineeringMap").css("color", "#3385FF") //判断 if (that.isEngineer) { layui.use('layer', function() { 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('点击电子围栏图形即可编辑'); }) }) }, //根据key 取value值 getQueryStringByKey: function(key) { return (document.location.search.match(new RegExp("(?:^\\?|&)" + key + "=(.*?)(?=&|$)")) || ['', null])[1]; }, //带有中文的解码 getQueryString: function(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return decodeURI(r[2]); return null; }, //页面打开后,获取参数数据 open: function() { var that = this; //获取父页面传过来的参数 var lgtd = that.getQueryStringByKey('jd'); var lttd = that.getQueryStringByKey('wd'); anumber = that.getQueryStringByKey('code'); realname = that.getQueryString('name'); //如果处警员的位置信息存在 if (lgtd != null && lgtd != "") { //所在位置标记 that.addPoint(that.addEntitys, lgtd, lttd, './images/security.png'); } //获取当前处警员的电子围栏信息 $.ajax({ url: this.pathUrl + '/enclosure/enclosure/selectEnclosureDetail', type: 'GET', dataType: 'JSON', data: { anumber: anumber }, success: function(result) { //如果已有电子围栏信息,展示出围栏区域,并且可以编辑 if (result.code == 200) { if (JSON.stringify(result.data) != "{}") { var entityArr = []; var coordinate = result.data.coordinate.match(/\(([^)]*)\)/).toString(); var a = coordinate.indexOf("("); var b = coordinate.indexOf(")"); coordinate = coordinate.substring(a + 1, b) + ""; if (coordinate && coordinate != '') { coordinate = coordinate.split(','); for (var i = 0; i < coordinate.length; i++) { entityArr.push([Number(coordinate[i].split(' ')[0]), Number(coordinate[i].split(' ')[1])]); } } that.isEngineer = true; that.addPolygon(that.addPolygonEntitys, entityArr); } else { //如果无电子围栏信息,则提示请编辑电子围栏信息 //编辑好电子围栏信息后,将当前处警员的电子围栏信息保存到数据库 that.newElectronicFenceId = null; that.newElectronicFenceId = anumber; } } } }) //调用点击事件 that.clickHand(); //鼠标右击事件 document.getElementById('mainMapWidget').onmousedown = function(event) { //去除系统默认右键功能 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]]); // 声明空字符串,存储数据 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; } } }) } } } } }, // 鼠标点击事件 clickHand: function() { var that = this; 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', type: "point", x: evt.screenPoint.x, y: evt.screenPoint.y, }); // 编辑中的 if (self.polygonFlag == true) { if (self.polygonData.length == 0) { self.polygonData.push([normalizedVal[0], normalizedVal[1]]); self.addPoint(self.addPolygonEntitys, normalizedVal[0], normalizedVal[1]); } else if (self.polygonData.length == 1) { self.polygonData.push([normalizedVal[0], normalizedVal[1]]); self.addPolyline(self.addPolygonEntitys, self.polygonData); return; } else if (self.polygonData.length > 1) { self.polygonData.push([normalizedVal[0], normalizedVal[1]]); self.addPolygon(self.addPolygonEntitys, self.polygonData); } } else { // 不在编辑中 if (evt.graphic) { // 点击在图形上 // 保存当前点击得图形 // self.currentDrawing = evt.graphic; that.isChecked = true; //self.modifyPolygon(); //进入编辑状态 //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(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) { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; if (self.polygonData.length == 0) { oDiv1.style.left = oEvent.clientX + scrollLeft + 15 + 'px'; oDiv1.style.top = oEvent.clientY + scrollTop + 'px'; oDiv1.style.display = 'block'; } 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'; } //已经有一个点或以上 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", "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'; oDiv4.style.top = oEvent.clientY + scrollTop + 'px'; oDiv4.style.display = 'block'; } else { oDiv4.style.display = 'none'; } }) }, /** * 新增线图层 * @param {*} entitys addPolygonEntitys * @param {*} path 坐标点的数据 */ addPolyline: function(entitys, path) { entitys.clear(); var polylineSymbol = new SimpleLineSymbol(); polylineSymbol.color = [255, 0, 0, 1]; 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": { "wkid": 4326 } }); entitys.add(new Graphic(polyline, polylineSymbol)); }, //编辑电子围栏(多边形) modifyPolygon: function() { var self = this; if (self.editToolbar != null) { //获取当前的多边形数据 var polygon = self.editToolbar.getCurrentState(); //释放编辑后 self.editToolbar.deactivate(); self.editToolbar = null; // 声明空字符串,存储数据 var dataStr = ''; // 获取数据 var data = polygon.graphic.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: this.pathUrl + '/enclosure/enclosure/updatee', type: 'POST', dataType: 'JSON', data: { anumber: anumber, routeInfo: dataStr }, success: function(result) { 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; // } // if (registry.byId("tool_vertices").checked) { tool = tool | Edit.EDIT_VERTICES; // } // if (registry.byId("tool_scale").checked) { tool = tool | Edit.SCALE; // } // if (registry.byId("tool_rotate").checked) { tool = tool | Edit.ROTATE; // } // enable text editing if a graphic uses a text symbol // if ( graphic.symbol.declaredClass === "esri.symbol.TextSymbol" ) { tool = tool | Edit.EDIT_TEXT; // } var options = { allowAddVertices: true, allowDeleteVertices: true, uniformScaling: true }; this.editToolbar.activate(tool, graphic, options); }, close: function() {}, // 创建实体图层 createEntitys: function(entitys, entityContent, name, item, lgtd, lttd, outlineColors) { var symbol = new esri.symbol.PictureMarkerSymbol(outlineColors, 33, 48); symbol.name = name; var pt = new Point(lgtd, lttd, new esri.SpatialReference({ wkid: 4326 })); pt.entityData = item; var graphic = new esri.Graphic(pt, symbol); entitys.add(graphic); entityContent.push(item); }, //在地图上新增点 addPoint: function(entitys, lgtd, lttd, img) { 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 })); var graphic = new esri.Graphic(pt, symbol); entitys.add(graphic); }, //绘制多边形 addPolygon: function(entitys, rings) { entitys.clear(); var polygonSymbol = new SimpleFillSymbol(); polygonSymbol.color = [24, 255, 243, 0.411]; var polygon = new Polygon({ "rings": [rings], "spatialReference": { "wkid": 4326 } }); entitys.add(new Graphic(polygon, polygonSymbol)); } }); return Widget; });