wv-business-components-demo/dist/es/Gis/src/util/arcgisCommon.js

import $ from 'jquery';
import Point from '@arcgis/core/geometry/Point';
import * as webMercatorUtils from '@arcgis/core/geometry/support/webMercatorUtils';
import PictureMarkerSymbol from '@arcgis/core/symbols/PictureMarkerSymbol';
import Graphic from '@arcgis/core/Graphic';
import Sketch from '@arcgis/core/widgets/Sketch';
import SketchViewModel from '@arcgis/core/widgets/Sketch/SketchViewModel';
import Map from '@arcgis/core/Map';
import MapView from '@arcgis/core/views/MapView';
import * as watchUtils from '@arcgis/core/core/watchUtils';
import Extent from '@arcgis/core/geometry/Extent';
import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer';
import Circle from '@arcgis/core/geometry/Circle';
import Polygon from '@arcgis/core/geometry/Polygon';
import SimpleFillSymbol from '@arcgis/core/symbols/SimpleFillSymbol';
import SimpleLineSymbol from '@arcgis/core/symbols/SimpleLineSymbol';
import * as geometryEngine from '@arcgis/core/geometry/geometryEngine';
import '@arcgis/core/core/urlUtils';
import '@arcgis/core/layers/TileLayer';
import '@arcgis/core/Basemap';
import CIMSymbol from '@arcgis/core/symbols/CIMSymbol';
import Polyline from '@arcgis/core/geometry/Polyline';
import '@arcgis/core/symbols/Font';
import config from '@arcgis/core/config';
import '@arcgis/core/widgets/Editor';
import '@arcgis/core/widgets/Feature';
import '@arcgis/core/layers/support/LOD';
import '@arcgis/core/layers/WMTSLayer';
import '@arcgis/core/layers/WebTileLayer';
import '@arcgis/core/geometry/SpatialReference';
import '@arcgis/core/layers/support/TileInfo';
import '@arcgis/core/renderers/HeatmapRenderer';
import FeatureLayer from '@arcgis/core/layers/FeatureLayer';
import '@arcgis/core/Color';
import SimpleMarkerSymbol from '@arcgis/core/symbols/SimpleMarkerSymbol';
import '@arcgis/core/PopupTemplate';
import '@arcgis/core/views/draw/Draw';
import '@arcgis/core/layers/MapImageLayer';
import '@arcgis/core/symbols/TextSymbol';
import '@arcgis/core/renderers/ClassBreaksRenderer';

