处警队伍列表修改为user表数据展示

Administrator

2021-03-15 161d705a809405eece944b574fcddf92edce7b7d

处警队伍列表修改为user表数据展示

 public/map/core/manager/widgetsmanager.js

@@ -1,32 +1,32 @@
define(["base/AppEvent",
    "base/ConfigData",
    "dojo/_base/declare",
    "dojo/_base/lang",
    "dojo/dom",
    "dojo/dom-construct",
    "dojo/dom-attr",
    "dojo/dom-class",
    "dojo/on",
    "utils/LayerUtil",
    "utils/ConfigUtil",
    "controls/toolbar/tools/Map3DTool",
    "controls/toolbar/tools/SwipeTool",
    "controls/toolbar/tools/ZoomInTool",
    "controls/toolbar/tools/ZoomOutTool",
    "controls/toolbar/tools/PanTool",
    "controls/toolbar/tools/FullScreenTool",
    "controls/toolbar/tools/ScreenWindowTool",
    "controls/toolbar/tools/StreetViewTool",
    "controls/toolbar/tools/MeasureLineTool",
    "controls/toolbar/tools/MeasurePolygonTool",
    "controls/toolbar/tools/ErrCorrectTool",
    "controls/toolbar/tools/ClearTool",
    "controls/toolbar/tools/CityLayerTool",
    "controls/toolbar/tools/LocationTool",
    "dojo/dom-style",
    "dojo/domReady!"
],
    function (AppEvent,
        "base/ConfigData",
        "dojo/_base/declare",
        "dojo/_base/lang",
        "dojo/dom",
        "dojo/dom-construct",
        "dojo/dom-attr",
        "dojo/dom-class",
        "dojo/on",
        "utils/LayerUtil",
        "utils/ConfigUtil",
        "controls/toolbar/tools/Map3DTool",
        "controls/toolbar/tools/SwipeTool",
        "controls/toolbar/tools/ZoomInTool",
        "controls/toolbar/tools/ZoomOutTool",
        "controls/toolbar/tools/PanTool",
        "controls/toolbar/tools/FullScreenTool",
        "controls/toolbar/tools/ScreenWindowTool",
        "controls/toolbar/tools/StreetViewTool",
        "controls/toolbar/tools/MeasureLineTool",
        "controls/toolbar/tools/MeasurePolygonTool",
        "controls/toolbar/tools/ErrCorrectTool",
        "controls/toolbar/tools/ClearTool",
        "controls/toolbar/tools/CityLayerTool",
        "controls/toolbar/tools/LocationTool",
        "dojo/dom-style",
        "dojo/domReady!"
    ],
    function(AppEvent,
        ConfigData,
        declare,
        lang,
@@ -56,8 +56,7 @@
            //--------------------------------------------
            //  系统所有widget的配置
            //--------------------------------------------
            _widgetsConfig: [
                {
            _widgetsConfig: [{
                    "label": "分析研判",
                    "id": "AnalysisAndJudgment",
                    "widgetClass": "widgets/analysisAndJudgment/AnalysisAndJudgment",
@@ -98,12 +97,12 @@
                    "actived": false
                },
                {
                  "label": "设备管理",
                  "id": "equipment",
                  "widgetClass": "widgets/equipment/ClientManagement",
                  "type": "sider",
                  "cssPath": "widgets/equipment/ClientManagement.css",
                  "actived": false
                    "label": "设备管理",
                    "id": "equipment",
                    "widgetClass": "widgets/equipment/ClientManagement",
                    "type": "sider",
                    "cssPath": "widgets/equipment/ClientManagement.css",
                    "actived": false
                },
                {
                    "label": "警情调度",
@@ -127,6 +126,14 @@
                    "widgetClass": "widgets/aPoliceTeam/APoliceTeam",
                    "type": "sider",
                    "cssPath": "widgets/aPoliceTeam/APoliceTeam.css",
                    "actived": false
                },
                {
                    "label": "处警队伍",
                    "id": "SecurityMap",
                    "widgetClass": "widgets/securityMap/SecurityMap",
                    "type": "sider",
                    "cssPath": "widgets/securityMap/SecurityMap.css",
                    "actived": false
                },
                {
@@ -171,18 +178,18 @@
            _widgetsTable: {},
            _activedButton: null,
            _widgetId2TabButtonIndex: {},
            constructor: function () {
            constructor: function() {
                AppEvent.addAppEventListener(AppEvent.CONFIG_LOADED, lang.hitch(this, this.onConfigLoaded));
                AppEvent.addAppEventListener(AppEvent.BASE_MAP_LAYER_LOADED, lang.hitch(this, this.onMapLoaded));
                AppEvent.addAppEventListener(AppEvent.RUN_WIDGET, lang.hitch(this, this.onRunWidgetHandler));
                AppEvent.addAppEventListener(AppEvent.CLOSE_WIDGET, lang.hitch(this, this.onCloseWidgetHandler));
            },
            onConfigLoaded: function () {
            onConfigLoaded: function() {
                this._bodyDom = dom.byId("body");
                this._mapContentDom = dom.byId("mapcontentClass");
                this._topWidgetContainerDom = dom.byId("topWidgetContainer");
            },
            onMapLoaded: function (map) {
            onMapLoaded: function(map) {
                try {
                    this._map = map;
                    for (var i = 0; i < this._widgetsConfig.length; i++) {
@@ -213,9 +220,9 @@
            /**
             * 解析侧边栏的Widget
             */
            _parseSiderWidget: function (widgetCfg) {
            _parseSiderWidget: function(widgetCfg) {
                if (widgetCfg.inited) {
                    this._loadWidget(widgetCfg.widgetClass, widgetCfg.id, widgetCfg.cssPath, function (widget) {
                    this._loadWidget(widgetCfg.widgetClass, widgetCfg.id, widgetCfg.cssPath, function(widget) {
                        domConstruct.place(widget.domNode, dom.byId("tabcontainer"));
                        widget.startup();
                        widget.close();
@@ -238,9 +245,9 @@
            /**
             * 解析顶部位置的Widget
             */
            _parseTopWidget: function (widgetCfg) {
            _parseTopWidget: function(widgetCfg) {
                if (widgetCfg.actived) {
                    this._loadWidget(widgetCfg.widgetClass, widgetCfg.id, widgetCfg.cssPath, lang.hitch(this, function () {
                    this._loadWidget(widgetCfg.widgetClass, widgetCfg.id, widgetCfg.cssPath, lang.hitch(this, function() {
                        var widget = this._widgetsTable[widgetCfg.id];
                        domConstruct.place(widget.domNode, this._topWidgetContainerDom);
                        widget.startup();
@@ -251,9 +258,9 @@
            /**
             * 解析浮动在地图显示区域上的Widget
             */
            _parseCoverWidget: function (widgetCfg) {
            _parseCoverWidget: function(widgetCfg) {
                if (widgetCfg.actived) {
                    this._loadWidget(widgetCfg.widgetClass, widgetCfg.id, widgetCfg.cssPath, lang.hitch(this, function () {
                    this._loadWidget(widgetCfg.widgetClass, widgetCfg.id, widgetCfg.cssPath, lang.hitch(this, function() {
                        var widget = this._widgetsTable[widgetCfg.id];
                        domConstruct.place(widget.domNode, this._mapContentDom);
                        widget.startup();
@@ -262,7 +269,7 @@

            },

            onRunWidgetHandler: function (widgetId) {
            onRunWidgetHandler: function(widgetId) {
                var widgetCfg = this._getWidgetConfigById(widgetId);
                if (!widgetCfg) {
                    alert("该模块不存在！");
@@ -274,7 +281,7 @@
                        thisObj: this,
                        widgetCfg: widgetCfg
                    };
                    this._loadWidget(widgetCfg.widgetClass, widgetId, widgetCfg.cssPath, lang.hitch(content, function () {
                    this._loadWidget(widgetCfg.widgetClass, widgetId, widgetCfg.cssPath, lang.hitch(content, function() {
                        var widget = this.thisObj._widgetsTable[this.widgetCfg.id];
                        this.thisObj._runWidget(widget, this.widgetCfg);
                    }));
@@ -282,7 +289,7 @@
                    this._runWidget(widget, widgetCfg);
                }
            },
            onCloseWidgetHandler: function (widgetId) {
            onCloseWidgetHandler: function(widgetId) {
                var widgetCfg = this._getWidgetConfigById(widgetId);
                if (!widgetCfg) {
                    return;
@@ -297,7 +304,7 @@
            /**
             * 运行Widget
             */
            _runWidget: function (widget, widgetCfg) {
            _runWidget: function(widget, widgetCfg) {
                switch (widgetCfg.type) {
                    case "sider":
                        if (this._activedButton) {
@@ -335,26 +342,26 @@
            /**
             * 临时的实例化，因为还没有规划好怎么加载
             */
            _tempAppendOthers: function () {
            _tempAppendOthers: function() {
                var map = this._map;
                var mapDomNode = dom.byId(map.id);
                //创建常用工具条
                dojo.create("link", {
                    href: 'controls/toolbar/toolbar.css',
                    type: 'text/css',
                    rel: 'stylesheet'
                },
                        href: 'controls/toolbar/toolbar.css',
                        type: 'text/css',
                        rel: 'stylesheet'
                    },
                    document.getElementsByTagName('head')[0]);
                var toolbarDom = domConstruct.create("div", {
                    id: "toolBarDiv",
                    "class": "toolbar"
                }, dom.byId('mainMapWidget'));
                //全屏
                /*var tool = new FullScreenTool({
                    "map": this._map
                });
                domConstruct.place(tool.domNode, toolbarDom);
                AppEvent.dispatchAppEvent(AppEvent.APPEND_TOOL, tool);*/
                /*var tool = new FullScreenTool({
                    "map": this._map
                });
                domConstruct.place(tool.domNode, toolbarDom);
                AppEvent.dispatchAppEvent(AppEvent.APPEND_TOOL, tool);*/
                //放大
                var tool = new ZoomInTool({
                    "map": this._map
@@ -383,7 +390,7 @@
                    hockId: ConfigData.mapWidgetId
                });
                //漫游
                /*var tool = new Map3DTool({
                /*var tool = new Map3DTool({
                    "map": this._map
                });
                domConstruct.place(tool.domNode, toolbarDom);
@@ -429,7 +436,7 @@
                });

            },
            _onTabButtonClickHandler: function (evt) {
            _onTabButtonClickHandler: function(evt) {
                if (this._activedButton == evt.currentTarget) {
                    return;
                }
@@ -439,7 +446,7 @@
                if (widget == null) {
                    //Widget还未Load
                    var widgetCfg = this._getWidgetConfigById(widgetId);
                    this._loadWidget(widgetCfg.widgetClass, widgetId, widgetCfg.cssPath, lang.hitch(this, function () {
                    this._loadWidget(widgetCfg.widgetClass, widgetId, widgetCfg.cssPath, lang.hitch(this, function() {
                        widget = this._widgetsTable[widgetId];
                        //this._confirmUserRightForSiderWidget(widget)
                        if (this._activedButton) {
@@ -460,7 +467,7 @@
                }
                //var loadwidget = lang.hitch(this, this._confirmUserRightForSiderWidget(widget));
            },
            _switchTab: function (widgetId) {
            _switchTab: function(widgetId) {
                var widget;
                if (widgetId == this._defaultActivedSiderWidgetId) {
                    //第一次加载defaultWidget的时候，widget还未请求
@@ -477,7 +484,7 @@
                    widget.domNode.parentNode.removeChild(widget.domNode);
                }
                widget = this._widgetsTable[widgetId];
                var loadfun = lang.hitch(this, function (widget, widgetId) {
                var loadfun = lang.hitch(this, function(widget, widgetId) {
                    this._defaultActivedSiderWidgetId = widgetId;
                    domConstruct.place(widget.domNode, dom.byId("tabcontainer"));
                    if (widget.loaded() == false) {
@@ -488,7 +495,7 @@
                });
                if (widget == null) {
                    var widgetCfg = this._getWidgetConfigById(widgetId);
                    this._loadWidget(widgetCfg.widgetClass, widgetId, widgetCfg.cssPath, lang.hitch(this, function () {
                    this._loadWidget(widgetCfg.widgetClass, widgetId, widgetCfg.cssPath, lang.hitch(this, function() {
                        widget = this._widgetsTable[widgetId];
                        loadfun(widget, widgetId);
                    }));
@@ -497,30 +504,30 @@
                }

            },
            _loadWidget: function (widgetUrl, widgetId, cssPath, callback) {
            _loadWidget: function(widgetUrl, widgetId, cssPath, callback) {
                if (cssPath && cssPath != "") {
                    dojo.create("link", {
                        href: cssPath,
                        type: "text/css",
                        rel: "stylesheet"
                    },
                            href: cssPath,
                            type: "text/css",
                            rel: "stylesheet"
                        },
                        document.getElementsByTagName("head")[0]);
                }
                require([widgetUrl], lang.hitch(this, function (WidgetClass) {
                    var widget = new WidgetClass({
                        map: this._map,
                        id: widgetId
                    });
                    this._widgetsTable[widgetId] = widget;
                    if (callback)
                        callback(widget);
                }),
                    function (err) {
                require([widgetUrl], lang.hitch(this, function(WidgetClass) {
                        var widget = new WidgetClass({
                            map: this._map,
                            id: widgetId
                        });
                        this._widgetsTable[widgetId] = widget;
                        if (callback)
                            callback(widget);
                    }),
                    function(err) {
                        console.log("load widget");
                        console.log(err);
                    });
            },
            _getWidgetConfigById: function (widgetId) {
            _getWidgetConfigById: function(widgetId) {
                for (var i = 0; i < this._widgetsConfig.length; i++) {
                    if (this._widgetsConfig[i].id == widgetId) {
                        return this._widgetsConfig[i];
@@ -528,4 +535,4 @@
                }
            }
        });
    });
    });

 public/map/widgets/securityMap/FlareClusterLayer_v3.js

New file
@@ -0,0 +1,1336 @@
define([
    "dojo/_base/declare",
    "dojo/_base/lang",
    "dojo/_base/array",
    "dojo/on",
    "dojo/fx",
    "dojox/gfx",
    "dojox/gfx/fx",
    "dojox/gesture/tap",
    "esri/SpatialReference",
    "esri/geometry/Extent",
    "esri/geometry/Multipoint",
    "esri/geometry/Point",
    "esri/geometry/Polygon",
    "esri/geometry/ScreenPoint",
    "esri/geometry/webMercatorUtils",
    "esri/geometry/geometryEngine",
    "esri/graphic",
    "esri/Color",
    "esri/renderers/ClassBreaksRenderer",
    "esri/symbols/Font",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/symbols/SimpleFillSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/symbols/TextSymbol",
    "esri/dijit/PopupTemplate",
    "esri/layers/GraphicsLayer"
], function (
    declare, lang, arrayUtils, on, coreFx, gfx, fx, tap,
    SpatialReference, Extent, Multipoint, Point, Polygon, ScreenPoint, webMercatorUtils, geometryEngine, Graphic,
    Color, ClassBreaksRenderer, Font, SimpleMarkerSymbol, SimpleFillSymbol, SimpleLineSymbol, TextSymbol,
    PopupTemplate, GraphicsLayer
) {
    return declare([GraphicsLayer], {
        constructor: function (options) {
            /* options description:
              spatialReference: default 102100. A SpatialReference object using the wkid of that data.
              preClustered (boolean) : default false. Whether the data is pre-clustered or not. If true the addPreClusteredData method should be used to add data. 
                                        If false use addData method and clusters will be calculated within the layer.
              clusterRatio (number): default 75. When not pre clustered this is the ratio to divide the width and height of the map by which is used to draw up a grid to represent cluster areas. Experiment based on your data.
              displaySubTypeFlares (boolean): default false. Whether to dipslay flares for sub types (ie the count of a property). If this is true, then subTypeFlareProperty must also be set
              subTypeFlareProperty (string): default null. If specified and displaySubTypeFlares is true, layer will display flares that contain a count of the objects that have the same value for the configured property.
              flareColor (esri/Color) : default new Color([0, 0, 0, 0.5]). The color for flares.
              maxFlareCount (number): default 8. The max number of flares to display. If this is too high they may overlap, depends on the size of the cluster symbols.
              displaySingleFlaresAtCount (number): default 8. If a cluster contains this count or less it will display flare that represent single objects. If it contains greater than this count it will display sub type flares if they have been configured to be displayed.
              singleFlareTooltipProperty (string): default null. Property name to get the values for display in a single point flares tooltips.
              textSymbol (esri/symbols/TextSymbol): default set below. The text symbol to use in clusters
              flareShowMode (string): default 'mouse'. Must be 'mouse' or 'tap'. On a mouse enabled device whether to show the flares on mouse enter and hide on mouse leave, or on tap / click. Devices with no mouse will behave like 'tap' anyway.
              clusteringBegin (function): default null. A basic callback function that get's fired when clustering is beginning. 
              clusteringComplete (function): default null. A basic callback function that get's fired when clustering is complete.  
              clusterAreaDisplay (string): default null. Can be either 'always' or 'hover'. 'always' will constantly display the cluster area, 'hover' will only display it on hover of cluster object
                                                         The cluster area is a ploygon of the total area covered by the points in a cluster. If using preClustered data, each cluster object must contain a property called 'points' which is an array of points for every point in the cluster. example: cluster.points = [[x1, y1], [x2, y2], [x3, y3]];
              clusterAreaRenderer (Renderer): default null. This is required if clusterAreaDisplay is set. This can be set in options constructor object or by calling setRenderer as the second argument.
              xPropertyName (string): default 'x'.  This is the name of the field in the dataset that represents the x coordinate.
              yPropertyName (string): default 'y'.  This is the name of the field in the dataset that represents the y coordinate.
              idPropertyName (string): default null. This is the name of the field in the dataset that represents a unique id which can be used to identify the flare.  This is usefull when you may have multiple points with the same lat/long.
            */

            //set options from constructor parameter or set defaults
            options = options || {};
            this.spatialRef = options.spatialReference || new SpatialReference({"wkid": 102100});
            this.preClustered = options.preClustered === true;
            this.clusterRatio = options.clusterRatio || 75;

            this.displaySubTypeFlares = options.displaySubTypeFlares === true;
            this.subTypeFlareProperty = options.subTypeFlareProperty || null;

            this.flareColor = options.flareColor || new Color([0, 0, 0, 0.5]);
            this.maxFlareCount = options.maxFlareCount || 8;
            this.displaySingleFlaresAtCount = options.displaySingleFlaresAtCount || 8;
            this.singleFlareTooltipProperty = options.singleFlareTooltipProperty || null;
            var defaultTextSymbol = new TextSymbol()
                .setColor(new Color([255, 255, 255]))
                .setAlign(Font.ALIGN_START)
                .setFont(new Font("10pt").setWeight(Font.WEIGHT_BOLD).setFamily("calibri"))
                .setVerticalAlignment("middle");
            defaultTextSymbol.font.size = 14;
            this.textSymbol = options.textSymbol || defaultTextSymbol;
            this.flareShowMode = options.flareShowMode || "mouse";

            //a couple of callbacks - could make them into events on the layer, and/or have the clustering return deferreds. 
            this.clusteringBegin = options.clusteringBegin;
            this.clusteringComplete = options.clusteringComplete;

            this.clusterAreaDisplay = options.clusterAreaDisplay;
            this.clusterAreaRenderer = options.clusterAreaRenderer;

            this.xPropertyName = options.xPropertyName || 'x';
            this.yPropertyName = options.yPropertyName || 'y';
            this.idPropertyName = options.idPropertyName || null;

            if (this.clusterAreaDisplay && (this.clusterAreaDisplay !== 'always' && this.clusterAreaDisplay !== 'hover')) {
                console.error("clusterAreaDisplay can only be 'always' or 'hover'.");
                return;
            }


            if (this.flareShowMode !== "mouse" && this.flareShowMode !== "tap") {
                console.error("flareShowMode option can only be 'mouse' or 'tap'");
                return;
            }

            //init some stuff
            this.animationMultipleType = {
                combine: "combine",
                chain: "chain"
            };

            this.events = [];
            this.graphicEvents = [];
            this.animationsRunning = [];
            this.clusters = [];
            this.singles = [];

        },


        //#region override some GraphicsLayer methods 

        //add an extra argument to setRenderer. It is an optional renderer for displaying the cluster areas. The clusterAreaRenderer can also be set in constructor.
        setRenderer: function (renderer, clusterAreaRenderer) {
            if (clusterAreaRenderer) {
                this.clusterAreaRenderer = clusterAreaRenderer;
            }

            return this.inherited(arguments);
        },

        _setMap: function (map, surface) {
            this.map = map;
            this.surface = surface;

            this.events.push(on(this.map, "resize", lang.hitch(this, this._mapResize)));

            //add pan and zoom events to limit to recluster
            this.events.push(on(this.map, "extent-change", lang.hitch(this, this._clusterData)));

            //Handle click event at the map level
            this.events.push(on(this.map, "click", lang.hitch(this, this._mapClick)));

            this.events.push(on(this.map.infoWindow, "show", lang.hitch(this, this._infoWindowShow)));
            this.events.push(on(this.map.infoWindow, "hide", lang.hitch(this, this._infoWindowHide)));

            this.events.push(on(this, "graphic-draw", this._graphicDraw));
            this.events.push(on(this, "graphic-node-remove", this._graphicNodeRemove));

            this.events.push(on(this, "mouse-over", this._graphicMouseOver));
            this.events.push(on(this, "mouse-out", this._graphicMouseOut));

            return this.inherited(arguments);
        },


        _unsetMap: function () {
            this.inherited(arguments);
            //remove events
            for (var i = 0, len = this.events.length; i < len; i++) {
                if (this.events[i]) {
                    this.events[i].remove();
                }
            }

            for (i = 0, len = this.graphicEvents.length; i < len; i++) {
                if (this.graphicEvents[i]) {
                    this.graphicEvents[i].remove();
                }
            }
        },

        onClick: function (evt) {
            this._restoreInfoWindowSettings();

            if (evt.graphic.attributes.isCluster) {
                evt.stopPropagation();
                //this._activateCluster(evt.graphic);
                this.map.infoWindow.hide();
            } else if (evt.graphic.attributes.isFlare) {
                evt.stopPropagation();

                var flareObject = this._getFlareFromGraphic(evt.graphic);
                if (!flareObject) {
                    this._hideFlareDetail();
                    this.map.infoWindow.hide();
                    return;
                }

                if (flareObject.isSummaryFlare || !flareObject.singleData) {
                    this._showFlareDetail(evt.graphic);
                    this.map.infoWindow.hide();
                    return;
                }

                //if we're clicking on a single data flare then show an info window
                var graphic = evt.graphic;

                this.originalInfoWindow = {
                    highlight: lang.clone(this.map.infoWindow.get("highlight")),
                    anchor: lang.clone(this.map.infoWindow.anchor)
                };

                this.map.infoWindow.hide();
                this.map.infoWindow.clearFeatures();
                this.map.infoWindow.set("highlight", false);
                this.map.infoWindow.setFeatures([graphic]);

                //when getting screen point make sure we use the location of the flare on screen, by converting the map point on the object.
                var sp = this.map.toScreen({x: flareObject.mapPoint.x, y: flareObject.mapPoint.y});

                //Could do something with the anchor of the info window here if wanted. The offsets can be a bit wacky as well.
                //var anchor = this._getInfoWindowAnchor(flareObject.degree);
                //this.map.infoWindow.anchor = anchor;

                this.map.infoWindow.cluster = this.activeCluster;

                //reset the geometry of the flare feature in the info window to be the actual location of the flared object, not the location of the flare graphic.
                var p = webMercatorUtils.geographicToWebMercator(new Point(flareObject.singleData[this.xPropertyName], flareObject.singleData[this.yPropertyName], this.spatialRef));
                this.map.infoWindow.features[0].geometry = p;
                this.map.infoWindow.show(sp);

            }
        },

        //Add a data point to be clustered.
        //Each object passed in must contain an x and y property. 
        //Data should also contain whatever property is set in singleFlareTooltipProperty, so the flare tooltip has something to display for summary flares if needed
        add: function (p) {


            // if passed a graphic, just use the base GraphicsLayer's add method
            if (p.declaredClass) {
                this.inherited(arguments);
                return;
            }

            //if we got here, then we're adding a single object
            //NOTE: Use this sparingly - better to use addData (or even better addPreClusteredData). 
            //If using add() to add a large amount of objects (eg: in a long loop), clusters and their elements will be removed and recreated when changes are applied to them,this can be expensive
            //If you use addData and pass in an array clusters will only be created in the DOM once they have been fully calculated

            //can't add client side if preClustered is being used
            if (this.preClustered) {
                return;
            }

            //get an extent that is in web mercator to make sure it's flat for extent checking
            var webExtent = webMercatorUtils.project(map.extent, new SpatialReference({"wkid": 102100}));
            if (!this.gridClusters || this.gridClusters.length === 0) {
                this._createClusterGrid();
            }

            var obj = p;
            if (!this.allData) {
                this.allData = [];
            }

            this.allData.push(obj);

            var xVal = obj[this.xPropertyName];
            var yVal = obj[this.yPropertyName];

            //get a web merc lng/lat for extent checking. Use web merc as it's flat to cater for longitude pole
            if (this.spatialRef.isWebMercator()) {
                web = [xVal, yVal];
            } else {
                web = webMercatorUtils.lngLatToXY(xVal, yVal);
            }

            //filter by visible extent first
            if (web[0] < webExtent.xmin || web[0] > webExtent.xmax || web[1] < webExtent.ymin || web[1] > webExtent.ymax) {
                return; //not in the visible extent
            }

            //loop cluster grid to see if it should be added to one
            for (var j = 0, jLen = this.gridClusters.length; j < jLen; j++) {
                var cl = this.gridClusters[j];

                if (web[0] < cl.extent.xmin || web[0] > cl.extent.xmax || web[1] < cl.extent.ymin || web[1] > cl.extent.ymax) {
                    continue; //not here so carry on
                }

                //recalc the x and y of the cluster by averaging the points again
                cl.x = cl.clusterCount > 0 ? (xVal + (cl.x * cl.clusterCount)) / (cl.clusterCount + 1) : xVal;
                cl.y = cl.clusterCount > 0 ? (yVal + (cl.y * cl.clusterCount)) / (cl.clusterCount + 1) : yVal;

                //push every point into the cluster so we have it for area display if required. This could be omitted if never checking areas, or on demand at least
                if (this.clusterAreaDisplay) {
                    cl.points.push([xVal, yVal]);
                }

                cl.clusterCount++;

                var subTypeExists = false;
                for (var s = 0, sLen = cl.subTypeCounts.length; s < sLen; s++) {
                    if (cl.subTypeCounts[s].name === obj[this.subTypeFlareProperty]) {
                        cl.subTypeCounts[s].count++;
                        subTypeExists = true;
                        break;
                    }
                }
                if (!subTypeExists) {
                    cl.subTypeCounts.push({name: obj[this.subTypeFlareProperty], count: 1});
                }

                cl.singles.push(obj);

                if (cl.clusterCount === 1) {
                    //this was the only point in this cluster area so add a single
                    this._createSingle(obj);
                } else {
                    if (cl.clusterCount === 2) {
                        //if it was previously a single remove the single.
                        var index = this.singles.indexOf(cl.singles[0]);
                        this.remove(cl.singles[0].graphic);
                        this.singles.splice(index, 1);
                        delete cl.singles[0].graphic;
                    } else {
                        //only remove if the count is > 2. Would have been a single previously.
                        this._removeCluster(cl);
                    }
                    this._createCluster(cl);
                }
            }
        },

        clear: function () {
            // Summary:  Remove all clusters and data points.

            this.inherited(arguments);

            this.activeCluster = null;
            this.activeFlareObject = null;

            //stop any animations that may still be running while clearing graphics
            this._stopAnimations();

            //remove all created cluster group elements
            var node = this.getNode();
            dojo.query("g.cluster-group", node).forEach(dojo.destroy);

            //clear any graphic events
            for (var i = 0, len = this.graphicEvents.length; i < len; i++) {
                if (this.graphicEvents[i]) {
                    this.graphicEvents[i].remove();
                }
            }

            // this.map.infoWindow.hide();
            // this.map.infoWindow.clearFeatures();

            this.gridClusters = [];
            this.clusters = [];
            this.singles = [];
        },

        //#endregion

        //#region other event handlers

        _mapResize: function () {
            //destroy any orphaned cluster group nodes
            dojo.query("g.cluster-group:empty", this.getNode()).forEach(dojo.destroy);
        },

        _mapClick: function (e) {
            if (!e.target) {
                return;
            }

            var targetClass = e.target.getAttribute("class");
            if (!targetClass || targetClass.indexOf("cluster-object") === -1) {
                //if this was not a cluster object at all then clear any active one and return
                this._clearActiveCluster();
            } else if (targetClass.indexOf("cluster-object") !== -1) {
                //if click reached map click event and it is a cluster object, make sure an info window doesn't display for the cluster graphic
                if (this.map.infoWindow.cluster) {
                    this._restoreInfoWindowSettings();
                }
                this.map.infoWindow.hide();
            }
        },

        _graphicDraw: function (e) {
            var g = e.graphic;
            if (g.attributes.isCluster) {
                //create the cluster graphics if this is a cluster being drawn
                var cl = this._getClusterFromGraphic(g);
                this._createClusterGraphic(cl);
                if (this.activeCluster === cl) {
                    this._clearActiveCluster();
                }
            } else if (g.attributes.isClusterArea) {
                var sh = g.getShape();
                sh.moveToBack();
            }


            return this.inherited(arguments);
        },

        _graphicNodeRemove: function (e) {
            var g = e.graphic;
            if (g.attributes.isCluster) {
                //remove any group graphics related to this cluster as they'll be recreated when the node is redrawn.
                var cl = this._getClusterFromGraphic(g);
                if (cl) {
                    dojo.destroy(cl.groupShape.rawNode);
                }
            }
        },

        _graphicMouseOver: function (e) {
            if (this.flareShowMode === "mouse") {
                if (e.graphic.attributes.isCluster) {
                    //this._activateCluster(e.graphic);
                } else if (e.graphic.attributes.isFlare) {
                    this._showFlareDetail(e.graphic);
                }
            }
        },

        _graphicMouseOut: function (e) {
            if (e.graphic.attributes.isFlare) {
                this._hideFlareDetail();
            }
        },


        _infoWindowShow: function (e) {
            if (typeof (this.map.infoWindow.features !== 'undefined') && this.map.infoWindow.features !== null) {
                for (var i = 0; i < this.map.infoWindow.features.length; i++) {
                    if (typeof (this.map.infoWindow.features[i].attributes) !== 'undefined' && (this.map.infoWindow.features[i].attributes.isCluster || this.map.infoWindow.features[i].attributes.isClusterArea)) {
                        this.map.infoWindow.hide(); //if a cluster never show an info window
                        return;
                    }
                }
            }
        },

        _infoWindowHide: function (e) {
            this.map.infoWindow.cluster = null;
        },


        //#endregion


        //#region extra public methods

        addPreClusteredData: function (data) {
            /*
                Add data that is preclustered - (ie clustered server side).
                Data is an array, clusters must contain an x and y property as well as a clusterCount property. subTypeCounts is optional. 
                Clusters that have a count less than the this.displaySingleFlaresAtCount option must all contain the data for the single points in an array called singles
               Singles should also be in the array, they only need to contain an x and y property. Singles should also contain whatever property is set in singleFlareTooltipProperty, so the flare tooltip has something to display for summary flares if needed
            */

            if (this.clusteringBegin) {
                this.clusteringBegin();
            }

            this.allData = [];
            this.preClustered = true; //if we're adding preclustered data, force this flag to true
            for (var i = 0, len = data.length; i < len; i++) {
                if (data[i].clusterCount) {
                    //this is a cluster as it contains clusterCount
                    var cl = data[i];
                    this._createCluster(cl);
                } else {
                    this._createSingle(data[i]);
                }
            }

            if (this.clusteringComplete) {
                this.clusteringComplete();
            }
        },


        addData: function (data) {
            /*
                Add data to be clustered.
                Data is an array of objects. Each object passed in must contain an x and y property. 
                Data should also contain whatever property is set in singleFlareTooltipProperty if one is set, so the flare tooltip has something to display for summary flares if needed
                This will also clear all data first. add() can be used to add single objects at any time.
            */
            this.allData = data;
            this._clusterData();
        },


        //#endregion


        //#region internal stuff

        _restoreInfoWindowSettings: function () {
            if (this.originalInfoWindow) {
                this.map.infoWindow.set("highlight", this.originalInfoWindow.highlight);
                this.map.infoWindow.anchor = this.originalInfoWindow.anchor;
            }
        },

        _clusterData: function () {

            //this function currently only applies if not using preclustered data
            if (this.preClustered) {
                return;
            }

            if (this.clusteringBegin) {
                this.clusteringBegin();
            }

            this.clear();

            //get an extent that is in web mercator to make sure it's flat for extent checking
            //The webextent will need to be normalized since panning over the international dateline will cause
            //cause the extent to shift outside the -180 to 180 degree window.  If we don't normalize then the
            //clusters will not be drawn if the map pans over the international dateline.
            var webExtent = !this.map.extent.spatialReference.isWebMercator() ? webMercatorUtils.project(this.map.extent, new SpatialReference({"wkid": 102100})) : this.map.extent;
            var normalizedWebExtent = webExtent.normalize();
            webExtent = normalizedWebExtent[0];

            if (normalizedWebExtent.length > 1) {
                webExtent = webExtent.union(normalizedWebExtent[1]);
                this.extentIsUnioned = true;
            } else {
                this.extentIsUnioned = true;
            }

            this._createClusterGrid(webExtent);

            var dataLength = this.allData.length;
            var web, obj, xVal, yVal;
            for (var i = 0; i < dataLength; i++) {
                obj = this.allData[i];
                xVal = obj[this.xPropertyName];
                yVal = obj[this.yPropertyName];

                //get a web merc lng/lat for extent checking. Use web merc as it's flat to cater for longitude pole
                if (this.spatialRef.isWebMercator()) {
                    web = [xVal, yVal];
                } else {
                    web = webMercatorUtils.lngLatToXY(xVal, yVal);
                }

                //filter by visible extent first
                if (web[0] < webExtent.xmin || web[0] > webExtent.xmax || web[1] < webExtent.ymin || web[1] > webExtent.ymax) {
                    continue;
                }

                //loop cluster grid to see if it should be added to one
                for (var j = 0, jLen = this.gridClusters.length; j < jLen; j++) {
                    var cl = this.gridClusters[j];

                    if (web[0] < cl.extent.xmin || web[0] > cl.extent.xmax || web[1] < cl.extent.ymin || web[1] > cl.extent.ymax) {
                        continue; //not here so carry on
                    }

                    //recalc the x and y of the cluster by averaging the points again
                    cl.x = cl.clusterCount > 0 ? (xVal + (cl.x * cl.clusterCount)) / (cl.clusterCount + 1) : xVal;
                    cl.y = cl.clusterCount > 0 ? (yVal + (cl.y * cl.clusterCount)) / (cl.clusterCount + 1) : yVal;

                    //push every point into the cluster so we have it for area display if required. This could be omitted if never checking areas, or on demand at least
                    if (this.clusterAreaDisplay) {
                        cl.points.push([xVal, yVal]);
                    }

                    cl.clusterCount++;

                    var subTypeExists = false;
                    for (var s = 0, sLen = cl.subTypeCounts.length; s < sLen; s++) {
                        if (cl.subTypeCounts[s].name === obj[this.subTypeFlareProperty]) {
                            cl.subTypeCounts[s].count++;
                            subTypeExists = true;
                            break;
                        }
                    }
                    if (!subTypeExists) {
                        cl.subTypeCounts.push({name: obj[this.subTypeFlareProperty], count: 1});
                    }

                    cl.singles.push(obj);
                }
            }

            for (i = 0, len = this.gridClusters.length; i < len; i++) {
                if (this.gridClusters[i].clusterCount === 1) {
                    this._createSingle(this.gridClusters[i].singles[0]);
                } else if (this.gridClusters[i].clusterCount > 0) {
                    this._createCluster(this.gridClusters[i]);
                }
            }

        },

        _createClusterGrid: function (webExtent) {

            //get the total amount of grid spaces based on the height and width of the map (divide it by clusterRatio) - then get the degrees for x and y 
            var xCount = Math.round(this.map.width / this.clusterRatio);
            var yCount = Math.round(this.map.height / this.clusterRatio);

            //if the extent has been unioned due to normalization, double the count of x in the cluster grid as the unioning will halve it.
            if (this.extentIsUnioned) {
                xCount *= 2;
            }

            var xw = (webExtent.xmax - webExtent.xmin) / xCount;
            var yh = (webExtent.ymax - webExtent.ymin) / yCount;

            var gsxmin, gsxmax, gsymin, gsymax;

            //create an array of clusters that is a grid over the visible extent. Each cluster contains the extent (in web merc) that bounds the grid space for it.
            this.gridClusters = [];
            for (var i = 0; i < xCount; i++) {
                gsxmin = webExtent.xmin + (xw * i);
                gsxmax = gsxmin + xw;
                for (var j = 0; j < yCount; j++) {
                    gsymin = webExtent.ymin + (yh * j);
                    gsymax = gsymin + yh;
                    var ext = new Extent({xmin: gsxmin, xmax: gsxmax, ymin: gsymin, ymax: gsymax});
                    ext.setSpatialReference(new SpatialReference({"wkid": 102100}));
                    this.gridClusters.push({
                        extent: ext,
                        clusterCount: 0,
                        subTypeCounts: [],
                        singles: [],
                        points: []
                    });
                }
            }
        },

        _createSingle: function (single) {
            this.singles.push(single);
            delete single.graphic;
            var point = new Point(single[this.xPropertyName], single[this.yPropertyName], this.spatialRef);
            var attributes = lang.clone(single);
            var graphic = new Graphic(point, null, attributes, null);
            single.graphic = graphic;
            this.add(graphic);
        },

        _createCluster: function (cluster) {

            this.clusters.push(cluster);

            //add the graphic using the Graphics Layer add
            var point = new Point(cluster.x, cluster.y, this.spatialRef);

            //clear some props as we may be recreating the cluster
            delete cluster.graphic;
            delete cluster.graphicShape;
            delete cluster.groupShape;

            var attributes = {
                x: cluster.x,
                y: cluster.y,
                clusterCount: cluster.clusterCount
            }

            var areaGraphic;
            if (this.clusterAreaDisplay && cluster.points && cluster.points.length > 0) {
                if (!this.clusterAreaRenderer) {
                    console.error("_createCluster: clusterAreaRenderer must be set if clusterAreaDisplay is set.");
                    return;
                }

                var mp = new Multipoint(this.spatialRef);
                mp.points = cluster.points;
                var area = geometryEngine.convexHull(mp, true); //use convex hull on the points to get the boundary
                var areaAttr = lang.clone(attributes);
                areaAttr.isClusterArea = true;
                areaGraphic = new Graphic(area, null, areaAttr, null);
                areaGraphic.setSymbol(this.clusterAreaRenderer.getSymbol(areaGraphic));
                this.add(areaGraphic);
                areaGraphic.hide();
            }

            attributes.isCluster = true;
            var graphic = new Graphic(point, null, attributes, null);
            cluster.graphic = graphic;
            cluster.areaGraphic = areaGraphic;
            this.add(graphic);

        },

        _createClusterGraphic: function (cluster) {

            if (cluster.groupShape) {
                dojo.destroy(cluster.groupShape.rawNode);
            }

            //create a group element to hold the cluster and text and other things
            var groupShape = this.surface.createGroup();

            //Note: dojo.addClass() doesn't seem to work on svg elements, that's why all the setAttributes for each shape.
            groupShape.rawNode.setAttribute("class", "cluster-group cluster-object");
            cluster.groupShape = groupShape;

            //append the group to this layer's node
            var layerNode = this.getNode();
            layerNode.appendChild(groupShape.rawNode);

            var gShape = cluster.graphic.getShape();
            if (!gShape) {
                return; //couldn't get the graphic shape that was just added, it's probably not visible on the map
            }

            //add an area graphic first if one has been set
            var areaShape;
            if (cluster.areaGraphic) {
                if (this.clusterAreaDisplay === 'always') {
                    cluster.areaGraphic.show();
                }
                areaShape = cluster.areaGraphic.getShape();
                if (areaShape) {
                    areaShape.rawNode.setAttribute("pointer-events", "none");
                }
            }

            cluster.graphicShape = gShape;
            cluster.graphicShape.rawNode.setAttribute("class", "cluster-object");
            groupShape.add(cluster.graphicShape);

            //add a text element for the label to display the count and add to the group
            var shapeCenter = this._getShapeCenter(cluster.graphicShape);
            var textShape = groupShape.createText({
                x: shapeCenter.x,
                y: shapeCenter.y + (this.textSymbol.font.size / 2 - 2),
                text: cluster.clusterCount,
                align: 'middle'
            })
                .setFont({
                    size: this.textSymbol.font.size,
                    family: this.textSymbol.font.family,
                    weight: this.textSymbol.font.weight
                })
                .setFill(this.textSymbol.color);
            textShape.rawNode.setAttribute("class", "cluster-text-counts");
            textShape.rawNode.setAttribute("pointer-events", "none"); //remove pointer events from text
            groupShape.add(textShape);
            cluster.textShape = textShape;

            var anims = [];
            //animate drawing of the cluster. 
            var create = fx.animateTransform({
                duration: 200,
                shape: groupShape,
                transform: [
                    {
                        name: "scaleAt",
                        start: [0, 0, shapeCenter.x, shapeCenter.y],
                        end: [1, 1, shapeCenter.x, shapeCenter.y]
                    }
                ],
                onEnd: dojo.partial(this._animationEnd, this)
            });
            anims.push(create);

            //animate area drawing if it is visible now
            if (this.clusterAreaDisplay === 'always' && areaShape) {
                var areaCenter = this._getShapeCenter(areaShape);
                var areaCreate = fx.animateTransform({
                    duration: 200,
                    shape: areaShape,
                    transform: [
                        {
                            name: "scaleAt",
                            start: [0, 0, areaCenter.x, areaCenter.y],
                            end: [1, 1, areaCenter.x, areaCenter.y]
                        }
                    ],
                    onEnd: dojo.partial(this._animationEnd, this)
                });
                anims.push(areaCreate);
            }

            this._playAnimations(anims, this.animationMultipleType.combine);

            //add events
            if (this.flareShowMode === "mouse") {
                this.graphicEvents.push(on(groupShape, "mouseleave", lang.hitch(this, this._clearActiveCluster)));
            }
        },

        _activateCluster: function (graphic) {

            var cluster = this._getClusterFromGraphic(graphic);
            if (!cluster) {
                return;
            }

            if (this.activeCluster) {
                this._clearActiveCluster();
            }

            this.activeCluster = cluster;

            var groupShape = cluster.groupShape;
            var graphicShape = cluster.graphicShape;
            groupShape.moveToFront();
            var center = this._getShapeCenter(graphicShape);

            var scaleAnims = [];
            if (this.clusterAreaDisplay === 'hover') {
                cluster.areaGraphic.show();
                var areaDisplay = fx.animateTransform({
                    duration: 300,
                    shape: cluster.areaGraphic.getShape(),
                    transform: [
                        {name: "scaleAt", start: [0, 0, center.x, center.y], end: [1, 1, center.x, center.y]}
                    ],
                    onEnd: dojo.partial(this._animationEnd, this)
                });
                scaleAnims.push(areaDisplay);
            }

            var scaleUp = fx.animateTransform({
                duration: 400,
                shape: groupShape,
                transform: [
                    {name: "scaleAt", start: [1, 1, center.x, center.y], end: [1.3, 1.3, center.x, center.y]}
                ],
                onEnd: dojo.partial(this._animationEnd, this)
            });

            scaleAnims.push(scaleUp);

            this._playAnimations(scaleAnims, this.animationMultipleType.combine);

            //Add applicable flare graphics

            //array to hold the flare object data
            this.flareObjects = [];

            //check if we need to create flares for the cluster
            var singleFlares = (cluster.singles && cluster.singles.length > 0) && (cluster.clusterCount <= this.displaySingleFlaresAtCount);
            var subTypeFlares = !singleFlares && (this.displaySubTypeFlares && this.subTypeFlareProperty && (cluster.subTypeCounts && cluster.subTypeCounts.length > 0));

            if (!singleFlares && !subTypeFlares) {
                return;
            }

            //create and add a graphic to represent the flare circle
            var bbox = graphicShape.getBoundingBox();
            var radius = 8;
            var buffer = 4;

            var flareSymbol = new SimpleMarkerSymbol()
                .setStyle(SimpleMarkerSymbol.STYLE_CIRCLE)
                .setSize(radius * 2);

            //create a transparent circle that contains the boundary of the flares, this is to make sure the mouse events don't fire moving in between flares
            var conCircleRadius = (center.x - (bbox.x - radius - buffer)) + radius; //get the radius of the circle to contain everything
            var containerCircle = groupShape.createCircle({cx: center.x, cy: center.y, r: conCircleRadius})
                //.setStroke({ width: 1, color: "000" })
                .setFill(new Color([0, 0, 0, 0]));
            containerCircle.rawNode.setAttribute("class", "flare-object cluster-object");

            //array to hold the animations for displaying flares
            var stAnims = [];

            if (singleFlares) {
                for (var i = 0, len = cluster.singles.length; i < len; i++) {
                    delete cluster.singles[i].graphic;
                    this.flareObjects.push({
                        tooltipText: cluster.singles[i][this.singleFlareTooltipProperty],
                        flareText: "",
                        color: this.flareColor,
                        singleData: cluster.singles[i],
                        strokeWidth: 2
                    });
                }
            } else if (subTypeFlares) {

                //sort sub types by highest count first
                var subTypes = cluster.subTypeCounts.sort(function (a, b) {
                    return b.count - a.count;
                });

                for (i = 0, len = subTypes.length; i < len; i++) {
                    this.flareObjects.push({
                        tooltipText: subTypes[i].count + " - " + subTypes[i].name,
                        flareText: subTypes[i].count,
                        color: this.flareColor,
                        strokeWidth: 1
                    });
                }
            }

            //if there are more flare objects to create that the maxFlareCount and this is a one of those - create a summary flare that contains '...' as the text and make this one part of it 
            var willContainSummaryFlare = this.flareObjects.length > this.maxFlareCount;
            var flareCount = willContainSummaryFlare ? this.maxFlareCount : this.flareObjects.length;

            //get the surface translate values if any
            var surfaceTranslate = this._getSurfaceTranslate();

            //if there's an even amount of flares, position the first flare to the left, minus 180 from degree to do this.
            //for an add amount position the first flare on top, -90 to do this. Looks more symmetrical this way.
            var degreeVariance = (flareCount % 2 === 0) ? -180 : -90;
            for (i = 0, len = flareCount; i < len; i++) {

                //exit if we've hit the maxFlareCount - a summary would have been created on the last one
                if (i >= this.maxFlareCount) {
                    break;
                }

                var fo = this.flareObjects[i];

                //Do a couple of things differently if this is a summary flare or not
                var tooltipText = "";
                var isSummaryFlare = willContainSummaryFlare && i >= this.maxFlareCount - 1;
                if (isSummaryFlare) {
                    fo.color = this.flareColor;
                    fo.isSummaryFlare = true;

                    //multiline tooltip for summary flares, ie: greater than this.maxFlareCount flares per cluster
                    for (var j = this.maxFlareCount - 1, jlen = this.flareObjects.length; j < jlen; j++) {
                        tooltipText += j > (this.maxFlareCount - 1) ? "\n" : "";
                        tooltipText += this.flareObjects[j].tooltipText;
                    }
                } else {
                    tooltipText = fo.tooltipText;
                }

                //get the position of the flare to be placed around the container circle.
                var degree = parseInt(((360 / len) * i).toFixed());
                degree = degree + degreeVariance;

                var radian = degree * (Math.PI / 180);
                fo.degree = degree;
                fo.radius = radius;
                fo.center = {
                    x: center.x + (conCircleRadius - radius) * Math.cos(radian),
                    y: center.y + (conCircleRadius - radius) * Math.sin(radian)
                };

                //create a group to hold the flare objects
                var flareGroup = groupShape.createGroup();

                //add a graphic for the flare
                var sym = lang.clone(flareSymbol);
                sym.setColor(fo.color).setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, this.textSymbol.color, fo.strokeWidth));

                //get the map point from the flare group center
                var matrix = flareGroup.rawNode.getScreenCTM();
                var pt = this.surface.rawNode.createSVGPoint();
                pt.x = fo.center.x;
                pt.y = fo.center.y;
                var screenPoint = pt.matrixTransform(matrix);

                //ScreenPoint needs to be relative to the top-left corner of the map control.
                //The matrixTransform on pt gives us a point based on the screen coordinate system.
                //Therefore if the map has a top offset applied to it the fo object will appear in 
                //an incorrect spot on the map.  We must apply the offset to both the x and y points
                //to ensure the point is relative to the map control.
                //As of v3.18 also apply need to apply the surface translate values that may have been created by the api during panning.
                var offsets = this.surface.rawNode.getBoundingClientRect();
                var sp = new ScreenPoint(screenPoint.x - offsets.left + surfaceTranslate.x, screenPoint.y - offsets.top + surfaceTranslate.y);
                fo.mapPoint = this.map.toMap(sp);

                var attributes = fo.singleData ? lang.clone(fo.singleData) : {};
                attributes.isFlare = true;
                var flareGraphic = new Graphic(fo.mapPoint, sym, attributes, null);
                this.add(flareGraphic);
                var flareCircle = flareGraphic.getShape();
                if (!flareCircle) {
                    return;
                }
                flareGroup.rawNode.appendChild(flareCircle.rawNode);

                if (fo.flareText) {
                    //if displaying text in the flare, 
                    flareGroup.flareText = {
                        location: {x: fo.center.x, y: fo.center.y + (radius / 2 - 1)},
                        text: !isSummaryFlare ? fo.flareText : "...",
                        textSize: !isSummaryFlare ? 7 : 10
                    };
                }

                flareGroup.setTransform({xx: 0, yy: 0});//scale to 0 to start with
                flareGroup.rawNode.setAttribute("class", "flare-object cluster-object");
                flareCircle.rawNode.setAttribute("class", "flare-graphic cluster-object");
                flareGroup.rawNode.setAttribute("data-tooltip", tooltipText);

                //add an animation to display the flare
                var anim = fx.animateTransform({
                    duration: 50,
                    shape: flareGroup,
                    transform: [
                        {
                            name: "scaleAt",
                            start: [0, 0, fo.center.x, fo.center.y],
                            end: [1, 1, fo.center.x, fo.center.y]
                        }
                    ],
                    onEnd: dojo.partial(this._animationEnd, this)
                });

                stAnims.push(anim);

                flareGroup.rawNode.setAttribute("data-center-x", fo.center.x);
                flareGroup.rawNode.setAttribute("data-center-y", fo.center.y);
                fo.flareGroupShape = flareGroup;
            }

            this._playAnimations(stAnims, this.animationMultipleType.chain);

        },

        _showFlareDetail: function (graphic) {
            var flareObject = this._getFlareFromGraphic(graphic);

            if (this.activeFlareObject && flareObject !== this.activeFlareObject) {
                this._hideFlareDetail();
            }

            this.activeFlareObject = flareObject;
            this._createTooltip(flareObject.flareGroupShape);

        },

        _getInfoWindowAnchor: function (degree) {
            //set the anchor based on the degree, so the cluster is not covered by the info window
            if (degree === -180) {
                return "left";
            } else if (degree > -10 && degree < 10) {
                return "right";
            } else if (degree > -260 && degree < -170) {
                return "left";
            } else if (degree <= -90) {
                return "top-left";
            } else if (degree > -90 && degree <= 0) {
                return "top-right";
            } else if (degree > 0 && degree <= 90) {
                return "bottom-right";
            } else {
                return "bottom-left";
            }
        },

        _hideFlareDetail: function () {

            if (!this.activeFlareObject) {
                return;
            }

            var flareObject = this.activeFlareObject;
            this._destroyTooltip(flareObject.flareGroupShape);
            this.activeFlareObject = null;

        },

        _clearActiveCluster: function (e) {

            if (!this.activeCluster) {
                return;
            }
            if (e) {
                var currentElement = e.toElement || e.relatedTarget;
                if (currentElement && (currentElement.parentElement === this.map.infoWindow.domNode || (currentElement.parentElement && currentElement.parentElement.parentElement === this.map.infoWindow.domNode))) {
                    return;
                }
            }

            if (this.map.infoWindow.cluster) {
                this.map.infoWindow.hide();
            }

            var cluster = this.activeCluster;
            this._hideFlareDetail();

            var groupShape = cluster.groupShape;
            var graphicShape = cluster.graphicShape;

            var center = this._getShapeCenter(graphicShape);

            var scaleAnims = [];
            if (this.clusterAreaDisplay === 'hover') {
                var areaHide = fx.animateTransform({
                    duration: 600,
                    shape: cluster.areaGraphic.getShape(),
                    transform: [
                        {name: "scaleAt", start: [1, 1, center.x, center.y], end: [0, 0, center.x, center.y]}
                    ],
                    onEnd: dojo.partial(this._animationEnd, this)
                });

                scaleAnims.push(areaHide);
            }

            var scaleDown = fx.animateTransform({
                duration: 400,
                shape: groupShape,
                transform: [
                    {name: "scaleAt", start: [1.3, 1.3, center.x, center.y], end: [1, 1, center.x, center.y]}
                ],
                onEnd: dojo.partial(this._animationEnd, this)
            });

            scaleAnims.push(scaleDown);

            this._playAnimations(scaleAnims, this.animationMultipleType.combine);

            //destroy any flares
            for (var i = 0, len = this.graphics.length; i < len; i++) {
                if (this.graphics[i].attributes.isFlare) {
                    this.remove(this.graphics[i]);
                    len--;
                    i--;
                }
            }
            dojo.query(".flare-object", groupShape.rawNode).forEach(dojo.destroy);
            this.activeCluster = null;
        },

        _createTooltip: function (shape) {

            var tooltipLength = dojo.query(".tooltip-text", shape.rawNode).length;
            if (tooltipLength > 0) {
                return;
            }

            //get the text from the data-tooltip attribute of the shape object
            var text = shape.rawNode.getAttribute("data-tooltip");
            if (!text) {
                console.log("no data-tooltip attribute on element");
                return;
            }

            //split on /n character that should be in tooltip to signify multiple lines
            var lines = text.split("\n");

            //read the center positions from the shape, attributes must be set on whatever node is being passed in. Calculating from getboundingBox wasn't working for some reason
            var xPos = parseInt(shape.rawNode.getAttribute("data-center-x"));
            var yPos = parseInt(shape.rawNode.getAttribute("data-center-y")) + 18; //align underneath, could be changed to be wherever

            //create a group to hold the tooltip elements
            var tooltipGroup = shape.createGroup({x: xPos, y: yPos});
            tooltipGroup.rawNode.setAttribute("class", "tooltip-text");

            var textShapes = [];
            for (var i = 0, len = lines.length; i < len; i++) {
                var textShape = tooltipGroup.createText({x: xPos, y: yPos + (i * 10), text: lines[i], align: 'middle'})
                    .setFill("#000")
                    .setFont({size: 8, family: this.textSymbol.font.family, weight: this.textSymbol.font.weight});
                textShapes.push(textShape);
                textShape.rawNode.setAttribute("pointer-events", "none");
            }

            var rectPadding = 2;
            var textBox = tooltipGroup.getBoundingBox();
            var rectShape = tooltipGroup.createRect({
                x: textBox.x - rectPadding,
                y: textBox.y - rectPadding,
                width: textBox.width + (rectPadding * 2),
                height: textBox.height + (rectPadding * 2),
                r: 0
            })
                .setFill(new Color([255, 255, 255, 0.9]))
                .setStroke({color: "#000", width: 0.5});
            rectShape.rawNode.setAttribute("pointer-events", "none");

            shape.moveToFront();
            for (i = 0, len = textShapes.length; i < len; i++) {
                textShapes[i].moveToFront();
            }

        },

        _destroyTooltip: function (shape) {
            dojo.query(".tooltip-text", shape.rawNode).forEach(dojo.destroy);
        },

        _removeCluster: function (cluster) {
            //remove the cluster completely
            for (var i = 0, len = this.clusters.length; i < len; i++) {
                if (this.clusters[i] === cluster) {
                    this.clusters.splice(i, 1);
                    i--;
                    len--;
                }
            }
            this.remove(cluster.graphic);
            dojo.destroy(cluster.groupShape.rawNode);
        },

        //#endregion

        //#region helper methods 

        _getGraphicFromObject: function (obj) {
            //return the graphic from the obj which could be a single or cluster object
            for (var i = 0, len = this.graphics.length; i < len; i++) {
                var g = this.graphics[i];
                if (g.attributes[this.xPropertyName] === obj[this.xPropertyName] && g.attributes[this.yPropertyName] === obj[this.yPropertyName]) {
                    return g;
                }
            }
            return null;
        },

        _getClusterFromGraphic: function (graphic) {
            //return the obj which could be a single or cluster object, based on the graphic
            for (var i = 0, len = this.clusters.length; i < len; i++) {
                var cl = this.clusters[i];
                if (cl.graphic === graphic || (graphic.attributes.x === cl.x && graphic.attributes.y === cl.y)) {
                    cl.graphic = graphic;
                    return cl;
                }
            }
            return null;
        },

        _getClusterFromGroupNode: function (groupNode) {
            for (var i = 0, len = this.clusters.length; i < len; i++) {
                if (this.clusters[i].groupShape.rawNode === groupNode) {
                    return this.clusters[i];
                }
            }
        },

        _getFlareFromGraphic: function (graphic) {
            //return the obj which could be a single or cluster object, based on the graphic
            for (var i = 0, len = this.flareObjects.length; i < len; i++) {
                var fl = this.flareObjects[i];
                if (fl.singleData && (fl.singleData[this.xPropertyName] === graphic.attributes[this.xPropertyName] && fl.singleData[this.yPropertyName] === graphic.attributes[this.yPropertyName]) &&
                    (this.idPropertyName === null || fl.singleData[this.idPropertyName] === graphic.attributes[this.idPropertyName])) {
                    return fl;
                }

                if (graphic.geometry.x === fl.mapPoint.x && graphic.geometry.y === fl.mapPoint.y) {
                    return fl;
                }
            }
            return null;
        },

        _getShapeCenter: function (shape) {
            var bbox = shape.getBoundingBox();
            x = bbox.x + bbox.width / 2;
            y = bbox.y + bbox.height / 2
            return {x: x, y: y};
        },

        _getSurfaceTranslate: function () {
            var translate = {
                x: 0,
                y: 0
            };

            //check if we could find a translate style property on the surface.
            if (!this.surface || !this.surface.rawNode || !this.surface.rawNode.style.transform || this.surface.rawNode.style.transform.indexOf("translate") === -1) return translate;

            //parse the values from the translate string. Using some basic string manipulation, some regex guru could tidy this up I would think.
            var transform = this.surface.rawNode.style.transform;
            transform = transform.replace("translate(", "").replace(")", "");
            var vals = transform.split(",");
            if (vals.length !== 2) return translate;
            vals[0] = parseInt(vals[0].replace("px", ""));
            vals[1] = parseInt(vals[1].replace("px", ""));
            translate.x = vals[0];
            translate.y = vals[1];
            return translate;
        },

        _animationEnd: function (layer) {
            //scope: 'this' is the animation that triggered the event, 'layer' is the flare cluster layer object instance

            //IE10 and below Fix - have to manually set transform back to 1 on elements. They don't seem to appear all of the time again after beign animated back to 
            //a scale of 1. IE sucks.
            dojo.query("> *", this.shape.rawNode).forEach(function (elem) {
                if (!elem.__gfxObject__) return;
                //put this in a slight timeout, otherwise the display can get a tiny bit jittery.
                setTimeout(function () {
                    if (elem.__gfxObject__) {
                        elem.__gfxObject__.setTransform({xx: 1, yy: 1});
                    }
                }, 50);
            });

            //Here's a hack for Edge. Good to see there's no need to do special hacks for MS browsers anymore. WTF.
            //Have to add the flare text after the flare group animation otherwise Edge just reloads the page and dies for some reason?
            if (this.shape.flareText) {
                var flareText = this.shape.createText({
                    x: this.shape.flareText.location.x,
                    y: this.shape.flareText.location.y,
                    text: this.shape.flareText.text,
                    align: 'middle'
                })
                    .setFill(layer.textSymbol.color)
                    .setFont({
                        size: this.shape.flareText.textSize,
                        family: layer.textSymbol.font.family,
                        weight: layer.textSymbol.font.weight
                    });

                flareText.rawNode.setAttribute("class", "flare-text-counts");
                flareText.rawNode.setAttribute("pointer-events", "none"); //remove pointer events from text
                flareText.moveToFront();
            }

            for (var i = 0, len = layer.animationsRunning.length; i < len; i++) {
                if (layer.animationsRunning[i] === this) {
                    layer.animationsRunning.splice(i, 1);
                    return;
                }
            }

        },

        _playAnimations: function (animations, type) {
            if (type === this.animationMultipleType.combine) {
                coreFx.combine(animations).play();
            } else if (type === this.animationMultipleType.chain) {
                coreFx.chain(animations).play();
            } else {
                for (var i = 0, len = animations.length; i < len; i++) {
                    animations[i].play();
                }
            }

            this.animationsRunning = this.animationsRunning.concat(animations);
        },

        _stopAnimations: function () {
            for (var i = 0, len = this.animationsRunning.length; i < len; i++) {
                this.animationsRunning[i].stop();
            }
            this.animationsRunning = [];
        },

        //#endregion
    });
});

 public/map/widgets/securityMap/SecurityMap.css

 public/map/widgets/securityMap/SecurityMap.js

New file
@@ -0,0 +1,358 @@
/*
 * @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;
});

 public/map/widgets/securityMap/config.js

New file
@@ -0,0 +1,13 @@
/*
 * @Description:
 * @Version: 1.0
 * @Author: yangsx
 * @Date: 2019-12-09 19:01:40
 * @LastEditors: yangsx
 * @LastEditTime: 2019-12-14 10:00:41
 */
define([], function() {
  var config = {};

  return config;
});

 public/map/widgets/securityMap/template.html

New file
@@ -0,0 +1 @@
<div></div>

 src/api/security/security.js

@@ -1,50 +1,49 @@
import request from '@/router/axios';

export const getList = (current, size, params) => {
  return request({
    url: '/api/blade-jfpts/security/security/page',
    method: 'get',
    params: {
      ...params,
      current,
      size,
    }
  })
    return request({
        url: '/api/blade-user/security-list?roleId=1370562810882502657',
        method: 'get',
        params: {
            ...params,
            current,
            size,
        }
    })
}

export const getDetail = (id) => {
  return request({
    url: '/api/blade-jfpts/security/security/detail',
    method: 'get',
    params: {
      id
    }
  })
    return request({
        url: '/api/blade-jfpts/security/security/detail',
        method: 'get',
        params: {
            id
        }
    })
}

export const remove = (ids) => {
  return request({
    url: '/api/blade-jfpts/security/security/remove',
    method: 'post',
    params: {
      ids,
    }
  })
    return request({
        url: '/api/blade-jfpts/security/security/remove',
        method: 'post',
        params: {
            ids,
        }
    })
}

export const add = (row) => {
  return request({
    url: '/api/blade-jfpts/security/security/submit',
    method: 'post',
    data: row
  })
    return request({
        url: '/api/blade-jfpts/security/security/submit',
        method: 'post',
        data: row
    })
}

export const update = (row) => {
  return request({
    url: '/api/blade-jfpts/security/security/submit',
    method: 'post',
    data: row
  })
}

    return request({
        url: '/api/blade-jfpts/security/security/submit',
        method: 'post',
        data: row
    })
}

 src/views/security/security.vue

@@ -1,30 +1,12 @@
<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
    <avue-crud :option="option" :table-loading="loading" :data="data" :page="page" :permission="permissionList"
               :before-open="beforeOpen" v-model="form" ref="crud" @row-update="rowUpdate" @row-save="rowSave" @row-del="rowDel"
               @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange" @current-change="currentChange"
               @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad">
      <template slot="menuLeft">
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   plain
                   v-if="permission.security_delete"
                   @click="handleDelete">删 除
        <el-button type="danger" size="small" icon="el-icon-delete" plain v-if="permission.security_delete" @click="handleDelete">删
          除
        </el-button>
      </template>

@@ -36,36 +18,29 @@
      </template>

      <template slot-scope="{ type, size, row }" slot="menu">
        <el-button
          icon="el-icon-location-outline"
          :size="size"
          :type="type"
          @click.stop="handleMap(row)"
        >定位
        <el-button icon="el-icon-location-outline" :size="size" :type="type" @click.stop="handleMap(row)">编辑电子围栏
        </el-button>
      </template>
    </avue-crud>

    <el-drawer
      title="电子地图"
      append-to-body="true"
      :visible.sync="showMap"
    >
      <iframe
        id="mapDiv"
        ref="mapDiv"
        src="/map/index.html?openid=APoliceTeam&ISinit=1"
        frameborder="0"
        width="100%"
        height="100%"
      ></iframe>
    <el-drawer title="电子地图" append-to-body="true" :visible.sync="showMap">
      <iframe id="mapDiv" ref="mapDiv" src="/map/index.html?openid=scurityMap&ISinit=1" frameborder="0" width="100%"
              height="100%"></iframe>
    </el-drawer>
  </basic-container>
</template>

<script>
  import {getList, getDetail, add, update, remove} from "@/api/security/security";
  import {mapGetters} from "vuex";
  import {
    getList,
    getDetail,
    add,
    update,
    remove
  } from "@/api/security/security";
  import {
    mapGetters
  } from "vuex";

  export default {
    data() {
@@ -81,7 +56,7 @@
        },
        selectionList: [],
        option: {
          height:'auto',
          height: 'auto',
          calcHeight: 30,
          tip: false,
          searchShow: true,
@@ -91,10 +66,18 @@
          viewBtn: true,
          selection: true,
          dialogClickModal: false,
          column: [
          column: [{
            label: "账号",
            prop: "account",
            rules: [{
              required: true,
              message: "请输入账号",
              trigger: "blur"
            }]
          },
            {
              label: "人员编号",
              prop: "snumber",
              prop: "code",
              search: true,
              rules: [{
                required: true,
@@ -103,8 +86,8 @@
              }]
            },
            {
              label: "人员名称",
              prop: "sname",
              label: "人员姓名",
              prop: "realName",
              search: true,
              rules: [{
                required: true,
@@ -116,25 +99,15 @@
              label: "性别",
              prop: "sex",
              type: "select",
              dicData: [
                {
                  label: "男",
                  value: "0"
                },
              dicData: [{
                label: "男",
                value: 1
              },
                {
                  label: "女",
                  value: "1"
                  value: 2
                },
              ],
            },
            {
              label: "年龄",
              prop: "age",
              rules: [{
                required: true,
                message: "请输入年龄",
                trigger: "blur"
              }]
            },
            {
              label: "联系电话",
@@ -146,24 +119,33 @@
              }]
            },
            {
              label: "家庭住址",
              prop: "address",
              label: "邮箱",
              prop: "email",
              rules: [{
                required: true,
                message: "请输入家庭住址",
                message: "请输入邮箱",
                trigger: "blur"
              }]
            },
            {
              label: "录用时间",
              prop: "stime",
              display: false,
              label: "生日",
              prop: "birthday",
              rules: [{
                required: true,
                message: "请输入录用时间",
                message: "请选择",
                trigger: "blur"
              }]
            },
            {
              label: "创建时间",
              prop: "createTime",
              display: false,
              rules: [{
                required: true,
                message: "请选择创建时间",
                trigger: "blur"
              }]
            }
          ]
        },
        data: []
@@ -232,12 +214,16 @@
          });
      },
      handleMap(row) {
        debugger
        this.showMap = true;
        console.log("row.id="+row.id);
        console.log("row.wd="+row.wd);
        this.$nextTick(() => {
          this.$refs.mapDiv.onload = () => {
            window.frames[0].init(null,{x: row.jd, y: row.wd});

            window.frames[0].init("SecurityMap", {
              x: row.jd,
              y: row.wd,
              code:row.code
            });
          };
        })
      },
@@ -288,10 +274,10 @@
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },
      currentChange(currentPage){
      currentChange(currentPage) {
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize){
      sizeChange(pageSize) {
        this.page.pageSize = pageSize;
      },
      refreshChange() {

 vue.config.js

@@ -7,42 +7,42 @@
 * @LastEditTime: 2021-01-29 15:58:39
 */
module.exports = {
  //路径前缀
  publicPath: "./",
  lintOnSave: true,
  productionSourceMap: false,
  chainWebpack: (config) => {
    //忽略的打包文件
    config.externals({
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'vuex': 'Vuex',
      'axios': 'axios',
      'element-ui': 'ELEMENT',
    });
    const entry = config.entry('app');
    entry.add('babel-polyfill').end();
    entry.add('classlist-polyfill').end();
    entry.add('@/mock').end();
  },
  css: {
    extract: { ignoreOrder: true }
  },
  //开发模式反向代理配置，生产模式请使用Nginx部署并配置反向代理
  devServer: {
    port: 1888,
    proxy: {
      '/api': {
        //本地服务接口地址
        //target: 'http://localhost:82/',
        target: 'https://web.byisf.com/api/',
        //远程演示服务地址,可用于直接启动项目
        //target: 'https://saber.bladex.vip/api',
        ws: true,
        pathRewrite: {
          '^/api': '/'
    //路径前缀
    publicPath: "./",
    lintOnSave: true,
    productionSourceMap: false,
    chainWebpack: (config) => {
        //忽略的打包文件
        config.externals({
            'vue': 'Vue',
            'vue-router': 'VueRouter',
            'vuex': 'Vuex',
            'axios': 'axios',
            'element-ui': 'ELEMENT',
        });
        const entry = config.entry('app');
        entry.add('babel-polyfill').end();
        entry.add('classlist-polyfill').end();
        entry.add('@/mock').end();
    },
    css: {
        extract: { ignoreOrder: true }
    },
    //开发模式反向代理配置，生产模式请使用Nginx部署并配置反向代理
    devServer: {
        port: 1888,
        proxy: {
            '/api': {
                //本地服务接口地址
                target: 'http://localhost:82/',
                //target: 'https://web.byisf.com/api/',
                //远程演示服务地址,可用于直接启动项目
                //target: 'https://saber.bladex.vip/api',
                ws: true,
                pathRewrite: {
                    '^/api': '/'
                }
            }
        }
      }
    }
  }
};
};