修改

zengh

2023-01-16 8aa3edd56c279100c9053576f3e90fa55459fe77

 public/map/widgets/supervisoryMap/FlareClusterLayer_v3.js

@@ -32,6 +32,9 @@
  PopupTemplate, GraphicsLayer
) {
  return declare([GraphicsLayer], {

    //聚合渲染data
    userState: '设备',
    constructor: function (options) {
      /* options description:
        spatialReference: default 102100. A SpatialReference object using the wkid of that data.
@@ -70,12 +73,19 @@
      this.maxFlareCount = options.maxFlareCount || 8;
      this.displaySingleFlaresAtCount = options.displaySingleFlaresAtCount || 8;
      this.singleFlareTooltipProperty = options.singleFlareTooltipProperty || null;
      var defaultTextSymbol = new TextSymbol()
      var defaultTextSymbol = new TextSymbol()//聚合字体
        .setColor(new Color([255, 255, 255]))
        .setAlign(Font.ALIGN_START)
        .setFont(new Font("10pt").setWeight(Font.WEIGHT_BOLD).setFamily("calibri"))
        // .setAlign(Font.ALIGN_START)//被否决
        .setOffset(+100, +10)//偏量
        // .setHaloSize(1)
        .setFont(new Font("15pt").setWeight(Font.WEIGHT_BOLD).setFamily("calibri"))
        .setSize("30")
        // .setOffsetY(-30)
        .setHorizontalAlignment("middle")
        .setVerticalAlignment("middle");
      defaultTextSymbol.font.size = 30;
      // defaultTextSymbol.font.size = 30;
      // defaultTextSymbol.yoffset = 10;
      // console.log(defaultTextSymbol,2123445453)
      this.textSymbol = options.textSymbol || defaultTextSymbol;
      this.flareShowMode = options.flareShowMode || "mouse";

@@ -167,60 +177,414 @@
        }
      }
    },
    _mapClick: function (e) { //地图全局点击事件 标记不能点击
      // console.log('地图全局点击事件');

    onClick: function (evt) {
      this._restoreInfoWindowSettings();
      if (!e.target) {
        return;
      }

      if (evt.graphic.attributes.isCluster) {
        evt.stopPropagation();
        //this._activateCluster(evt.graphic);
      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();
      } else if (evt.graphic.attributes.isFlare) {
        evt.stopPropagation();
      }
    },
    // zoomNum: this.map.getZoom(),
    indexs: null,
    onceTime: 300,//防抖定时
    onceTimeMethod: null,//防抖判断属性
    onClick: function (evt, und, indexControl) { //标志以及聚合表示点击事件// 弹窗
      var eour = evt.graphic.attributes.clusterCount;
      var mySelf = this;
      // console.log(und)
      if (und == '控制端') {//控制端弹窗关闭
        // parent[0].layer.close(indexControl);
        // parent[0].layer.close(+indexControl + 1);
      }

        var flareObject = this._getFlareFromGraphic(evt.graphic);
        if (!flareObject) {
          this._hideFlareDetail();
          this.map.infoWindow.hide();
          return;
      if (eour == undefined) {//判断是否是聚合状态
        // if(this.userState == '设备'){
        //   // console.log(this.userState)
        // }else if(this.userState == '警情'){
        //   // console.log(this.userState)
        // }else if(this.userState == '业主'){
        //   // console.log(this.userState)
        // }
        var dataO = evt;
        var aa = evt.graphic.screenX;
        var bb = evt.graphic.screenX;
        var data = {
          nums: evt.graphic.attributes.deviceNumber,
          nams: evt.graphic.attributes.deviceName,
          type: evt.graphic.attributes.jtype,
        }
        var cache = [];
        //解决重复JSON.stringify将循环结构转换为JSON。有几率出错，err：TypeError: Converting circular structure to JSON
        //舍弃上面方法，原因是对象里面嵌入对象，造成不能转换成JSON，吧对象去掉就好，
        var as = evt.graphic.attributes;
        var bs = {};
        for (let key in as) {
          if (typeof as[key] != 'object') {
            bs[key] = as[key]
            // as = as[key].attributes;
            // console.log('youduixang ')
            // break;
          }
        }
        var setdata = JSON.stringify(bs);
        cache = null;
        if (this.userState == '设备') {
          // console.log(this.userState)
          var fCard = (posi, setdata, winSize) => { // 设备弹窗函数
            var that = this,
              url = './popup/html/FlareClusterLayer_v3.html',
              clickD = null,
              clickG = null,
              downs = null,
              moves = null,
              ups = null;

            layui.use('layer', function () {
              that.layuiLayer = layui.layer;
              that.layuiLayer.config({
                extend: 'myskin/FlareClusterLayer.css'
              });
              that.layuiLayer.close(that.layuiLayer.index);
              //两个弹窗
              // that.layuiLayer.open({
              //   title: '',
              //   type: 2,
              //   shadeClose: false,
              //   shade: false,
              //   skin: 'demo-class',
              //   // id: 'onelyOne',
              //   maxmin: false, //开启最大化最小化按钮
              //   area: ['200px', '70px'],
              //   // area: 'auto',
              //   offset: posi,
              //   skin: 'flares',
              //   closeBtn: 0, //关闭按钮，可通过配置1和2来展示,0关闭
              //   content: [url, 'no'],
              //   resize: false,
              //   scrollbar: false,
              //   // tipsMore: true, //允许多个tipe
              //   // content: num,
              //   success: function (layero, index) {//成功后添加全局点击关闭
              //     // console.log(evt.graphic.attributes);
              //     $("#layui-layer-iframe" + index).contents().find("#input1").val(setdata);
              //     // console.log(layero, index);
              //     that.indexs = index;

              //     var isclickD = true
              //       , endx = null
              //       , endy = null;
              //     layero[0].style.position = 'absolute';

              //     downs = document.onmousedown = () => { //鼠标按下事件
              //       // console.log('down');//start
              //       // downs = document.onmousedown = null;
              //       var mx = window.event.clientX//鼠标初始位置
              //         , my = window.event.clientY
              //         , cx = this.offset[1].replace("px", "")//初始位置
              //         , cy = this.offset[0].replace("px", "");

              //       //判断鼠标是否在地图上
              //       // console.log(mx,'+',my);
              //       if (mx > 359 && mx < 1543 && my > 5 && my < 818) {
              //         // console.log('on map')
              //         if (endx != null && endy != null) {
              //           cx = endx;
              //           cy = endy;
              //         }
              //         moves = document.onmousemove = () => {//鼠标移动事件
              //           // console.log('move');//move
              //           // console.log(this.offset)
              //           var ux = window.event.clientX//记录实时位置
              //             , uy = window.event.clientY;
              //           endx = +cx + (ux - mx)// 初始位置+（鼠标初始位置-实时位置）
              //           endy = +cy + (uy - my);
              //           layero[0].style.left = endx + 'px';
              //           layero[0].style.top = endy + 'px';
              //           // console.log(+cx, +cy,'初始位置');
              //           // console.log(mx, my,'鼠标初始位置');
              //           // console.log(ux, uy,'记录实时位置');
              //           // console.log(ux, uy,'最后位置');
              //           isclickD = false;
              //           ups = document.onmouseup = () => {//鼠标抬起事件
              //             // console.log('up');//end
              //             // downs = document.onmousedown = null;
              //             moves = document.onmousemove = null;
              //             ups = document.onmouseup = null;
              //             var timess = setTimeout(() => {
              //               clearTimeout(timess);
              //               timess = null;
              //               isclickD = true;
              //             }, 1);
              //           }
              //         }
              //       }
              //     }
              //     clickD = document.onclick = () => {
              //       if (isclickD) {
              //         parent[0].layer.close(index);
              //         // parent[0].layer.close(+index + 1);
              //         // parent[0].layer.closeAll();
              //         // console.log(111111111111)
              //         clickD = document.onclick = null;
              //       }
              //     }

              //     var mouseWheel = that.map.on("mouse-wheel", myMouseWheelHandler);
              //     //鼠标滚轮事件
              //     function myMouseWheelHandler(event) {
              //       // console.log("Mouse wheel value = " + event.value);
              //       parent[0].layer.close(index);
              //       // parent[0].layer.close(+index + 1);
              //       mouseWheel.remove();
              //     }

              //   },
              //   end: function () { //关闭事件

              //   }
              // });
              that.layuiLayer.open({ //第二个iframe
                title: '',
                type: 2,
                shadeClose: true,
                shade: false,
                skin: 'demo-class',
                id: 'onelyTwo',
                maxmin: false, //开启最大化最小化按钮
                area: ['360px', '484px'],
                // area: 'auto',
                offset: winSize,
                skin: 'flare',
                isOutAnim: false,
                closeBtn: 2, //关闭按钮，可通过配置1和2来展示,0关闭
                content: ['./popup/html/FlareClusterLayer_v3 copy.html'],
                resize: false,
                scrollbar: false,
                // tipsMore: true, //允许多个tipe
                // content: num,
                success: function (layero, index) { //成功后添加全局点击关闭
                  // var z = document.onclick = ()=>{
                  //   parent[0].layer.close(index);
                  // //   // parent[0].layer.close(+index + 1);
                  //   z = null;
                  // }
                  //尝试传值
                  //js对象转json对象
                  // $("#layui-layer-iframe" + index).contents().find("input").val(JSON.stringify(evt.graphic.attributes));
                  $("#layui-layer-iframe" + index).contents().find("#sidIput").val(setdata);
                },
              })
              //一个弹窗
              //     that.layuiLayer.open({ //第二个iframe
              //       title: '',
              //       type: 2,
              //       shadeClose: true,
              //       shade: false,
              //       skin: 'demo-class',
              //       id: 'onelyTwo',
              //       maxmin: false, //开启最大化最小化按钮
              //       area: ['360px', '484px'],
              //       // area: 'auto',
              //       offset: winSize,
              //       skin: 'flare',
              //       isOutAnim: false,
              //       closeBtn: 2, //关闭按钮，可通过配置1和2来展示,0关闭
              //       content: ['./popup/html/FlareClusterLayer_v3 copy.html'],
              //       resize: false,
              //       scrollbar: false,
              //       // tipsMore: true, //允许多个tipe
              //       // content: num,
              //       success: function (layero, index) { //成功后添加全局点击关闭
              //         $("#layui-layer-iframe" + index).contents().find("#sidIput").val(setdata);

              //       },
              //     })
            })
          }
        } else if (this.userState == '警情') {
          // console.log(this.userState)
          var fCard = (posi, setdata, winSize) => { // 设备弹窗函数
            var that = this,
              url = './popup/html/FlareClusterLayer_v3.html',
              clickD = null,
              clickG = null,
              downs = null,
              moves = null,
              ups = null;

            layui.use('layer', function () {
              that.layuiLayer = layui.layer;
              that.layuiLayer.config({
                extend: 'myskin/FlareClusterLayer.css'
              });
              that.layuiLayer.close(that.layuiLayer.index);
              that.layuiLayer.open({
                title: '',
                type: 2,
                shadeClose: true,
                shade: false,
                skin: 'demo-class',
                id: 'onelyTwo',
                maxmin: false, //开启最大化最小化按钮
                area: ['360px', '484px'],
                // area: 'auto',
                offset: winSize,
                skin: 'flare',
                isOutAnim: false,
                closeBtn: 2, //关闭按钮，可通过配置1和2来展示,0关闭
                content: ['./popup/html/SupervisoryMapPdata.html'],
                resize: false,
                scrollbar: false,
                // tipsMore: true, //允许多个tipe
                // content: num,
                success: function (layero, index) { //成功后添加全局点击关闭
                  $("#layui-layer-iframe" + index).contents().find("#sidIput").val(setdata);

                },
              })
            })
          }
        } else if (this.userState == '业主') {
          // console.log(this.userState)
          var fCard = (posi, setdata, winSize) => { // 设备弹窗函数
            var that = this,
              url = './popup/html/FlareClusterLayer_v3.html',
              clickD = null,
              clickG = null,
              downs = null,
              moves = null,
              ups = null;

            layui.use('layer', function () {
              that.layuiLayer = layui.layer;
              that.layuiLayer.config({
                extend: 'myskin/FlareClusterLayer.css'
              });
              that.layuiLayer.close(that.layuiLayer.index);

              that.layuiLayer.open({
                title: '',
                type: 2,
                shadeClose: true,
                shade: false,
                skin: 'demo-class',
                id: 'onelyTwo',
                maxmin: false, //开启最大化最小化按钮
                area: ['360px', '484px'],
                // area: 'auto',
                offset: winSize,
                skin: 'flare',
                isOutAnim: false,
                closeBtn: 2, //关闭按钮，可通过配置1和2来展示,0关闭
                content: ['./popup/html/SupervisoryMapYdata.html'],
                resize: false,
                scrollbar: false,
                // tipsMore: true, //允许多个tipe
                // content: num,
                success: function (layero, index) { //成功后添加全局点击关闭
                  $("#layui-layer-iframe" + index).contents().find("#sidIput").val(setdata);

                },
              })
            })
          }
        }

        if (flareObject.isSummaryFlare || !flareObject.singleData) {
          this._showFlareDetail(evt.graphic);

        if (mySelf.onceTimeMethod == null) { //防抖.限制时间内点击次数，否则会造成不能正确销毁前一个弹窗
          var offsetMy = [+evt.screenY - 310 + 'px', +evt.screenX - 168 + 'px'];
          if (und == '控制端') {//控制端弹窗关闭
            var offsetMy = [+window.innerHeight / 2 - 115 + 'px', (+window.innerWidth - 360) / 2 + 257 + 'px'];
            // console.log('控制端中浮',offsetMy)
          }
          // console.log(evt.screenY);
          var winSize = [+window.innerHeight / 2 - 242 + 'px', +window.innerWidth - 380 + 'px']
          // console.log(winSize,4454645634536);
          fCard(offsetMy, setdata, winSize);
          mySelf.onceTimeMethod = setTimeout(() => {
            mySelf.onceTimeMethod = null;
          }, mySelf.onceTime);
        } else { };

      } else {

        var lgtd = Number(evt.graphic.attributes.x);//地图跟随缩放
        var lttd = Number(evt.graphic.attributes.y);
        // // console.log($(this).find('input').attr('lttd'));
        var position = new esri.geometry.Point(lgtd, lttd, new esri.SpatialReference({ wkid: 4326 }));//根据输入坐标信息找地图上的点
        this._map.centerAndZoom(position, this.map.getZoom() + 1);//缩放，10是缩放级别，可以自定义，数值越大缩放越大

        // parent[0].layer.close(this.indexs)
        // parent[0].layer.close(+this.indexs + 1)

        // console.log('111:', this.map.zoomToFullExtent(), '222:', evt, evt.graphic._extent, 'zoom');
      }
      // console.log(evt)
      if (und != '控制端') {
        this._restoreInfoWindowSettings();

        if (evt.graphic.attributes.isCluster) {
          evt.stopPropagation();
          //this._activateCluster(evt.graphic);
          this.map.infoWindow.hide();
          return;
        } 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);

        }

        //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);

      }
    },

@@ -260,7 +624,6 @@
      }

      this.allData.push(obj);

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

@@ -370,26 +733,10 @@
      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);
@@ -427,7 +774,8 @@
      }
    },

    _graphicMouseOut: function (e) {
    _graphicMouseOut: function (e) {//鼠标进入图片事件

      if (e.graphic.attributes.isFlare) {
        this._hideFlareDetail();
      }
@@ -510,8 +858,10 @@
    },

    _clusterData: function () {

      //此函数当前仅适用于不使用预聚集数据的情况
      //this function currently only applies if not using preclustered data
      // console.log('改变111111111111111')

      if (this.preClustered) {
        return;
      }
@@ -597,19 +947,18 @@
          cl.singles.push(obj);
        }
      }

      for (i = 0, len = this.gridClusters.length; i < len; i++) {
        if (this.gridClusters[i].clusterCount === 1) {
          // console.log(this.gridClusters)

          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);
@@ -652,16 +1001,39 @@
      }
    },

    _createSingle: function (single) {
    _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);
      if (single.tenant_id == undefined) {//如果不是业主
        if (single.dtype == 3) {
          symbol = new esri.symbol.PictureMarkerSymbol("./images/by-jingbao.png", 40, 40);
        } else if (single.dtype == 2) {
          symbol = new esri.symbol.PictureMarkerSymbol("./images/selfbaojin2.gif", 80, 80);
        } else if (single.dtype == 1) {
          symbol = new esri.symbol.PictureMarkerSymbol("./images/zx-jingbao.png", 40, 40);
        } else if (single.dtype == 0) {
          symbol = new esri.symbol.PictureMarkerSymbol("./images/dx-jingbao.png", 40, 40);
        }
        // if (single.state != '') {
        //   symbol = new esri.symbol.PictureMarkerSymbol("./images/by-jingbao.png", 40, 40);
        // } else {
        //   if (single.jtype == 1) {
        //     symbol = new esri.symbol.PictureMarkerSymbol("./images/selfbaojin2.gif", 80, 80);
        //   } else {
        //     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);
        //     }
        //   }
        // }
      } else {//是业主
        symbol = new esri.symbol.PictureMarkerSymbol("./images/Yz.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, symbol, attributes, null);
@@ -754,11 +1126,11 @@
      //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'
        })
        x: shapeCenter.x,
        y: shapeCenter.y + (this.textSymbol.font.size / 2 - 6),//聚合文字设置
        text: cluster.clusterCount,
        align: 'middle'
      })
        .setFont({
          size: this.textSymbol.font.size,
          family: this.textSymbol.font.family,
@@ -882,10 +1254,10 @@
      //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
        })
        cx: center.x,
        cy: +center.y + 3,
        r: conCircleRadius
      })
        //.setStroke({ width: 1, color: "000" })
        .setFill(new Color([0, 0, 0, 0]));
      containerCircle.rawNode.setAttribute("class", "flare-object cluster-object");
@@ -1184,16 +1556,16 @@
      tooltipGroup.rawNode.setAttribute("class", "tooltip-text");

      var textShapes = [];
      for (var i = 0, len = lines.length; i < len; i++) {
      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'
          })
          x: xPos,
          y: yPos + (i * 10),
          text: lines[i],
          align: 'middle'
        })
          .setFill("#000")
          .setFont({
            size: 8,
            size: 8,//聚合字体大小//没效果
            family: this.textSymbol.font.family,
            weight: this.textSymbol.font.weight
          });
@@ -1204,12 +1576,12 @@
      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
        })
        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",
@@ -1345,11 +1717,11 @@
      //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'
          })
          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,
@@ -1392,6 +1764,13 @@
      this.animationsRunning = [];
    },

    _clickOpenOnclick: function (e, und, indexControl) {
      this.onClick(e, und, indexControl)
    },
    _setUserState: function (state) {
      // console.log(state)
      this.userState = state
    }
    //#endregion
  });
});