let dpr = document.documentElement.clientHeight / 1080;
let mapI = 2;
config.assetsPath = "/static/";
config.fontsUrl = "/static/font/";
let EventmouseClick;
let EventmouseMove;
let tempObj = {};
let lineObj = {};
let lineObj1 = {};
let timeObjC = {};
let mouseClick = {};
let mouseClick1 = {};
let mouseOn = {};
let mouseOn1 = {};
let CCmouseClick = 0;
let PolygonmouseClick = 0;
let hoverFlag = "1";
let roundShow = 1;
let arctiveFlag = 1;
let ViewMoving;
function hoverStyleShow1(map, evt, ele) {
  let obj = evt.graphic.attributes;
  if (!obj)
    return;
  let wid = 0;
  wid = $(ele).width();
  let p = {
    type: "point",
    longitude: obj.x,
    latitude: obj.y
  };
  let pt = new Point(p);
  if (map.spatialReference.isWebMercator) {
    pt = webMercatorUtils.geographicToWebMercator(pt);
  }
  let scrPt = map.toScreen(pt);
  if (hoverFlag !== obj.data.id) {
    $(ele).css({
      display: "block",
      left: scrPt.x - wid * 0.65 + "px",
      top: scrPt.y - 50 * dpr + "px"
    });
  }
}
function hoverStyleShow2(map, evt, ele) {
  let obj = evt.graphic.attributes;
  if (!obj)
    return;
  let wid = 0;
  wid = $(ele).width();
  let p = {
    type: "point",
    longitude: obj.apeLongitude,
    latitude: obj.apeLatitude
  };
  let pt = new Point(p);
  if (map.spatialReference.isWebMercator) {
    pt = webMercatorUtils.geographicToWebMercator(pt);
  }
  let scrPt = map.toScreen(pt);
  if (hoverFlag !== obj.id) {
    $(ele).css({
      display: "block",
      left: scrPt.x - wid * 0.65 + "px",
      top: scrPt.y - 50 * dpr + "px"
    });
  }
}
function hoverStyleShow3(map, evt, ele, text) {
  let obj = evt;
  if (!obj)
    return;
  let wid = 0;
  wid = $(ele).width();
  let text1 = "\u5355\u51FB\u5730\u56FE\u4EFB\u610F\u4F4D\u7F6E\u6807\u70B9,\u53F3\u51FB\u9F20\u6807\u53D6\u6D88.";
  $(ele).css({
    display: "block",
    left: evt.x + wid * 0.26 + "px",
    top: evt.y - 30 * dpr + "px"
  });
  if (text) {
    text1 = text;
  }
  $(ele).html(text1);
}
function hoverStyleShow5(map, evt, ele, ele1, text) {
  let obj = evt.graphic.attributes;
  if (!obj)
    return;
  let wid = 0;
  let wid1 = 0;
  wid1 = $(ele1).width();
  wid = $(ele).width();
  let p = {
    type: "point",
    longitude: obj.x,
    latitude: obj.y
  };
  let pt = new Point(p);
  if (map.spatialReference.isWebMercator) {
    pt = webMercatorUtils.geographicToWebMercator(pt);
  }
  let scrPt = map.toScreen(pt);
  let text1 = text || "\u70B9\u51FB\u6444\u50CF\u673A\u8FDB\u5165\u5168\u666F\u8FFD\u8E2A";
  $(ele1).css({
    display: "block",
    left: scrPt.x - wid1 * -0.2 + "px",
    top: scrPt.y + 6 * dpr + "px"
  });
  if (text) {
    text1 = text;
  }
  $(ele1).html(text1);
  if (hoverFlag !== obj.data.id) {
    $(ele).css({
      display: "block",
      left: scrPt.x - wid * 0.65 + "px",
      top: scrPt.y - 50 * dpr + "px"
    });
  }
}
function setEvent(view1, gl, markPointFn) {
  let view = view1;
  let idName = gl.id;
  if (mouseOn[idName]) {
    mouseOn[idName].remove();
  }
  if (mouseClick[idName]) {
    mouseClick[idName].remove();
  }
  mouseOn[idName] = view.on("pointer-move", function(event) {
    $(".hoverBgStyle").css({
      display: "none"
    });
    view.hitTest(event).then((res) => {
      if (res.results.length) {
        let results = res.results.filter((result) => {
          return result.graphic && result.graphic.layer && result.graphic.layer.id === idName;
        });
        if (results.length > 0 && !results[0].graphic.attributes.cluster) {
          if (!results[0]) {
            return;
          }
          let g = results[0].graphic;
          let geo = g.geometry;
          let p = {
            type: "point",
            longitude: geo.x,
            latitude: geo.y
          };
          let point = new Point(p);
          if (view.spatialReference.isWebMercator) {
            point = webMercatorUtils.webMercatorToGeographic(point);
          }
          let obj = "";
          obj = results[0].graphic.attributes.data.devicename + "";
          $(".hoverBgStyle").html(obj);
          hoverStyleShow1(view, results[0], ".hoverBgStyle");
        }
      } else {
        $(".hoverBgStyle").css({
          display: "none"
        });
      }
    });
  });
  mouseClick[idName] = view.on("immediate-click", function(event) {
    view.hitTest(event).then((res) => {
      if (res.results.length) {
        let results = res.results.filter((result) => {
          return result.graphic && result.graphic.layer && result.graphic.layer.id === idName;
        });
        if (!results[0]) {
          return;
        }
        let g = results[0].graphic;
        let geo = g.geometry;
        let p = {
          type: "point",
          longitude: geo.x,
          latitude: geo.y
        };
        let point = new Point(p);
        if (view.spatialReference.isWebMercator) {
          point = webMercatorUtils.webMercatorToGeographic(point);
        }
        if (!results[0].graphic.attributes.cluster || results[0].graphic.attributes.overLap) {
          markPointFn(results[0].graphic.attributes);
        }
      }
    });
  });
  gl.on("layerview-destroy", function(event) {
    mouseOn[idName].remove();
    mouseClick[idName].remove();
  });
}
function setVideoEvent(view1, gl, markPointFn, text) {
  let view = view1;
  let idName = gl.id;
  if (mouseOn[idName]) {
    mouseOn[idName].remove();
  }
  if (mouseClick[idName]) {
    mouseClick[idName].remove();
  }
  mouseOn[idName] = view.on("pointer-move", function(event) {
    $(".hoverBgStyle").css({
      display: "none"
    });
    view.hitTest(event).then((res) => {
      if (res.results.length) {
        let results = res.results.filter((result) => {
          return result.graphic && result.graphic.layer && result.graphic.layer.id === idName;
        });
        if (results.length > 0 && !results[0].graphic.attributes.cluster) {
          if (!results[0]) {
            return;
          }
          let g = results[0].graphic;
          let geo = g.geometry;
          let p = {
            type: "point",
            longitude: geo.x,
            latitude: geo.y
          };
          let point = new Point(p);
          if (view.spatialReference.isWebMercator) {
            point = webMercatorUtils.webMercatorToGeographic(point);
          }
          let obj = "";
          obj = results[0].graphic.attributes.data.devicename + "";
          $(".hoverBgStyle").html(obj);
          if (text) {
            hoverStyleShow5(view, results[0], ".hoverBgStyle", ".hoverVideoBgStyle", text);
          } else {
            hoverStyleShow5(view, results[0], ".hoverBgStyle", ".hoverVideoBgStyle");
          }
        }
      } else {
        $(".hoverBgStyle").css({
          display: "none"
        });
        $(".hoverVideoBgStyle").css({
          display: "none"
        });
      }
    });
  });
  mouseClick[idName] = view.on("immediate-click", function(event) {
    view.hitTest(event).then((res) => {
      if (res.results.length) {
        let results = res.results.filter((result) => {
          return result.graphic && result.graphic.layer && result.graphic.layer.id === idName;
        });
        if (!results[0]) {
          return;
        }
        let g = results[0].graphic;
        let geo = g.geometry;
        let p = {
          type: "point",
          longitude: geo.x,
          latitude: geo.y
        };
        let point = new Point(p);
        if (view.spatialReference.isWebMercator) {
          point = webMercatorUtils.webMercatorToGeographic(point);
        }
        if (!results[0].graphic.attributes.cluster || results[0].graphic.attributes.overLap) {
          markPointFn(results[0].graphic.attributes);
        }
      }
    });
  });
  gl.on("layerview-destroy", function(event) {
    mouseOn[idName].remove();
    mouseClick[idName].remove();
  });
}
function setEvent1(view1, gl, markPointFn) {
  let view = view1;
  let idName = gl.id;
  if (mouseOn1[idName]) {
    mouseOn1[idName].remove();
  }
  if (mouseClick1[idName]) {
    mouseClick1[idName].remove();
  }
  mouseOn1[idName] = view.on("pointer-move", function(event) {
    $(".hoverBgStyle").css({
      display: "none"
    });
    view.hitTest(event).then((res) => {
      if (res.results.length) {
        let results = res.results.filter((result) => {
          return result.graphic && result.graphic.layer && result.graphic.layer.id === idName;
        });
        if (results.length > 0 && !results[0].graphic.attributes.cluster) {
          if (!results[0]) {
            return;
          }
          let g = results[0].graphic;
          let geo = g.geometry;
          let p = {
            type: "point",
            longitude: geo.x,
            latitude: geo.y
          };
          let point = new Point(p);
          if (view.spatialReference.isWebMercator) {
            point = webMercatorUtils.webMercatorToGeographic(point);
          }
          let obj = "";
          obj = results[0].graphic.attributes.devicename + "";
          $(".hoverBgStyle").html(obj);
          hoverStyleShow2(view, results[0], ".hoverBgStyle");
        }
      } else {
        $(".hoverBgStyle").css({
          display: "none"
        });
      }
    });
  });
  mouseClick1[idName] = view.on("immediate-click", function(event) {
    view.hitTest(event).then((res) => {
      if (res.results.length) {
        let results = res.results.filter((result) => {
          return result.graphic && result.graphic.layer && result.graphic.layer.id === idName;
        });
        let g = results[0].graphic;
        let geo = g.geometry;
        let p = {
          type: "point",
          longitude: geo.x,
          latitude: geo.y
        };
        let point = new Point(p);
        if (view.spatialReference.isWebMercator) {
          point = webMercatorUtils.webMercatorToGeographic(point);
        }
        if (!results[0].graphic.attributes.cluster) {
          markPointFn(results[0].graphic.attributes);
        }
      }
    });
  });
  gl.on("layerview-destroy", function(event) {
    mouseOn1[idName].remove();
    mouseClick1[idName].remove();
  });
}
function setEvent2(view1, gl, markPointFn) {
  let view = view1;
  let idName = gl.id;
  if (mouseOn1[idName]) {
    mouseOn1[idName].remove();
  }
  if (mouseClick1[idName]) {
    mouseClick1[idName].remove();
  }
  mouseOn1[idName] = view.on("pointer-move", function(event) {
    $(".hoverBgStyle").css({
      display: "none"
    });
    view.hitTest(event).then((res) => {
      if (res.results.length) {
        let results = res.results.filter((result) => {
          return result.graphic && result.graphic.layer && result.graphic.layer.id === idName;
        });
        if (results.length > 0 && !results[0].graphic.attributes.cluster) {
          if (!results[0]) {
            return;
          }
          let g = results[0].graphic;
          let geo = g.geometry;
          let p = {
            type: "point",
            longitude: geo.x,
            latitude: geo.y
          };
          let point = new Point(p);
          if (view.spatialReference.isWebMercator) {
            point = webMercatorUtils.webMercatorToGeographic(point);
          }
          let obj = "";
          obj = results[0].graphic.attributes.apeName + "";
          $(".hoverBgStyle").html(obj);
        }
      } else {
        $(".hoverBgStyle").css({
          display: "none"
        });
      }
    });
  });
  mouseClick1[idName] = view.on("immediate-click", function(event) {
    view.hitTest(event).then((res) => {
      if (res.results.length) {
        let results = res.results.filter((result) => {
          return result.graphic && result.graphic.layer && result.graphic.layer.id === idName;
        });
        let g = results[0].graphic;
        let geo = g.geometry;
        let p = {
          type: "point",
          longitude: geo.x,
          latitude: geo.y
        };
        let point = new Point(p);
        if (view.spatialReference.isWebMercator) {
          point = webMercatorUtils.webMercatorToGeographic(point);
        }
        if (!results[0].graphic.attributes.cluster) {
          markPointFn(results[0].graphic.attributes);
        }
      }
    });
  });
  gl.on("layerview-destroy", function(event) {
    mouseOn1[idName].remove();
    mouseClick1[idName].remove();
  });
}
function getPoints(center, radius, startAngle, endAngle, pointNum) {
  let sin, cos, x, y, angle;
  let points = [];
  points[0] = center;
  for (let i = 1; pointNum && i <= pointNum; i++) {
    angle = startAngle + (endAngle - startAngle) * i / pointNum;
    sin = Math.sin(angle * Math.PI / 180);
    cos = Math.cos(angle * Math.PI / 180);
    x = center[0] + radius * 1141e-8 * sin;
    y = center[1] + radius * 959e-8 * cos;
    points[i] = [x, y];
  }
  points[points.length] = points[0];
  return points;
}
class arcgisObj {
  static getPointOn(mapId, mapLyerName, pointIcon, Fn, Fn2) {
    let view = window[mapId + "mapObj"][mapId + "view"];
    let PointLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(mapLyerName);
    PointLayer.visible = true;
    EventmouseClick = view.on("immediate-click", function(event) {
      if (event.button == 0) {
        $(".MapmessageBox").css({
          display: "none"
        });
        if (EventmouseMove) {
          EventmouseMove.remove();
        }
        Fn(event.mapPoint);
      } else if (event.button == 2) {
        $(".MapmessageBox").css({
          display: "none"
        });
        if (EventmouseMove) {
          EventmouseMove.remove();
        }
        if (Fn2) {
          Fn2();
        }
        if (EventmouseClick) {
          EventmouseClick.remove();
        }
      }
    });
    console.log("object");
    PointLayer.on("layerview-destroy", function(event) {
      EventmouseClick.remove();
    });
  }
  static getPointOff() {
    if (EventmouseClick) {
      EventmouseClick.remove();
    }
  }
  static getExtentNum(mapId, fn) {
    let view = window[mapId + "mapObj"][mapId + "view"];
    watchUtils.watch(view, "extent", (extent) => {
      let level = Math.round(view.zoom);
      let center = [view.center.longitude, view.center.latitude];
      if (view.extent) {
        fn({ level, center });
      }
    });
  }
  static eventPointMark(mapId, mapLyerName, pointIcon, point, html, dragFn) {
    let view = window[mapId + "mapObj"][mapId + "view"];
    let PointLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(mapLyerName);
    PointLayer.visible = true;
    if (PointLayer) {
      PointLayer.removeAll();
    }
    let p = {
      type: "point",
      longitude: point.longitude || 0,
      latitude: point.latitude || 0
    };
    let pt = new Point(p);
    let symbol2 = {
      type: "CIMPointSymbol",
      symbolLayers: [
        {
          type: "CIMPictureMarker",
          enable: true,
          anchorPoint: {
            x: 0,
            y: 0
          },
          anchorPointUnits: "Relative",
          size: 26,
          scaleX: 1,
          textureFilter: "Picture",
          url: pointIcon.url
        }
      ]
    };
    let aa1 = {
      data: {
        type: "CIMSymbolReference",
        symbol: symbol2
      }
    };
    let symbol3 = new CIMSymbol(aa1);
    let cc = {
      geometry: pt,
      symbol: symbol3
    };
    let circleGraphic1 = new Graphic(cc);
    PointLayer.add(circleGraphic1);
    console.log(PointLayer);
    if (html) {
      window[mapId + "mapObj"][mapId + "view"].popup.autoOpenEnabled = false;
      window[mapId + "mapObj"][mapId + "view"].popup.open({
        title: "\u786E\u8BA4\u7F16\u8F91",
        content: html,
        overwriteActions: true,
        location: pt,
        fetchFeatures: false,
        collapseEnabled: false,
        dockOptions: {
          buttonEnabled: false
        },
        highlightEnabled: false,
        includeDefaultActions: false
      });
      $(".hoverBgStyle").css({
        display: "none"
      });
    }
    let graphicMove;
    let graphicMove1;
    function stopEvtPropagation(event) {
      event.stopPropagation();
    }
    let endP;
    view.on("pointer-down", function(event1) {
      view.hitTest(event1).then((res) => {
        if (graphicMove) {
          graphicMove.remove();
        }
        if (res.results.length) {
          if (!res.results[0].graphic) {
            return;
          }
          view.popup.close();
          graphicMove = view.on("drag", stopEvtPropagation);
          graphicMove1 = view.on("pointer-move", function(event2) {
            let screenPoint = view.toMap({ x: event2.x, y: event2.y });
            endP = screenPoint;
            let symbol22 = {
              type: "CIMPointSymbol",
              symbolLayers: [
                {
                  type: "CIMPictureMarker",
                  enable: true,
                  anchorPoint: {
                    x: 0,
                    y: 0
                  },
                  anchorPointUnits: "Relative",
                  size: 26,
                  scaleX: 1,
                  textureFilter: "Picture",
                  url: pointIcon.url
                }
              ]
            };
            let aa12 = {
              data: {
                type: "CIMSymbolReference",
                symbol: symbol22
              }
            };
            let symbol32 = new CIMSymbol(aa12);
            let cc2 = {
              geometry: screenPoint,
              symbol: symbol32
            };
            let circleGraphic12 = new Graphic(cc2);
            PointLayer.removeAll();
            PointLayer.add(circleGraphic12);
          });
        }
      });
    });
    view.on("pointer-up", function(event) {
      console.log("object1");
      if (graphicMove1) {
        console.log(graphicMove1);
        graphicMove1.remove();
        if (html) {
          window[mapId + "mapObj"][mapId + "view"].popup.autoOpenEnabled = false;
          window[mapId + "mapObj"][mapId + "view"].popup.open({
            title: "\u786E\u8BA4\u7F16\u8F91",
            content: html,
            overwriteActions: true,
            location: endP,
            fetchFeatures: false,
            collapseEnabled: false,
            dockOptions: {
              buttonEnabled: false
            },
            highlightEnabled: false,
            includeDefaultActions: false
          });
          $(".hoverBgStyle").css({
            display: "none"
          });
        }
        dragFn(endP);
      } else {
        return;
      }
    });
  }
  static getMoveOn(mapId, mapLyerName, text) {
    let view = window[mapId + "mapObj"][mapId + "view"];
    let PointLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(mapLyerName);
    PointLayer.visible = true;
    EventmouseMove = view.on("pointer-move", function(event) {
      hoverStyleShow3(view, event, ".MapmessageBox", text);
    });
    PointLayer.on("layerview-destroy", function(event) {
      EventmouseMove.remove();
    });
  }
  static getMoveOff() {
    if (EventmouseMove) {
      EventmouseMove.remove();
      $(".MapmessageBox").css({
        display: "none"
      });
    }
  }
  static pPopup(data, mapId, html, title, flag) {
    if (!data) {
      return;
    }
    let webMercator;
    if (data.longitude && data.latitude) {
      if (window[mapId + "mapObj"][mapId + "map"].spatialReference && window[mapId + "mapObj"][mapId + "map"].spatialReference.isWebMercator()) {
        webMercator = webMercatorUtils.lngLatToXY(
          Number(data.longitude),
          Number(data.latitude)
        );
      } else {
        webMercator = [data.longitude, data.latitude];
      }
      let point = {
        type: "point",
        longitude: webMercator[0],
        latitude: webMercator[1]
      };
      let pt = new Point(point);
      let popupTemplate = {
        title,
        content: html || "",
        overwriteActions: true
      };
      if (html) {
        window[mapId + "mapObj"][mapId + "view"].popup.open({
          title,
          content: popupTemplate.content,
          overwriteActions: true,
          location: pt,
          fetchFeatures: false,
          collapseEnabled: false,
          dockOptions: {
            buttonEnabled: false
          },
          highlightEnabled: false,
          includeDefaultActions: false
        });
        hoverFlag = data.id;
        $(".hoverBgStyle").css({
          display: "none"
        });
        setTimeout(() => {
          $(".esri-popup__button").on("click", function() {
            hoverFlag = "1";
          });
          if (!flag) {
            window[mapId + "mapObj"][mapId + "view"].goTo(pt);
          } else {
            let level = Math.round(window[mapId + "mapObj"][mapId + "view"].zoom);
            let center = [
              window[mapId + "mapObj"][mapId + "view"].center.longitude,
              window[mapId + "mapObj"][mapId + "view"].center.latitude
            ];
            window[mapId + "mapObj"][mapId + "view"].goTo({
              center,
              zoom: level
            });
          }
        }, 200);
      }
    }
  }
  static pointIconCenter(imgObj, data, id, mapId, html) {
    let obj = {
      img: imgObj.imgUrl,
      width: imgObj.width * dpr,
      height: imgObj.height * dpr
    };
    if (!data || !id) {
      return;
    }
    let fixedLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(id);
    if (fixedLayer) {
      fixedLayer.removeAll();
    }
    let webMercator;
    if (data.longitude && data.latitude) {
      if (window[mapId + "mapObj"][mapId + "map"].spatialReference && window[mapId + "mapObj"][mapId + "map"].spatialReference.isWebMercator()) {
        webMercator = webMercatorUtils.lngLatToXY(
          Number(data.longitude),
          Number(data.latitude)
        );
      } else {
        webMercator = [data.longitude, data.latitude];
      }
      let point = {
        type: "point",
        longitude: webMercator[0],
        latitude: webMercator[1]
      };
      let markPoint1 = {
        type: "point",
        longitude: webMercator[0],
        latitude: webMercator[1]
      };
      let pt = new Point(point);
      let pt1 = new Point(markPoint1);
      let symbol = {
        url: obj.img,
        width: obj.width,
        height: obj.height,
        yoffset: -12
      };
      let PictureMarkerSymbols = new PictureMarkerSymbol(symbol);
      let popupTemplate = {
        title: "",
        content: html || "",
        overwriteActions: true
      };
      let Graphic$1 = {
        geometry: pt,
        symbol: PictureMarkerSymbols,
        attributes: data,
        popupTemplate
      };
      let g = new Graphic(Graphic$1);
      fixedLayer.add(g);
      window[mapId + "mapObj"][mapId + "view"].goTo(pt);
      if (html) {
        window[mapId + "mapObj"][mapId + "view"].popup.open({
          title: "",
          content: popupTemplate.content,
          overwriteActions: true,
          location: pt1,
          fetchFeatures: false,
          features: g,
          collapseEnabled: false,
          dockOptions: {
            buttonEnabled: false
          },
          highlightEnabled: false,
          includeDefaultActions: false
        });
      }
    }
  }
  static pointIconCenterS(imgObj, data, id, mapId, html) {
    let obj = {
      img: imgObj.imgUrl,
      width: imgObj.width * dpr,
      height: imgObj.height * dpr
    };
    if (!data || !id) {
      return;
    }
    let fixedLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(id);
    if (fixedLayer) {
      fixedLayer.removeAll();
    }
    let webMercator;
    if (data.longitude && data.latitude) {
      if (window[mapId + "mapObj"][mapId + "map"].spatialReference && window[mapId + "mapObj"][mapId + "map"].spatialReference.isWebMercator()) {
        webMercator = webMercatorUtils.lngLatToXY(
          Number(data.longitude),
          Number(data.latitude)
        );
      } else {
        webMercator = [data.longitude, data.latitude];
      }
      let point = {
        type: "point",
        longitude: webMercator[0],
        latitude: webMercator[1]
      };
      let markPoint1 = {
        type: "point",
        longitude: webMercator[0],
        latitude: webMercator[1]
      };
      let pt = new Point(point);
      let pt1 = new Point(markPoint1);
      let symbol = {
        url: obj.img,
        width: obj.width,
        height: obj.height
      };
      let PictureMarkerSymbols = new PictureMarkerSymbol(symbol);
      let popupTemplate = {
        title: "",
        content: html || "",
        overwriteActions: true
      };
      let Graphic$1 = {
        geometry: pt,
        symbol: PictureMarkerSymbols,
        attributes: data
      };
      let g = new Graphic(Graphic$1);
      fixedLayer.add(g);
      window[mapId + "mapObj"][mapId + "view"].goTo(pt);
      if (html) {
        window[mapId + "mapObj"][mapId + "view"].popup.open({
          title: "",
          content: popupTemplate.content,
          overwriteActions: true,
          location: pt1,
          fetchFeatures: false,
          features: g,
          collapseEnabled: false,
          dockOptions: {
            buttonEnabled: false
          },
          highlightEnabled: false,
          includeDefaultActions: false
        });
      }
    }
  }
  static centerP(mapId, centerObj) {
    window[mapId + "mapObj"][mapId + "view"].goTo({
      center: centerObj.center,
      zoom: centerObj.level
    });
  }
  static initSketch(id, mapId, position, callback, colorObj) {
    let color = "";
    let color1 = "";
    if (colorObj) {
      color = colorObj.fillColor;
      color1 = colorObj.boderColor;
    }
    let graphicsLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(id);
    let sketch = new Sketch({
      layer: graphicsLayer,
      view: window[mapId + "mapObj"][mapId + "view"],
      creationMode: "update",
      availableCreateTools: ["polygon", "rectangle", "circle"],
      viewModel: new SketchViewModel({
        view: window[mapId + "mapObj"][mapId + "view"],
        layer: graphicsLayer,
        polygonSymbol: {
          type: "simple-fill",
          style: "cross",
          color: color || "#EFC8B1",
          outline: {
            width: 3,
            style: "solid",
            color: color1 || "#514644"
          }
        }
      })
    });
    sketch.visibleElements = {
      selectionTools: {
        "rectangle-selection": false,
        "lasso-selection": false
      },
      settingsMenu: false,
      undoRedoMenu: false
    };
    window[mapId + "mapObj"][mapId + "view"].ui.add(sketch, position);
    sketch.on("create", function(event) {
      if (event.state === "complete") {
        let obj;
        if (window[mapId + "mapObj"][mapId + "view"].spatialReference.isWebMercator) {
          obj = webMercatorUtils.webMercatorToGeographic(event.graphic.geometry);
          let ringArr = obj["rings"][0];
          if (callback !== "2") {
            callback(ringArr);
          }
        }
        graphicsLayer.removeAll();
      }
    });
  }
  static initSketch1(id, mapId, position, callback, colorObj) {
    let color = "";
    let color1 = "";
    if (colorObj) {
      color = colorObj.fillColor;
      color1 = colorObj.boderColor;
    }
    let graphicsLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(id);
    let sketch = new Sketch({
      layer: graphicsLayer,
      view: window[mapId + "mapObj"][mapId + "view"],
      creationMode: "update",
      availableCreateTools: ["polygon", "rectangle", "circle"],
      viewModel: new SketchViewModel({
        view: window[mapId + "mapObj"][mapId + "view"],
        layer: graphicsLayer,
        polygonSymbol: {
          type: "simple-fill",
          style: "cross",
          color: color || "#EFC8B1",
          outline: {
            width: 3,
            style: "solid",
            color: color1 || "#514644"
          }
        }
      })
    });
    sketch.visibleElements = {
      selectionTools: {
        "rectangle-selection": false,
        "lasso-selection": false
      },
      settingsMenu: false,
      undoRedoMenu: false
    };
    window[mapId + "mapObj"][mapId + "view"].ui.add(sketch, position);
    sketch.on("create", function(event) {
      if (event.state === "start") {
        graphicsLayer.removeAll();
      }
      if (event.state === "complete") {
        let obj;
        if (window[mapId + "mapObj"][mapId + "view"].spatialReference.isWebMercator) {
          obj = webMercatorUtils.webMercatorToGeographic(event.graphic.geometry);
          let ringArr = obj["rings"][0];
          if (callback !== "2") {
            callback(ringArr);
          }
        }
      }
    });
    sketch.on("update", function(event) {
      if (event.state === "complete") {
        let obj;
        if (window[mapId + "mapObj"][mapId + "view"].spatialReference.isWebMercator) {
          obj = webMercatorUtils.webMercatorToGeographic(event.graphics[0].geometry);
          let ringArr = obj["rings"][0];
          if (callback !== "2") {
            callback(ringArr);
          }
        }
      }
    });
  }
  static initSketchfn(id, mapId, fnName, callback, colorObj) {
    let color = "";
    let color1 = "";
    if (colorObj) {
      color = colorObj.fillColor;
      color1 = colorObj.boderColor;
    }
    let graphicsLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(id);
    let sketch = new Sketch({
      layer: graphicsLayer,
      view: window[mapId + "mapObj"][mapId + "view"],
      creationMode: "update",
      availableCreateTools: ["polygon", "rectangle", "circle"],
      viewModel: new SketchViewModel({
        view: window[mapId + "mapObj"][mapId + "view"],
        layer: graphicsLayer,
        polygonSymbol: {
          type: "simple-fill",
          style: "cross",
          color: color || "#EFC8B1",
          outline: {
            width: 3,
            style: "solid",
            color: color1 || "#514644"
          }
        }
      })
    });
    sketch.visibleElements = {
      selectionTools: {
        "rectangle-selection": false,
        "lasso-selection": false
      },
      settingsMenu: false,
      undoRedoMenu: false
    };
    sketch.create(fnName);
    sketch.on("create", function(event) {
      if (event.state === "start") {
        graphicsLayer.removeAll();
      }
      if (event.state === "complete") {
        let obj;
        if (window[mapId + "mapObj"][mapId + "view"].spatialReference.isWebMercator) {
          obj = webMercatorUtils.webMercatorToGeographic(event.graphic.geometry);
          let ringArr = obj["rings"][0];
          if (callback !== "2") {
            callback(ringArr);
          }
        }
      }
    });
    sketch.on("update", function(event) {
      if (event.state === "complete") {
        let obj;
        if (window[mapId + "mapObj"][mapId + "view"].spatialReference.isWebMercator) {
          obj = webMercatorUtils.webMercatorToGeographic(event.graphics[0].geometry);
          let ringArr = obj["rings"][0];
          if (callback !== "2") {
            callback(ringArr);
          }
        }
      }
    });
  }
  static initSketchfn2(id, mapId, fnName, callback, colorObj) {
    let color = "";
    let color1 = "";
    if (colorObj) {
      color = colorObj.fillColor;
      color1 = colorObj.boderColor;
    }
    let graphicsLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(id);
    let sketch = new Sketch({
      layer: graphicsLayer,
      view: window[mapId + "mapObj"][mapId + "view"],
      creationMode: "update",
      availableCreateTools: [fnName],
      viewModel: new SketchViewModel({
        view: window[mapId + "mapObj"][mapId + "view"],
        layer: graphicsLayer,
        polygonSymbol: {
          type: "simple-fill",
          style: "cross",
          color: color || "#EFC8B1",
          outline: {
            width: 3,
            style: "solid",
            color: color1 || "#514644"
          }
        }
      })
    });
    sketch.visibleElements = {
      selectionTools: {
        "rectangle-selection": false,
        "lasso-selection": false
      },
      settingsMenu: false,
      undoRedoMenu: false
    };
    sketch.create(fnName);
    sketch.on("create", function(event) {
      if (event.state === "start") {
        graphicsLayer.removeAll();
      }
    });
    sketch.on("update", function(event) {
      if (event.state === "complete") {
        let obj;
        if (window[mapId + "mapObj"][mapId + "view"].spatialReference.isWebMercator) {
          obj = webMercatorUtils.webMercatorToGeographic(event.graphics[0].geometry);
          let ringArr = obj["paths"][0];
          if (callback !== "2") {
            callback(ringArr);
          }
        }
      }
    });
  }
  static initSketchfn1(id, mapId, fnName, callback, colorObj) {
    let color = "";
    let color1 = "";
    if (colorObj) {
      color = colorObj.fillColor;
      color1 = colorObj.boderColor;
    }
    let graphicsLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(id);
    let sketch = new Sketch({
      layer: graphicsLayer,
      view: window[mapId + "mapObj"][mapId + "view"],
      creationMode: "update",
      availableCreateTools: ["polygon", "rectangle", "circle"],
      viewModel: new SketchViewModel({
        view: window[mapId + "mapObj"][mapId + "view"],
        layer: graphicsLayer,
        polygonSymbol: {
          type: "simple-fill",
          style: "cross",
          color: color || "#EFC8B1",
          outline: {
            width: 3,
            style: "solid",
            color: color1 || "#514644"
          }
        }
      })
    });
    sketch.visibleElements = {
      selectionTools: {
        "rectangle-selection": false,
        "lasso-selection": false
      },
      settingsMenu: false,
      undoRedoMenu: false
    };
    sketch.create(fnName);
    sketch.on("create", function(event) {
      if (event.state === "start") {
        graphicsLayer.removeAll();
      }
      if (event.state === "complete") {
        let obj;
        if (window[mapId + "mapObj"][mapId + "view"].spatialReference.isWebMercator) {
          obj = webMercatorUtils.webMercatorToGeographic(event.graphic.geometry);
          let ringArr = obj["rings"][0];
          if (callback !== "2") {
            callback(ringArr);
            graphicsLayer.removeAll();
          }
        }
      }
    });
  }
  static initOverViewMap(id, mapId) {
    let map = new Map({
      basemap: window[mapId + "mapObj"][mapId + "Basemap"]
    });
    Math.round(window[mapId + "mapObj"][mapId + "view"].zoom);
    let mapView = new MapView({
      container: id,
      map,
      center: window[mapId + "mapObj"][mapId + "view"].center
    });
    mapView.ui.components = [];
    mapView.when(disableZooming);
    function disableZooming(mapView2) {
      function stopEvtPropagation(event) {
        event.stopPropagation();
      }
      mapView2.on("drag", stopEvtPropagation);
      mapView2.on("mouse-wheel", stopEvtPropagation);
      mapView2.on("double-click", stopEvtPropagation);
      mapView2.on("double-click", ["Control"], stopEvtPropagation);
      mapView2.on("drag", ["Shift"], stopEvtPropagation);
      mapView2.on("drag", ["Shift", "Control"], stopEvtPropagation);
      mapView2.on("key-down", function(event) {
        let keyPressed = event.key;
        let prohibitedKeys = ["+", "-", "Shift", "_", "+"];
        if (prohibitedKeys.indexOf(keyPressed) !== -1) {
          event.stopPropagation();
        }
      });
      mapView2.on("key-down", function(event) {
        let keyPressed = event.key;
        if (keyPressed.slice(0, 5) === "Arrow") {
          event.stopPropagation();
        }
      });
    }
    mapView.ui.components = [];
    mapView.when(() => {
      window[mapId + "mapObj"][mapId + "view"].when(() => {
        setup();
      });
    });
    let symbolSize = {
      geometry: null,
      type: "simple-fill",
      color: [0, 0, 0, 0.3],
      outline: null
    };
    function setup() {
      let extent3Dgraphic = new Graphic({
        symbol: symbolSize
      });
      mapView.graphics.add(extent3Dgraphic);
      watchUtils.init(window[mapId + "mapObj"][mapId + "view"], "extent", (extent) => {
        if (window[mapId + "mapObj"][mapId + "view"].stationary) {
          mapView.goTo({
            center: [
              window[mapId + "mapObj"][mapId + "view"].center.longitude,
              window[mapId + "mapObj"][mapId + "view"].center.latitude
            ],
            scale: window[mapId + "mapObj"][mapId + "view"].scale * 2 * Math.max(
              window[mapId + "mapObj"][mapId + "view"].width / mapView.width,
              window[mapId + "mapObj"][mapId + "view"].height / mapView.height
            )
          }).catch((error) => {
            if (error.name != "view:goto-interrupted") {
              console.error(error);
            }
          });
        }
        extent3Dgraphic.geometry = extent;
      });
      watchUtils.watch(window[mapId + "mapObj"][mapId + "view"], "extent", (extent) => {
        mapView.goTo({
          center: [
            window[mapId + "mapObj"][mapId + "view"].center.longitude,
            window[mapId + "mapObj"][mapId + "view"].center.latitude
          ],
          scale: window[mapId + "mapObj"][mapId + "view"].scale * 2 * Math.max(
            window[mapId + "mapObj"][mapId + "view"].width / mapView.width,
            window[mapId + "mapObj"][mapId + "view"].height / mapView.height
          )
        }).catch((error) => {
          if (error.name != "view:goto-interrupted") {
            console.error(error);
          }
        });
        extent3Dgraphic.geometry = extent;
      });
      let graphicMove;
      mapView.on("pointer-down", function(event) {
        let initExtentOver = mapView.extent;
        let initPoint = mapView.toMap({ x: event.x, y: event.y });
        let initPolygon = extent3Dgraphic.geometry;
        if (mapView.extent.spatialReference.isWebMercator) {
          initExtentOver = webMercatorUtils.webMercatorToGeographic(initExtentOver);
          initPoint = webMercatorUtils.webMercatorToGeographic(initPoint);
          initPolygon = webMercatorUtils.webMercatorToGeographic(initPolygon);
        }
        if (initPolygon && initPolygon.extent.contains(initPoint)) {
          let xmin = extent3Dgraphic.geometry.extent.xmin;
          let xmax = extent3Dgraphic.geometry.extent.xmax;
          let ymax = extent3Dgraphic.geometry.extent.ymax;
          let ymin = extent3Dgraphic.geometry.extent.ymin;
          if (extent3Dgraphic.geometry.spatialReference.isWebMercator) {
            xmin = webMercatorUtils.webMercatorToGeographic(extent3Dgraphic.geometry).extent.xmin;
            xmax = webMercatorUtils.webMercatorToGeographic(extent3Dgraphic.geometry).extent.xmax;
            ymax = webMercatorUtils.webMercatorToGeographic(extent3Dgraphic.geometry).extent.ymax;
            ymin = webMercatorUtils.webMercatorToGeographic(extent3Dgraphic.geometry).extent.ymin;
          }
          graphicMove = mapView.on("pointer-move", function(event2) {
            let updatePoint = mapView.toMap({ x: event2.x, y: event2.y });
            if (mapView.extent.spatialReference.isWebMercator) {
              updatePoint = webMercatorUtils.webMercatorToGeographic(updatePoint);
            }
            let disX = updatePoint.x - initPoint.x;
            let disY = updatePoint.y - initPoint.y;
            let updatePolygon = new Extent({
              xmin: xmin + disX,
              xmax: xmax + disX,
              ymax: ymax + disY,
              ymin: ymin + disY
            });
            if (!initExtentOver.contains(updatePolygon)) {
              let height = updatePolygon.height;
              let width = updatePolygon.width;
              if (updatePolygon.xmin < initExtentOver.xmin) {
                updatePolygon.xmin = initExtentOver.xmin;
                updatePolygon.xmax = initExtentOver.xmin + width;
              }
              if (updatePolygon.xmax > initExtentOver.xmax) {
                updatePolygon.xmax = initExtentOver.xmax;
                updatePolygon.xmin = initExtentOver.xmax - width;
              }
              if (updatePolygon.ymin < initExtentOver.ymin) {
                updatePolygon.ymin = initExtentOver.ymin;
                updatePolygon.ymax = initExtentOver.ymin + height;
              }
              if (updatePolygon.ymax > initExtentOver.ymax) {
                updatePolygon.ymax = initExtentOver.ymax;
                updatePolygon.ymin = initExtentOver.ymax - height;
              }
            }
            extent3Dgraphic.geometry = updatePolygon;
            window[mapId + "mapObj"][mapId + "view"].extent = updatePolygon;
          });
        }
      });
      mapView.on("pointer-up", function(event) {
        if (graphicMove) {
          graphicMove.remove();
        } else {
          return;
        }
      });
    }
  }
  static goCenter(mapId) {
    window[mapId + "mapObj"][mapId + "view"].goTo({
      center: window[mapId + "mapObj"][mapId + "mapconfig"].center,
      zoom: window[mapId + "mapObj"][mapId + "mapconfig"].level
    });
  }
  static addMapLevel(mapId) {
    let level = Math.round(window[mapId + "mapObj"][mapId + "view"].zoom);
    window[mapId + "mapObj"][mapId + "view"].goTo({
      center: window[mapId + "mapObj"][mapId + "view"].center,
      zoom: level + 1
    });
  }
  static subMapLevel(mapId) {
    let level = Math.round(window[mapId + "mapObj"][mapId + "view"].zoom);
    window[mapId + "mapObj"][mapId + "view"].goTo({
      center: window[mapId + "mapObj"][mapId + "view"].center,
      zoom: level - 1
    });
  }
  static layerVisible(mapId, mapLyerName, flag) {
    let b = mapLyerName.split(",");
    if (b.length > 1) {
      for (let i = 0; i < b.length; i++) {
        let PointLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(b[i]);
        PointLayer.visible = flag;
      }
    } else {
      let PointLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(mapLyerName);
      PointLayer.visible = flag;
    }
  }
  static layerClear(mapId, mapLyerName) {
    let b = mapLyerName.split(",");
    if (b.length > 1) {
      for (let i = 0; i < b.length; i++) {
        let PointLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(b[i]);
        PointLayer.removeAll();
      }
    } else {
      let PointLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(mapLyerName);
      PointLayer.removeAll();
    }
  }
  static delMaplayer(mapId, mapLyerName) {
    let PointLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(mapLyerName);
    PointLayer.removeAll();
  }
  static destroyMaplayer(mapId, mapLyerName) {
    let PointLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(mapLyerName);
    PointLayer.destroy();
  }
  static markPoint(data, mapId, mapLyerName, imgObj, markPointFn, fontColor) {
    let PointLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(mapLyerName);
    if (PointLayer) {
      PointLayer.removeAll();
    } else {
      let addLayer = new GraphicsLayer({ id: mapLyerName });
      window[mapId + "mapObj"][mapId + "map"].add(addLayer, mapI);
      PointLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(mapLyerName);
      mapI += 1;
    }
    let MinW = imgObj.cluster.width;
    for (let i = 0; i < data.length; i++) {
      let longitude = 0;
      let latitude = 0;
      let width = 0;
      let height = 0;
      let videoImage;
      if (data[i].cluster) {
        longitude = data[i].x;
        latitude = data[i].y;
        videoImage = imgObj.cluster.imgUrl;
        if ((data[i].pointCount + "").length <= 3) {
          width = MinW;
        } else {
          width = (data[i].pointCount + "").length * 14 + 8;
        }
        height = imgObj.cluster.height;
      } else {
        if (!data[i].data) {
          let a = data[i].overLaps;
          for (let c = 0; c < a.length; c++) {
            longitude = a[c].x;
            latitude = a[c].y;
            videoImage = imgObj.cluster.imgUrl;
            if ((a[i].pointCount + "").length <= 3) {
              width = MinW;
            } else {
              width = (data[i].pointCount + "").length * 14 + 8;
            }
            height = imgObj.cluster.height;
          }
        } else {
          if (data[i].data.netstatus == "yes") {
            longitude = data[i].data.longitude;
            latitude = data[i].data.latitude;
            videoImage = imgObj.online.imgUrl;
            width = imgObj.online.width;
            height = imgObj.online.height;
          } else {
            longitude = data[i].data.longitude;
            latitude = data[i].data.latitude;
            videoImage = imgObj.offline.imgUrl;
            width = imgObj.online.width;
            height = imgObj.online.height;
          }
        }
      }
      let p = {
        type: "point",
        longitude,
        latitude
      };
      let pt = new Point(p);
      if (window[mapId + "mapObj"][mapId + "view"].spatialReference.isWebMercator) {
        pt = webMercatorUtils.geographicToWebMercator(pt);
      }
      let symbol = {
        url: videoImage,
        width: width * dpr,
        height: height * dpr
      };
      let PictureMarkerSymbol$1 = new PictureMarkerSymbol(symbol);
      let pG = {
        geometry: pt,
        symbol: PictureMarkerSymbol$1,
        attributes: data[i]
      };
      let textSymbol = {
        type: "text",
        color: fontColor || "#fff",
        text: data[i].pointCount,
        font: {
          size: 14 * dpr,
          family: "Arial Unicode MS",
          weight: "bold"
        },
        yoffset: -3
      };
      let g = new Graphic(pG);
      PointLayer.add(g);
      tempObj[mapId + "map_" + mapLyerName + "_" + data[i].clusterId] = g;
      if (data[i].cluster) {
        let pointGraphic1 = new Graphic({
          geometry: pt,
          symbol: textSymbol,
          attributes: data[i]
        });
        PointLayer.add(pointGraphic1);
      }
    }
    setEvent(window[mapId + "mapObj"][mapId + "view"], PointLayer, markPointFn);
  }
  static markPointNoClear(data, mapId, mapLyerName, imgObj, markPointFn, fontColor) {
    let PointLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(mapLyerName);
    if (PointLayer) ; else {
      let addLayer = new GraphicsLayer({ id: mapLyerName });
      window[mapId + "mapObj"][mapId + "map"].add(addLayer, mapI);
      PointLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(mapLyerName);
      mapI += 1;
    }
    let MinW = imgObj.cluster.width;
    for (let i = 0; i < data.length; i++) {
      let longitude = 0;
      let latitude = 0;
      let width = 0;
      let height = 0;
      let videoImage;
      if (data[i].cluster) {
        longitude = data[i].x;
        latitude = data[i].y;
        videoImage = imgObj.cluster.imgUrl;
        if ((data[i].pointCount + "").length <= 3) {
          width = MinW;
        } else {
          width = (data[i].pointCount + "").length * 14 + 8;
        }
        height = imgObj.cluster.height;
      } else {
        if (!data[i].data) {
          let a = data[i].overLaps;
          for (let c = 0; c < a.length; c++) {
            longitude = a[c].x;
            latitude = a[c].y;
            videoImage = imgObj.cluster.imgUrl;
            if ((a[i].pointCount + "").length <= 3) {
              width = MinW;
            } else {
              width = (data[i].pointCount + "").length * 14 + 8;
            }
            height = imgObj.cluster.height;
          }
        } else {
          if (data[i].data.netstatus == "yes") {
            longitude = data[i].data.longitude;
            latitude = data[i].data.latitude;
            videoImage = imgObj.online.imgUrl;
            width = imgObj.online.width;
            height = imgObj.online.height;
          } else {
            longitude = data[i].data.longitude;
            latitude = data[i].data.latitude;