/* * @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, tabIndex: 0, // 保留添加实体图层的变量 addEntitys: null, entitysData: [], // 用来存储区域名称 globalRegionName: null, // 用来区域得最大最小经纬度 currentDrawing: [], // 存储新增点,线,面,数据的地方 polygonData: [], polygonFlag: false, editToolbar: null, addPolygonEntitys: null, //是否选中电子围栏区域 isChecked: false, //当前处警员是否已有电子围栏 isEngineer: false, //当前处警员是否有位置信息 isPosition: true, // 用来记录巡逻区域或者巡逻路线的下标的 patrolIndex: 0, // 拖拽 isDown: false, x: 0, y: 0, offset: null, moveThis: null, //基础路径 pathUrl: "http://localhost:89", //pathUrl:"https://web.byisf.com/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.entityPolygonAll = new GraphicsLayer({ id: 'entityPolygonAll' }); this._map.addLayer(this.addEntitys); this._map.addLayer(this.addPolygonEntitys); this._map.addLayer(this.entityPolygonAll); }, startup: function() { objThis._map.addLayer(objThis._siteLayer); var that = this; //删除电子围栏点击事件 $(".mapBtn .delete").click(function() { //需选中电子围栏,然后进行删除 if (that.isChecked) { that.addPolygonEntitys.clear(); //删除数据库数据 //更新电子围栏数据 $.ajax({ url: that.pathUrl + '/enclosure/enclosure/deleteByAnumber', type: 'POST', dataType: 'JSON', data: { anumber: anumber }, success: function(result) { if (result.code == 200) {} } }) //修改围栏状态 that.isEngineer = false; } else { layui.use('layer', function() { layui.layer.msg('请先选中需要删除的电子围栏'); }) } }) //新增电子围栏 $('.mapBtn .insert').click(function() { if (that.isPosition) { if (that.isEngineer) { layui.use('layer', function() { layui.layer.msg('已存在电子围栏'); }) } else { layui.use('layer', function() { layui.layer.msg('请开始划分电子围栏'); }) that.polygonFlag = true; } } else { 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.polygonFlag = true; that.newElectronicFenceId = anumber; } } } }) } else { //当前处警员没有位置信息,则默认定位到市中心位置 that.isPosition = false; var lgtd1 = '115.862321'; var lttd1 = '28.591108'; //所在位置标记 that.addPoint(that.addEntitys, lgtd1, lttd1, './images/security.png'); } //调用点击事件 that.clickHand(); //鼠标右击事件 document.getElementById('mainMapWidget').onmousedown = function(event) { 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); 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) {} } }) } //修改电子围栏数据状态 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() } } } // 提示信息 $(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); } if (self.polygonFlag == true) { $('.securityMapTips').stop().show(); if (self.polygonData.length == 0) { $('.securityMapTips').text('单击左键开始绘制。'); } else { if (e.clientY > ($(window).height() - 98)) { y = ($(window).height() - 88); } $('.securityMapTips').text('单击左键新增加点。单击右键完成绘制。'); } $('.securityMapTips').css({ 'top': y, 'left': x, }) } else { $('.securityMapTips').stop().hide(); } }) }, //新增线 addPolyline: function(entitys, path) { entitys.clear(); var polylineSymbol = new SimpleLineSymbol(); polylineSymbol.color = [255, 0, 0, 1]; polylineSymbol.width = 4; 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) {} } }) } }, activateToolbar: function(graphic) { 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) { 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; });