/* * @Description: * @Version: 1.0 * @Author: yangsx * @Date: 2019-12-09 19:01:40 * @LastEditors: song * @LastEditTime: 2021-02-25 13:59:29 */ define([ "dojo", "dojo/_base/declare", "dojo/_base/lang", "base/BaseWidget", "dojo/text!widgets/SecurityMap/template.html", "base/AppEvent", "base/ConfigData", "widgets/realTimePolice/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/graphic", "esri/geometry/Point", "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!", "widgets/realTimePolice/LayUIDataTable" ], 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, Graphic, Point, 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: [], // 是否派发保安的 文字 treatmentIndex: null, securityFlag: false, editParentInd: null, // 存储新增点,线,面,数据的地方 polygonData: [], polygonFlag: false, editToolbar: null, addPolygonEntitys: null, // 所有的面图层 entityPolygonAll: null, // 用来存储区域名称 globalRegionName: null, // 用来区域得最大最小经纬度 currentDrawing: [], // 巡逻区域或者巡逻路线的描述 routeOrRegionDescribe: null, // 用来记录巡逻区域或者巡逻路线的下标的 patrolIndex: 0, // 拖拽 isDown: false, x: 0, y: 0, offset: null, moveThis: null, // 电子围栏需要新增的Id newElectronicFenceId: null, // 新增路线时,派发人员,人员名称,以及人员id peopleRealName: null, pepleRealId: null, constructor: function(options, srcRefNode) { debugger; console.log("option=" + options); 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; // 保安出警管理表格中点击事件 $('.police-dispatching .police-container .police-container-policeforce .table .tbody tbody').off('click', 'input').on('click', 'input', function(event) { event.stopPropagation(); var lgtd = Number($(this).parent().parent().attr('lgtd')); var lttd = Number($(this).parent().parent().attr('lttd')); var position = new esri.geometry.Point(lgtd, lttd, new esri.SpatialReference({ wkid: 4326 })); //根据输入坐标信息找地图上的点 that.newElectronicFenceId = null; that._map.centerAndZoom(position, 18); //缩放,10是缩放级别,可以自定义,数值越大缩放越大 var graphic = that.entityPolygonAll.graphics; for (var i = 0; i < graphic.length; i++) { if (graphic[i].objId.id == $(this).attr('resultid')) { if (graphic[i].geometry.rings[0].length > 0) { that.polygonFlag = false; that.electronicFence(); that.activateToolbar(graphic[i]); } else { layui.use('layer', function() { layui.layer.msg('请开始划分电子围栏'); }) that.polygonFlag = true; that.newElectronicFenceId = graphic[i].objId; } } } }) $('.police-dispatching .police-container .police-container-policeforce .table .tbody tbody').off('click', 'tr').on('click', 'tr', function(event) { event.stopPropagation(); var lgtd = Number($(this).attr('lgtd')); var lttd = Number($(this).attr('lttd')); var position = new esri.geometry.Point(lgtd, lttd, new esri.SpatialReference({ wkid: 4326 })); //根据输入坐标信息找地图上的点 that._map.centerAndZoom(position, 18); //缩放,10是缩放级别,可以自定义,数值越大缩放越大 var snumber = $(this).attr('term-snumber'); var url = './popup/html/personnel-information-management.html?id=' + code; layui.use('layer', function() { that.layuiLayer = layui.layer; that.layuiLayer.config({ extend: 'myskin/personnel-information-management.css' }); that.layuiLayer.close(that.layuiLayer.index); that.layuiLayer.open({ title: '保安人员信息', type: 2, shadeClose: true, shade: false, maxmin: false, //开启最大化最小化按钮 area: ['400px', '220px'], offset: 'auto', skin: 'personnel-information-management', content: url, closeBtn: 1, }); }) }) }, open: function() { var that = this; debugger; $.ajax({ url: '/api/blade-jfpts/alarm/alarm/listAll?', type: 'get', dataType: 'JSON', success: function(data) { var datas = data.data; for (var i = 0; i < datas.length; i++) { datas[i].x = Number(datas[i].jd); datas[i].y = Number(datas[i].wd); } debugger; that.flareClusterLayer(datas); } }); }, close: function() { }, // 鼠标点击事件 clickHand: function() {}, //聚合图层事件 flareClusterLayer: function(datas) { debugger; var that = this; var preClustered = false; var displaySingleFlaresAtCount = 10; var areaDisplayMode = ""; // var allData = JSON.parse(DATA); // DataManager.setData(allData); //init the layer, more options are available and explained in the cluster layer constructor that.clusterLayer = new FlareClusterLayer({ id: "flare-cluster-layer", spatialReference: new esri.SpatialReference({ "wkid": 4326 }), subTypeFlareProperty: "facilityType", singleFlareTooltipProperty: "name", displaySubTypeFlares: true, displaySingleFlaresAtCount: displaySingleFlaresAtCount, flareShowMode: "mouse", preClustered: preClustered, clusterRatio: 75, clusterAreaDisplay: areaDisplayMode, clusteringBegin: function() { console.log("clustering begin"); }, clusteringComplete: function() { console.log("clustering complete"); } }); //set up a class breaks renderer to render different symbols based on the cluster count. Use the required clusterCount property to break on. var defaultSym = new PictureMarkerSymbol("./images/ceshi.png", 32, 32).setOffset(0, 15); var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount"); var xlSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 32, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([200, 52, 59, 0.8]), 1), new dojo.Color([250, 65, 74, 0.8])); var lgSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 28, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([41, 163, 41, 0.8]), 1), new dojo.Color([51, 204, 51, 0.8])); var mdSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 24, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([82, 163, 204, 0.8]), 1), new dojo.Color([102, 204, 255, 0.8])); var smSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 22, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([230, 184, 92, 0.8]), 1), new dojo.Color([255, 204, 102, 0.8])); renderer.addBreak(0, 19, smSymbol); renderer.addBreak(20, 150, mdSymbol); renderer.addBreak(151, 1000, lgSymbol); renderer.addBreak(1001, Infinity, xlSymbol); that.clusterLayer.setRenderer(renderer); //use standard setRenderer. //set up a popup template var template = new PopupTemplate({ title: "{name}", fieldInfos: [ { fieldName: "facilityType", label: "Facility Type", visible: true }, { fieldName: "postcode", label: "Post Code", visible: true }, { fieldName: "isOpen", label: "Opening Hours", visible: true } ] }); //clusterLayer.infoTemplate = template; that._map.infoWindow.titleInBody = false; that._map.addLayer(that.clusterLayer); //var data = DataManager.getData(); that.clusterLayer.addData(datas); }, clearLayer: function() { var that = this; that._map.removeLayer(that.clusterLayer); that.clusterLayer = null; } }); return Widget; });