/* * @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/detailMap/template.html", "base/AppEvent", "base/ConfigData", "widgets/detailMap/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/detailMap/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: "DetailMap", label: "卡片模式详情", templateString: template, _map: null, objThis: null, _siteLayer: new GraphicsLayer(), layuiLayer: null, layuiLadate: null, tabIndex: 0, // 保留添加实体图层的变量 addEntitys: null, entitysData: [], // 巡逻区域或者巡逻路线的描述 routeOrRegionDescribe: null, // 用来记录巡逻区域或者巡逻路线的下标的 patrolIndex: 0, // 拖拽 isDown: false, x: 0, y: 0, offset: null, moveThis: null, // 电子围栏需要新增的Id newElectronicFenceId: null, // 新增路线时,派发人员,人员名称,以及人员id peopleRealName: null, pepleRealId: 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); }, getQueryStringByKey: function (key) { return (document.location.search.match(new RegExp("(?:^\\?|&)" + key + "=(.*?)(?=&|$)")) || ['', null])[1]; }, open: function () { var that = this; var lgtd = that.getQueryStringByKey('jd'); var lttd = that.getQueryStringByKey('wd'); that.addPoint(that.addEntitys, lgtd, lttd, './images/jingbaored.png'); }, close: function () { }, // 获取当前时间,以及昨天现在的时间 getTime: function getTime() { var timestamp = Date.parse(new Date()); // 当前时间 var currentTime = new Date(timestamp); // 年 var currentY = currentTime.getFullYear(); // 月 var currentM = currentTime.getMonth() + 1 < 10 ? '0' + (currentTime.getMonth() + 1) : currentTime.getMonth() + 1; // 日 var currentD = currentTime.getDate() < 10 ? '0' + currentTime.getDate() : currentTime.getDate(); // 时 var currentH = currentTime.getHours() < 10 ? '0' + currentTime.getHours() : currentTime.getHours(); // 分 var currentDd = currentTime.getMinutes() < 10 ? '0' + currentTime.getMinutes() : currentTime.getMinutes(); // 明天 var tomorrowTime = new Date(timestamp - 60 * 60 * 24 * 1000); // 年 var tomorrowY = tomorrowTime.getFullYear(); // 月 var tomorrowM = tomorrowTime.getMonth() + 1 < 10 ? '0' + (tomorrowTime.getMonth() + 1) : tomorrowTime.getMonth() + 1; // 日 var tomorrowD = tomorrowTime.getDate() < 10 ? '0' + tomorrowTime.getDate() : tomorrowTime.getDate(); // 时 var tomorrowH = tomorrowTime.getHours() < 10 ? '0' + tomorrowTime.getHours() : tomorrowTime.getHours(); // 分 var tomorrowDd = tomorrowTime.getMinutes() < 10 ? '0' + tomorrowTime.getMinutes() : tomorrowTime.getMinutes(); return { current: currentY + '-' + currentM + '-' + currentD + ' ' + currentH + ':' + currentDd, tomorrow: tomorrowY + '-' + tomorrowM + '-' + tomorrowD + ' ' + tomorrowH + ':' + tomorrowDd, month: currentM + currentD }; }, // 创建实体图层 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, 33, 48); var pt = new Point(lgtd, lttd, new SpatialReference({ wkid: 4326 })); var graphic = new esri.Graphic(pt, symbol); entitys.add(graphic); }, addPoints: function (entitys, lgtd, lttd, img) { var symbol = new esri.symbol.PictureMarkerSymbol(img, 33, 48); var pt = new Point(lgtd, lttd, new SpatialReference({ wkid: 4326 })); var graphic = new esri.Graphic(pt, symbol); entitys.add(graphic); }, //聚合图层事件 flareClusterLayer: function (datas) { console.log(1); 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 (e) { console.log(e, "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/jingbaored.png", 33, 48).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, 52, 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; });