地图模式得相关修改

shuishen

2021-04-09 6319eb9fd0df70d237abcf2f270e7d8703f59cad

地图模式得相关修改

 public/map/images/dx-jingbao.png

 public/map/images/zx-jingbao.png

 public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js

@@ -58,7 +58,9 @@

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

@@ -204,7 +206,10 @@
                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});
        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);
@@ -243,7 +248,9 @@
            }

            //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}));
      var webExtent = webMercatorUtils.project(map.extent, new SpatialReference({
        "wkid": 102100
      }));
            if (!this.gridClusters || this.gridClusters.length === 0) {
                this._createClusterGrid();
            }
@@ -298,7 +305,10 @@
                    }
                }
                if (!subTypeExists) {
                    cl.subTypeCounts.push({name: obj[this.subTypeFlareProperty], count: 1});
          cl.subTypeCounts.push({
            name: obj[this.subTypeFlareProperty],
            count: 1
          });
                }

                cl.singles.push(obj);
@@ -517,7 +527,9 @@
            //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 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];

@@ -577,7 +589,10 @@
                        }
                    }
                    if (!subTypeExists) {
                        cl.subTypeCounts.push({name: obj[this.subTypeFlareProperty], count: 1});
            cl.subTypeCounts.push({
              name: obj[this.subTypeFlareProperty],
              count: 1
            });
                    }

                    cl.singles.push(obj);
@@ -618,8 +633,15 @@
                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}));
          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,
@@ -634,9 +656,16 @@
        _createSingle: function (single) {
            this.singles.push(single);
            delete single.graphic;
      var symbol;
      console.log(single.onlineStatus, 898989);
      if (single.onlineStatus == 1) {
        symbol = new esri.symbol.PictureMarkerSymbol("./images/zx-jingbao.png", 40, 40);
      } else {
        symbol = new esri.symbol.PictureMarkerSymbol("./images/dx-jingbao.png", 40, 40);
      }
            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);
      var graphic = new Graphic(point, symbol, attributes, null);
            single.graphic = graphic;
            this.add(graphic);
        },
@@ -747,13 +776,11 @@
            var create = fx.animateTransform({
                duration: 200,
                shape: groupShape,
                transform: [
                    {
        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);
@@ -764,13 +791,11 @@
                var areaCreate = fx.animateTransform({
                    duration: 200,
                    shape: areaShape,
                    transform: [
                        {
          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);
@@ -808,9 +833,11 @@
                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]}
                    ],
          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);
@@ -819,9 +846,11 @@
            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]}
                ],
        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)
            });

@@ -853,7 +882,11 @@

            //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})
      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");
@@ -973,13 +1006,19 @@
                if (fo.flareText) {
                    //if displaying text in the flare, 
                    flareGroup.flareText = {
                        location: {x: fo.center.x, y: fo.center.y + (radius / 2 - 1)},
            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.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);
@@ -988,13 +1027,11 @@
                var anim = fx.animateTransform({
                    duration: 50,
                    shape: flareGroup,
                    transform: [
                        {
          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)
                });

@@ -1081,9 +1118,11 @@
                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]}
                    ],
          transform: [{
            name: "scaleAt",
            start: [1, 1, center.x, center.y],
            end: [0, 0, center.x, center.y]
          }],
                    onEnd: dojo.partial(this._animationEnd, this)
                });

@@ -1093,9 +1132,11 @@
            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]}
                ],
        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)
            });

@@ -1137,14 +1178,26 @@
            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});
      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'})
        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});
          .setFont({
            size: 8,
            family: this.textSymbol.font.family,
            weight: this.textSymbol.font.weight
          });
                textShapes.push(textShape);
                textShape.rawNode.setAttribute("pointer-events", "none");
            }
@@ -1159,7 +1212,10 @@
                r: 0
            })
                .setFill(new Color([255, 255, 255, 0.9]))
                .setStroke({color: "#000", width: 0.5});
        .setStroke({
          color: "#000",
          width: 0.5
        });
            rectShape.rawNode.setAttribute("pointer-events", "none");

            shape.moveToFront();
@@ -1241,7 +1297,10 @@
            var bbox = shape.getBoundingBox();
            x = bbox.x + bbox.width / 2;
            y = bbox.y + bbox.height / 2
            return {x: x, y: y};
      return {
        x: x,
        y: y
      };
        },

        _getSurfaceTranslate: function () {
@@ -1275,7 +1334,10 @@
                //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});
            elem.__gfxObject__.setTransform({
              xx: 1,
              yy: 1
            });
                    }
                }, 50);
            });

 public/map/widgets/supervisoryMap/SupervisoryMap.js

@@ -59,7 +59,7 @@
  "esri/layers/ImageParameters",
  "esri/geometry/geometryEngine",
  "esri/dijit/PopupTemplate",
  "widgets/clientManagement/FlareClusterLayer_v3",
  "widgets/supervisoryMap/FlareClusterLayer_v3",
  "dojo/domReady!"
], function (
  dojo,

 src/views/supervisoryConsole/card.vue

@@ -146,11 +146,11 @@
          });
        } else if (this.radio == "仅显示预警设备") {
          res.data.data.forEach((item) => {
            if (item.state == "" && item.onlineStatus == 1) c.push(item);
            if (item.jtype == 1) c.push(item);
          });
        } else if (this.radio == "仅显示设备掉线") {
          res.data.data.forEach((item) => {
            if (item.state == "" && item.onlineStatus != 1) b.push(item);
            if (item.onlineStatus != 1) b.push(item);
          });
        } else if (this.radio == "仅显示设备故障") {
          res.data.data.forEach((item) => {