import '@arcgis/core/assets/esri/themes/light/main.css';
import { Options, Vue } from 'vue-class-component';
import { WvMessage, WvOption, WvCheckbox, WvSelect } from 'wiscomv';
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 * as urlUtils from '@arcgis/core/core/urlUtils';
import TileLayer from '@arcgis/core/layers/TileLayer';
import Basemap from '@arcgis/core/Basemap';
import CIMSymbol from '@arcgis/core/symbols/CIMSymbol';
import Polyline from '@arcgis/core/geometry/Polyline';
import Font from '@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 WMTSLayer from '@arcgis/core/layers/WMTSLayer';
import WebTileLayer from '@arcgis/core/layers/WebTileLayer';
import SpatialReference from '@arcgis/core/geometry/SpatialReference';
import TileInfo from '@arcgis/core/layers/support/TileInfo';
import '@arcgis/core/renderers/HeatmapRenderer';
import FeatureLayer from '@arcgis/core/layers/FeatureLayer';
import Color from '@arcgis/core/Color';
import SimpleMarkerSymbol from '@arcgis/core/symbols/SimpleMarkerSymbol';
import PopupTemplate from '@arcgis/core/PopupTemplate';
import Draw from '@arcgis/core/views/draw/Draw';
import MapImageLayer from '@arcgis/core/layers/MapImageLayer';
import TextSymbol from '@arcgis/core/symbols/TextSymbol';
import ClassBreaksRenderer from '@arcgis/core/renderers/ClassBreaksRenderer';
import axios from 'axios';
import $ from 'jquery';
import { Prop } from 'vue-property-decorator';
import { resolveComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, withDirectives, vShow, createCommentVNode, createVNode, withCtx, Fragment, renderList, createBlock, normalizeStyle } from 'vue';

let ScreenPoint = {};
let OverviewMap = {};
let ClusterLayer = {};
let Units = {};
let CartographicLineSymbol = {};

function getPointData(map, getExtentData) {
  let centerPoint = map.extent.center;
  let point = {
    type: "point",
    longitude: map.extent.xmax,
    latitude: map.extent.ymax
  };
  let point1 = {
    type: "point",
    longitude: map.extent.xmin,
    latitude: map.extent.ymin
  };
  let minPoint = new Point(point1);
  let maxPoint = new Point(point);
  if (centerPoint.spatialReference.isWebMercator) {
    centerPoint = webMercatorUtils.webMercatorToGeographic(centerPoint);
    minPoint = webMercatorUtils.webMercatorToGeographic(minPoint);
    maxPoint = webMercatorUtils.webMercatorToGeographic(maxPoint);
  }
  let minLongitude = minPoint.x;
  let minLatitude = minPoint.y;
  let maxLongitude = maxPoint.x;
  let maxLatitude = maxPoint.y;
  let level = Math.round(map.zoom);
  let urlPrams = {
    minLongitude,
    minLatitude,
    maxLongitude,
    maxLatitude,
    level
  };
  getExtentData && getExtentData(urlPrams);
}
let timer = null;
function debounce(fn, wait) {
  return function() {
    if (timer !== null) {
      clearTimeout(timer);
    }
    timer = setTimeout(fn, wait);
  };
}
class GisBase {
  static initMap(mapContainer, mode, Id, callback, config, getExtentData, popCloseFn) {
    window[Id + "mapObj"] = {};
    window[Id + "mapObj"][Id + "mapconfig"] = config;
    if (mode == "ARCGIS") {
      if (Number(config.mapServerProxyEnable)) {
        urlUtils.addProxyRule({
          urlPrefix: config.urlPrefix,
          proxyUrl: config.proxyUrl
        });
      }
      let layer = new TileLayer({
        url: config.mapServeUrl
      });
      let basemap = new Basemap({
        baseLayers: [layer],
        title: "basemap",
        id: Id + "map"
      });
      window[Id + "mapObj"][Id + "Basemap"] = basemap;
      let map = new Map({ basemap });
      window[Id + "mapObj"][Id + "map"] = map;
      let view = new MapView({
        container: mapContainer,
        map,
        center: config.center,
        zoom: config.level
      });
      window[Id + "mapObj"][Id + "view"] = view;
      console.log(view);
      view.ui.empty("top-left");
      let graphicsLayer = new GraphicsLayer({ id: "DrawCircle" });
      map.add(graphicsLayer, 1);
      let graphicsLayer1 = new GraphicsLayer({ id: "DrawCircle1" });
      map.add(graphicsLayer1, 2);
      let graphicsLayer9 = new GraphicsLayer({ id: "TDrawCircle" });
      map.add(graphicsLayer9, 4);
      let graphicsLayer4 = new GraphicsLayer({ id: "EventLayer" });
      map.add(graphicsLayer4, 5);
      let PointLayer = map.findLayerById("EventLayer");
      PointLayer.visible = false;
      let graphicsLayer8 = new GraphicsLayer({
        id: "EventResultLayer"
      });
      map.add(graphicsLayer8, 6);
      let fixedBillboardLayer = new GraphicsLayer({
        id: "fixedBillboardLayer"
      });
      map.add(fixedBillboardLayer, 100);
      let fixedBillboardLayerP = new GraphicsLayer({
        id: "fixedBillboardLayerP"
      });
      map.add(fixedBillboardLayerP, 108);
      let graphicsLayer2 = new GraphicsLayer({ id: "MoveLayer1" });
      map.add(graphicsLayer2, 102);
      let graphicsLayer3 = new GraphicsLayer({ id: "MoveLayer" });
      map.add(graphicsLayer3, 101);
      let graphicsLayer5 = new GraphicsLayer({ id: "MoveLayerText" });
      map.add(graphicsLayer5, 106);
      let graphicsLayer6 = new GraphicsLayer({
        id: "MoveLayerText1"
      });
      map.add(graphicsLayer6, 107);
      let fixedBillboardLayerPC = new GraphicsLayer({
        id: "fixedBillboardLayerPC"
      });
      map.add(fixedBillboardLayerPC, 110);
      view.when(() => {
        window[Id + "mapObj"][Id + "view"].popup = {
          collapseEnabled: false,
          dockOptions: {
            buttonEnabled: false
          },
          highlightEnabled: false
        };
        watchUtils.whenTrue(view.popup, "visible", function() {
          watchUtils.whenFalseOnce(view.popup, "visible", function() {
            if (popCloseFn) {
              popCloseFn();
            }
          });
        });
        callback();
      });
      watchUtils.watch(
        view,
        "extent",
        debounce((extent) => {
          if (view.stationary) ;
          let level = Math.round(view.zoom);
          if (level > window[Id + "mapObj"][Id + "mapconfig"].maxlevel) {
            WvMessage({
              message: "\u5DF2\u8FBE\u5230\u6700\u5927\u5C42\u7EA7!",
              type: "error",
              duration: "1000"
            });
            view.goTo({
              center: view.center,
              zoom: level - 1
            });
          }
          if (level < window[Id + "mapObj"][Id + "mapconfig"].minlevel) {
            WvMessage({
              message: "\u5DF2\u8FBE\u5230\u6700\u5C0F\u5C42\u7EA7!",
              type: "error",
              duration: "1000"
            });
            view.goTo({
              center: view.center,
              zoom: level + 1
            });
          }
          if (view.extent && getExtentData) {
            getPointData(view, getExtentData);
          }
          if (config.mapExtentLimitEnable) {
            return;
          }
          let getNumFloat = (num) => {
            let x = String(num).indexOf(".") + 1;
            let y = String(num).length - x;
            if (y > 0) {
              return y;
            }
          };
          let XMin = config.XMin * 1;
          let YMin = config.YMin * 1;
          let XMax = config.XMax * 1;
          let YMax = config.YMax * 1;
          let viewE;
          if (view.extent.spatialReference.isWebMercator) {
            viewE = webMercatorUtils.webMercatorToGeographic(view.extent);
          }
          let mapXmin = Number(viewE.extent.xmin);
          let mapXmax = Number(viewE.extent.xmax);
          let mapYmin = Number(viewE.extent.ymin);
          let mapYmax = Number(viewE.extent.ymax);
          let xdifference = mapXmax - mapXmin;
          let ydifference = mapYmax - mapYmin;
          let cM = Number(mapXmax.toFixed(getNumFloat(XMax)));
          if (cM > XMax) {
            mapXmax = XMax;
            mapXmin = XMax - xdifference;
            if (mapYmax > YMax) {
              mapYmax = YMax;
              mapYmin = mapYmax - ydifference;
            }
            if (mapYmin < YMin) {
              mapYmin = YMin;
              mapYmax = mapYmin + ydifference;
            }
            let startExtent = new Extent(
              {
                xmin: mapXmin,
                ymin: mapYmin,
                xmax: mapXmax,
                ymax: mapYmax
              }
            );
            view.extent = startExtent;
          }
          let cX = Number(mapXmin.toFixed(getNumFloat(XMin)));
          if (cX < XMin) {
            mapXmin = XMin;
            mapXmax = XMin + xdifference;
            if (mapYmax > YMax) {
              mapYmax = YMax;
              mapYmin = mapYmax - ydifference;
            }
            if (mapYmin < YMin) {
              mapYmin = YMin;
              mapYmax = mapYmin + ydifference;
            }
            let startExtent = new Extent(
              {
                xmin: mapXmin,
                ymin: mapYmin,
                xmax: mapXmax,
                ymax: mapYmax
              }
            );
            view.extent = startExtent;
          }
          let cMY = Number(mapYmax.toFixed(getNumFloat(YMax)));
          if (cMY > YMax) {
            mapYmax = YMax;
            mapYmin = YMax - ydifference;
            if (mapXmax > XMax) {
              mapXmax = XMax;
              mapXmin = mapXmax - xdifference;
            }
            if (mapXmin < XMin) {
              mapXmin = XMin;
              mapXmax = mapXmin + xdifference;
            }
            let startExtent = new Extent(
              {
                xmin: mapXmin,
                ymin: mapYmin,
                xmax: mapXmax,
                ymax: mapYmax
              }
            );
            view.extent = startExtent;
          }
          let cMM = Number(mapYmin.toFixed(getNumFloat(YMin)));
          if (cMM < YMin) {
            mapYmin = YMin;
            mapYmax = YMin + ydifference;
            if (mapXmax > XMax) {
              mapXmax = XMax;
              mapXmin = mapXmax - xdifference;
            }
            if (mapXmin < XMin) {
              mapXmin = XMin;
              mapXmax = mapXmin + xdifference;
            }
            let startExtent = new Extent(
              {
                xmin: mapXmin,
                ymin: mapYmin,
                xmax: mapXmax,
                ymax: mapYmax
              }
            );
            view.extent = startExtent;
          }
        }, 500)
      );
    } else {
      if (Number(config.mapServerProxyEnable)) {
        urlUtils.addProxyRule({
          urlPrefix: config.urlPrefix,
          proxyUrl: config.proxyUrl
        });
      }
      axios.get("/static/config/MapInfoParams2.json").then(function(res) {
        let layer1 = new TileLayer({
          url: config.mapServeUrl
        });
        let layer = new WMTSLayer({
          url: config.mapServeUrl1
        });
        let basemap = new Basemap({
          baseLayers: [layer1, layer],
          title: "basemap",
          id: Id + "map"
        });
        window[Id + "mapObj"][Id + "Basemap"] = basemap;
        const map = new Map({
          basemap
        });
        window[Id + "mapObj"][Id + "map"] = map;
        let wmtsParam;
        let param = res.data;
        if (typeof param == "object") {
          wmtsParam = param.WMTS;
        } else if (typeof param == "string") {
          wmtsParam = JSON.parse(param).WMTS;
        }
        if (!wmtsParam) {
          alert("\u8BF7\u6B63\u786E\u914D\u7F6E\u53C2\u6570\uFF01");
          return;
        }
        new TileInfo({
          dpi: wmtsParam.dpi,
          origin: wmtsParam.origin,
          spatialReference: {
            wkid: wmtsParam.wkid
          },
          lods: wmtsParam.lods
        });
        const view = new MapView({
          container: mapContainer,
          map,
          center: config.center,
          zoom: config.level
        });
        window[Id + "mapObj"][Id + "view"] = view;
        console.log(view);
        view.ui.empty("top-left");
        let graphicsLayer = new GraphicsLayer({ id: "DrawCircle" });
        map.add(graphicsLayer, 1);
        let graphicsLayer1 = new GraphicsLayer({ id: "DrawCircle1" });
        map.add(graphicsLayer1, 2);
        let graphicsLayer9 = new GraphicsLayer({ id: "TDrawCircle" });
        map.add(graphicsLayer9, 4);
        let graphicsLayer4 = new GraphicsLayer({ id: "EventLayer" });
        map.add(graphicsLayer4, 5);
        let PointLayer = map.findLayerById("EventLayer");
        PointLayer.visible = false;
        let graphicsLayer8 = new GraphicsLayer({
          id: "EventResultLayer"
        });
        map.add(graphicsLayer8, 6);
        let fixedBillboardLayer = new GraphicsLayer({
          id: "fixedBillboardLayer"
        });
        map.add(fixedBillboardLayer, 100);
        let fixedBillboardLayerP = new GraphicsLayer({
          id: "fixedBillboardLayerP"
        });
        map.add(fixedBillboardLayerP, 108);
        let graphicsLayer2 = new GraphicsLayer({ id: "MoveLayer1" });
        map.add(graphicsLayer2, 102);
        let graphicsLayer3 = new GraphicsLayer({ id: "MoveLayer" });
        map.add(graphicsLayer3, 101);
        let graphicsLayer5 = new GraphicsLayer({
          id: "MoveLayerText"
        });
        map.add(graphicsLayer5, 106);
        let graphicsLayer6 = new GraphicsLayer({
          id: "MoveLayerText1"
        });
        map.add(graphicsLayer6, 107);
        let fixedBillboardLayerPC = new GraphicsLayer({
          id: "fixedBillboardLayerPC"
        });
        map.add(fixedBillboardLayerPC, 110);
        view.when(() => {
          window[Id + "mapObj"][Id + "view"].popup = {
            collapseEnabled: false,
            dockOptions: {
              buttonEnabled: false
            },
            highlightEnabled: false
          };
          watchUtils.whenTrue(view.popup, "visible", function() {
            watchUtils.whenFalseOnce(view.popup, "visible", function() {
              if (popCloseFn) {
                popCloseFn();
              }
            });
          });
          callback();
        });
        watchUtils.watch(
          view,
          "extent",
          debounce((extent) => {
            if (view.stationary) ;
            let level = Math.round(view.zoom);
            if (level > window[Id + "mapObj"][Id + "mapconfig"].maxlevel) {
              WvMessage({
                message: "\u5DF2\u8FBE\u5230\u6700\u5927\u5C42\u7EA7!",
                type: "error",
                duration: "1000"
              });
              view.goTo({
                center: view.center,
                zoom: level - 1
              });
            }
            if (level < window[Id + "mapObj"][Id + "mapconfig"].minlevel) {
              WvMessage({
                message: "\u5DF2\u8FBE\u5230\u6700\u5C0F\u5C42\u7EA7!",
                type: "error",
                duration: "1000"
              });
              view.goTo({
                center: view.center,
                zoom: level + 1
              });
            }
            if (view.extent) {
              getPointData(view, getExtentData);
            }
            if (config.mapExtentLimitEnable) {
              return;
            }
            let getNumFloat = (num) => {
              let x = String(num).indexOf(".") + 1;
              let y = String(num).length - x;
              if (y > 0) {
                return y;
              }
            };
            let XMin = config.XMin * 1;
            let YMin = config.YMin * 1;
            let XMax = config.XMax * 1;
            let YMax = config.YMax * 1;
            let viewE;
            if (view.extent.spatialReference.isWebMercator) {
              viewE = webMercatorUtils.webMercatorToGeographic(view.extent);
            }
            let mapXmin = Number(viewE.extent.xmin);
            let mapXmax = Number(viewE.extent.xmax);
            let mapYmin = Number(viewE.extent.ymin);
            let mapYmax = Number(viewE.extent.ymax);
            let xdifference = mapXmax - mapXmin;
            let ydifference = mapYmax - mapYmin;
            let cM = Number(mapXmax.toFixed(getNumFloat(XMax)));
            if (cM > XMax) {
              mapXmax = XMax;
              mapXmin = XMax - xdifference;
              if (mapYmax > YMax) {
                mapYmax = YMax;
                mapYmin = mapYmax - ydifference;
              }
              if (mapYmin < YMin) {
                mapYmin = YMin;
                mapYmax = mapYmin + ydifference;
              }
              let startExtent = new Extent(
                {
                  xmin: mapXmin,
                  ymin: mapYmin,
                  xmax: mapXmax,
                  ymax: mapYmax
                }
              );
              view.extent = startExtent;
            }
            let cX = Number(mapXmin.toFixed(getNumFloat(XMin)));
            if (cX < XMin) {
              mapXmin = XMin;
              mapXmax = XMin + xdifference;
              if (mapYmax > YMax) {
                mapYmax = YMax;
                mapYmin = mapYmax - ydifference;
              }
              if (mapYmin < YMin) {
                mapYmin = YMin;
                mapYmax = mapYmin + ydifference;
              }
              let startExtent = new Extent(
                {
                  xmin: mapXmin,
                  ymin: mapYmin,
                  xmax: mapXmax,
                  ymax: mapYmax
                }
              );
              view.extent = startExtent;
            }
            let cMY = Number(mapYmax.toFixed(getNumFloat(YMax)));
            if (cMY > YMax) {
              mapYmax = YMax;
              mapYmin = YMax - ydifference;
              if (mapXmax > XMax) {
                mapXmax = XMax;
                mapXmin = mapXmax - xdifference;
              }
              if (mapXmin < XMin) {
                mapXmin = XMin;
                mapXmax = mapXmin + xdifference;
              }
              let startExtent = new Extent(
                {
                  xmin: mapXmin,
                  ymin: mapYmin,
                  xmax: mapXmax,
                  ymax: mapYmax
                }
              );
              view.extent = startExtent;
            }
            let cMM = Number(mapYmin.toFixed(getNumFloat(YMin)));
            if (cMM < YMin) {
              mapYmin = YMin;
              mapYmax = YMin + ydifference;
              if (mapXmax > XMax) {
                mapXmax = XMax;
                mapXmin = mapXmax - xdifference;
              }
              if (mapXmin < XMin) {
                mapXmin = XMin;
                mapXmax = mapXmin + xdifference;
              }
              let startExtent = new Extent(
                {
                  xmin: mapXmin,
                  ymin: mapYmin,
                  xmax: mapXmax,
                  ymax: mapYmax
                }
              );
              view.extent = startExtent;
            }
          }, 500)
        );
      });
    }
  }
}

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;
            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 markVideoPoint(data, mapId, mapLyerName, imgObj, markPointFn, fontObj) {
    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: fontObj && fontObj.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);
      }
    }
    if (fontObj && fontObj.text) {
      setVideoEvent(
        window[mapId + "mapObj"][mapId + "view"],
        PointLayer,
        markPointFn,
        fontObj.text
      );
    } else {
      setVideoEvent(window[mapId + "mapObj"][mapId + "view"], PointLayer, markPointFn);
    }
  }
  static addAlarmPoints(data, mapId, mapLyerName, imgObj, markPointFn, fontColor) {
    config.fontsUrl = "/static/font/";
    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;
    }
    console.log(data);
    for (let i = 0; i < data.length; i++) {
      let longitude = 0;
      let latitude = 0;
      let MinW = imgObj.width * dpr;
      let width = MinW;
      let height = 0;
      let videoImage;
      longitude = data[i].x;
      latitude = data[i].y;
      if (!longitude || !latitude) {
        continue;
      }
      videoImage = imgObj.imgUrl;
      if ((data[i].indexText + "").length <= 2) {
        width = MinW;
      } else {
        width = (data[i].indexText + "").length * 14;
      }
      height = imgObj.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: MinW,
        height: height * dpr
      };
      let symbol1 = {
        style: "circle",
        color: "red",
        yoffset: height * dpr / 2,
        xoffset: width * dpr / 2,
        size: width + "px",
        outline: {
          color: [255, 255, 0],
          width: 0
        }
      };
      let PictureMarkerSymbol$1 = new PictureMarkerSymbol(symbol);
      let SimpleMarkerSymbol$1 = new SimpleMarkerSymbol(symbol1);
      let pG = {
        geometry: pt,
        symbol: PictureMarkerSymbol$1,
        attributes: data[i]
      };
      let pG1 = {
        geometry: pt,
        symbol: SimpleMarkerSymbol$1,
        attributes: data[i]
      };
      let textSymbol = {
        type: "text",
        color: fontColor || "#fff",
        text: data[i].indexText || i + 1,
        font: {
          size: 14 * dpr,
          family: "Arial Unicode MS",
          weight: "bold"
        },
        yoffset: height * dpr / 2 + "px",
        xoffset: width * dpr / 2
      };
      let g = new Graphic(pG);
      let g1 = new Graphic(pG1);
      PointLayer.add(g);
      PointLayer.add(g1);
      let pointGraphic1 = new Graphic({
        geometry: pt,
        symbol: textSymbol,
        attributes: data[i]
      });
      PointLayer.add(pointGraphic1);
    }
    setEvent2(window[mapId + "mapObj"][mapId + "view"], PointLayer, markPointFn);
  }
  static addTextPoints(data, mapId, mapLyerName, imgObj, markPointFn, fontColor) {
    config.fontsUrl = "/static/font/";
    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;
    }
    console.log(data);
    for (let i = 0; i < data.length; i++) {
      let longitude = 0;
      let latitude = 0;
      let MinW = imgObj.width * dpr;
      let width = MinW;
      let height = 0;
      let videoImage;
      longitude = data[i].x;
      latitude = data[i].y;
      if (!longitude || !latitude) {
        continue;
      }
      videoImage = imgObj.imgUrl;
      if ((data[i].indexText + "").length <= 2) {
        width = MinW;
      } else {
        width = (data[i].indexText + "").length * 14;
      }
      height = imgObj.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].indexText || i + 1,
        font: {
          size: 14 * dpr,
          family: "Arial Unicode MS",
          weight: "bold"
        },
        yoffset: -2
      };
      let g = new Graphic(pG);
      PointLayer.add(g);
      let pointGraphic1 = new Graphic({
        geometry: pt,
        symbol: textSymbol,
        attributes: data[i]
      });
      PointLayer.add(pointGraphic1);
    }
    console.log("popupDDDDD");
    setEvent2(window[mapId + "mapObj"][mapId + "view"], PointLayer, markPointFn);
  }
  static addTextPoint(data, mapId, mapLyerName, imgObj, markPointFn, fontColor) {
    config.fontsUrl = "/static/font/";
    if (!data || !mapId) {
      return;
    }
    let PointLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(mapLyerName);
    console.log(data);
    let longitude = 0;
    let latitude = 0;
    let MinW = imgObj.width * dpr;
    let width = MinW;
    let height = 0;
    let videoImage;
    longitude = data.x;
    latitude = data.y;
    if (!longitude || !latitude) {
      return;
    }
    videoImage = imgObj.imgUrl;
    if ((data.indexText + "").length <= 2) {
      width = MinW;
    } else {
      width = (data.indexText + "").length * 14;
    }
    height = imgObj.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
    };
    let textSymbol = {
      type: "text",
      color: fontColor || "#fff",
      text: data.indexText || 1,
      font: {
        size: 14 * dpr,
        family: "Arial Unicode MS",
        weight: "bold"
      },
      yoffset: -2
    };
    let g = new Graphic(pG);
    PointLayer.add(g);
    let pointGraphic1 = new Graphic({
      geometry: pt,
      symbol: textSymbol,
      attributes: data
    });
    PointLayer.add(pointGraphic1);
    console.log("popupDDDDD");
    setEvent2(window[mapId + "mapObj"][mapId + "view"], PointLayer, markPointFn);
  }
  static extentViewPoints(data, mapId, mapLyerName, imgObj, markPointFn, fontColor) {
    let view = window[mapId + "mapObj"][mapId + "view"];
    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 mapXmin = 0;
    let mapXmax = 0;
    let mapYmin = 0;
    let mapYmax = 0;
    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].netstatus == "yes") {
        longitude = data[i].apeLongitude;
        latitude = data[i].apeLatitude;
        videoImage = imgObj.online.imgUrl;
        width = imgObj.online.width;
        height = imgObj.online.height;
      } else {
        longitude = data[i].apeLongitude;
        latitude = data[i].apeLatitude;
        videoImage = imgObj.offline.imgUrl;
        width = imgObj.online.width;
        height = imgObj.online.height;
      }
      if (mapXmin == 0) {
        mapXmin = longitude - 0.01;
      } else {
        if (longitude < mapXmin) {
          mapXmin = longitude - 0.01;
        }
      }
      if (mapXmax == 0) {
        mapXmax = longitude + 0.01;
      } else {
        if (longitude > mapXmax) {
          mapXmax = longitude + 0.01;
        }
      }
      if (mapYmin == 0) {
        mapYmin = latitude - 0.01;
      } else {
        if (latitude < mapYmin) {
          mapYmin = latitude - 0.01;
        }
      }
      if (mapYmax == 0) {
        mapYmax = latitude + 0.01;
      } else {
        if (latitude > mapYmax) {
          mapYmax = latitude + 0.01;
        }
      }
      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);
      }
    }
    console.log(mapXmin, mapYmin, mapXmax, mapYmax);
    let startExtent = new Extent({
      xmin: mapXmin,
      ymin: mapYmin,
      xmax: mapXmax,
      ymax: mapYmax
    });
    view.extent = startExtent;
    setEvent1(window[mapId + "mapObj"][mapId + "view"], PointLayer, markPointFn);
  }
  static markPoint1(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;
    }
    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].netstatus == "yes") {
        longitude = data[i].apeLongitude;
        latitude = data[i].apeLatitude;
        videoImage = imgObj.online.imgUrl;
        width = imgObj.online.width;
        height = imgObj.online.height;
      } else {
        longitude = data[i].apeLongitude;
        latitude = data[i].apeLatitude;
        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);
      }
    }
    setEvent1(window[mapId + "mapObj"][mapId + "view"], PointLayer, markPointFn);
  }
  static markPoint2(data1, mapId, mapLyerName, markPointFn) {
    let PointLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(mapLyerName);
    if (PointLayer) {
      PointLayer.removeAll();
      tempObj = {};
    } 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;
    }
    for (const c in data1) {
      let data = data1[c].data;
      let imgObj = data1[c].img;
      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].data.netstatus == "yes") {
          longitude = data[i].x;
          latitude = data[i].y;
          videoImage = imgObj.online.imgUrl;
          width = imgObj.online.width;
          height = imgObj.online.height;
        } else {
          longitude = data[i].x;
          latitude = data[i].y;
          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 g = new Graphic(pG);
        PointLayer.add(g);
        if (!tempObj[mapId + "map_" + mapLyerName + "_" + data[i].clusterId]) {
          tempObj[mapId + "map_" + mapLyerName + "_" + data[i].clusterId] = [g];
        } else {
          tempObj[mapId + "map_" + mapLyerName + "_" + data[i].clusterId].push(g);
        }
      }
    }
    setEvent1(window[mapId + "mapObj"][mapId + "view"], PointLayer, markPointFn);
  }
  static htmlBoxScreen(data1, mapId, html, title) {
    if (!data1) {
      return;
    }
    let data = data1;
    let webMercator;
    if (data.x && data.y) {
      if (window[mapId + "mapObj"][mapId + "map"].spatialReference && window[mapId + "mapObj"][mapId + "map"].spatialReference.isWebMercator()) {
        webMercator = webMercatorUtils.lngLatToXY(Number(data.x), Number(data.y));
      } else {
        webMercator = [data.x, data.y];
      }
      let point = {
        type: "point",
        longitude: webMercator[0],
        latitude: webMercator[1]
      };
      let pt = new Point(point);
      window[mapId + "mapObj"][mapId + "view"].popup.autoOpenEnabled = false;
      window[mapId + "mapObj"][mapId + "view"].popup.open({
        title,
        content: html,
        overwriteActions: true,
        location: pt,
        fetchFeatures: false,
        collapseEnabled: false,
        dockOptions: {
          buttonEnabled: false
        },
        highlightEnabled: false,
        includeDefaultActions: false
      });
      hoverFlag = data.data ? data.data.id : "1";
      $(".hoverBgStyle").css({
        display: "none"
      });
      setTimeout(() => {
        $(".esri-popup__button").on("click", function() {
          hoverFlag = "1";
        });
        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 htmlBoxScreen1(data1, mapId, html, title) {
    if (!data1) {
      return;
    }
    let data = data1;
    let webMercator;
    if (data.x && data.y) {
      if (window[mapId + "mapObj"][mapId + "map"].spatialReference && window[mapId + "mapObj"][mapId + "map"].spatialReference.isWebMercator()) {
        webMercator = webMercatorUtils.lngLatToXY(Number(data.x), Number(data.y));
      } else {
        webMercator = [data.x, data.y];
      }
      let point = {
        type: "point",
        longitude: webMercator[0],
        latitude: webMercator[1]
      };
      let pt = new Point(point);
      window[mapId + "mapObj"][mapId + "view"].popup.autoOpenEnabled = false;
      window[mapId + "mapObj"][mapId + "view"].popup.open({
        title,
        content: html,
        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";
        });
        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 getPolygonCenter(pointArr) {
    const polygon = new Polygon({
      rings: pointArr
    });
    let centerPoint = polygon.centroid;
    return centerPoint;
  }
  static roundCircle(mapId, data, layerId, m, colorObj, subAdd, subFn, yesFn) {
    let webMercator;
    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];
    }
    webMercatorUtils.xyToLngLat(
      Number(data.longitude),
      Number(data.latitude)
    );
    let pointLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(layerId);
    let map = window[mapId + "mapObj"][mapId + "view"];
    let view = window[mapId + "mapObj"][mapId + "view"];
    pointLayer.removeAll();
    $(".pointRoundBox").css({
      display: "none"
    });
    let point = {
      type: "point",
      longitude: webMercator[0],
      latitude: webMercator[1]
    };
    let name = "meters";
    let pt = new Point(point);
    let Circle$1 = {
      center: pt,
      geodesic: true,
      numberOfPoints: 100,
      radius: m,
      radiusUnit: name
    };
    let circle = new Circle(Circle$1);
    let aa = {
      geometry: circle
    };
    let circleGraphic = new Graphic(aa);
    let sectorSym = {
      type: "simple-fill",
      style: "solid",
      color: colorObj.fillColor,
      outline: {
        width: "4px",
        color: colorObj.boderColor
      }
    };
    let polygon = new Polygon({
      rings: circleGraphic.geometry.rings[0]
    });
    let Graphic$1 = {
      geometry: polygon,
      symbol: sectorSym,
      attributes: data
    };
    let sectorGrp = new Graphic(Graphic$1);
    pointLayer.add(sectorGrp);
    let pRings = sectorGrp.geometry.rings[0];
    let maxX = 0;
    pRings.map((item) => {
      if (Number(item[0]) > maxX) {
        maxX = item[0];
      }
    });
    console.log(maxX);
    let point1 = {
      type: "point",
      longitude: maxX,
      latitude: webMercator[1]
    };
    let centerX = webMercator[0] + (maxX - webMercator[0]) / 2;
    console.log(centerX);
    let point2 = {
      type: "point",
      longitude: centerX,
      latitude: webMercator[1]
    };
    let pt2 = new Point(point2);
    let symbol4 = {
      url: colorObj.textBg,
      width: 50 * dpr,
      height: 30 * dpr,
      yoffset: 20
    };
    let PictureMarkerSymbol$1 = new PictureMarkerSymbol(symbol4);
    let pG = {
      geometry: pt2,
      symbol: PictureMarkerSymbol$1
    };
    let g = new Graphic(pG);
    pointLayer.add(g);
    let textSymbol = {
      type: "text",
      color: "#fff",
      text: m + "\u7C73",
      font: {
        size: 14 * dpr,
        family: "Arial Unicode MS",
        weight: "bold"
      },
      yoffset: 18
    };
    let pointGraphic1 = new Graphic({
      geometry: pt2,
      symbol: textSymbol
    });
    pointLayer.add(pointGraphic1);
    let line = new Polyline({
      paths: [
        [point.longitude, point.latitude],
        [point1.longitude, point1.latitude]
      ]
    });
    let symbol1 = {
      color: colorObj.boderColor,
      width: "2px",
      style: "dash"
    };
    let sls = new SimpleLineSymbol(symbol1);
    let bb = {
      geometry: line,
      symbol: sls
    };
    let circleGraphic1 = new Graphic(bb);
    pointLayer.add(circleGraphic1);
    let pt1 = new Point(point1);
    $(".pointRoundBox").css({
      display: "block"
    });
    let scrPt = map.toScreen(pt1);
    if (map.spatialReference.isWebMercator) {
      pt = webMercatorUtils.geographicToWebMercator(pt);
    }
    $(".pointRoundBox").css({
      left: scrPt.x - 22 * dpr + "px",
      top: scrPt.y - 26 * dpr + "px"
    });
    roundShow = 2;
    setTimeout(() => {
      $(".pointRoundN").off().on("click", function() {
        pointLayer.removeAll();
        $(".pointRoundBox").css({
          display: "none"
        });
        roundShow = 1;
      });
      $(".pointRoundAdd").off().on("click", function() {
        subAdd();
      });
      $(".pointRoundSub").off().on("click", function() {
        subFn();
      });
      $(".pointRoundY").off().on("click", function() {
        pointLayer.removeAll();
        $(".pointRoundBox").css({
          display: "none"
        });
        roundShow = 1;
        yesFn(sectorGrp.geometry.rings[0]);
      });
    }, 50);
    watchUtils.watch(view, "extent", (extent) => {
      if (roundShow == 2) {
        $(".pointRoundBox").css({
          display: "block"
        });
        let scrPt2 = map.toScreen(pt1);
        if (map.spatialReference.isWebMercator) {
          pt = webMercatorUtils.geographicToWebMercator(pt);
        }
        $(".pointRoundBox").css({
          left: scrPt2.x - 22 * dpr + "px",
          top: scrPt2.y - 26 * dpr + "px"
        });
      }
      setTimeout(() => {
        $(".pointRoundN").off().on("click", function() {
          pointLayer.removeAll();
          $(".pointRoundBox").css({
            display: "none"
          });
          roundShow = 1;
        });
        $(".pointRoundAdd").off().on("click", function() {
          subAdd();
        });
        $(".pointRoundSub").off().on("click", function() {
          subFn();
        });
        $(".pointRoundY").off().on("click", function() {
          pointLayer.removeAll();
          $(".pointRoundBox").css({
            display: "none"
          });
          roundShow = 1;
          yesFn(sectorGrp.geometry.rings[0]);
        });
      }, 50);
    });
    return sectorGrp.geometry.rings[0];
  }
  static sectorGeo(mapId, data, angle, layerId, Km) {
    let webMercator;
    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];
    }
    webMercatorUtils.xyToLngLat(
      Number(data.longitude),
      Number(data.latitude)
    );
    window[mapId + "mapObj"][mapId + "map"].findLayerById(layerId);
    let secPoints1 = getPoints(
      [webMercator[0], webMercator[1]],
      Km * 1e3,
      angle - 0.12,
      angle + 45,
      400
    );
    let point = {
      type: "point",
      longitude: webMercator[0],
      latitude: webMercator[1]
    };
    let name = "meters";
    let pt = new Point(point);
    let Circle$1 = {
      center: pt,
      geodesic: true,
      numberOfPoints: 100,
      radius: 1e3,
      radiusUnit: name
    };
    let circle = new Circle(Circle$1);
    let aa = {
      geometry: circle
    };
    new Graphic(aa);
    let sectorSym = {
      type: "simple-fill",
      style: "solid",
      color: [255, 0, 0, 0.3],
      outline: {
        width: "0.5px",
        color: [255, 0, 0]
      }
    };
    let polygon = new Polygon({
      rings: secPoints1
    });
    let secPoints = webMercatorUtils.geographicToWebMercator(polygon);
    let Graphic$1 = {
      geometry: secPoints,
      symbol: sectorSym,
      attributes: {
        lon: 12,
        lat: 444,
        name: 5555
      }
    };
    new Graphic(Graphic$1);
    return secPoints1;
  }
  static sectorGeo1(mapId, data, angle, layerId) {
    let pointLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(layerId);
    let radius = 200 * dpr;
    let symbol = {
      color: [0, 170, 255, 0.8],
      outline: {
        color: [5, 125, 185, 0.4],
        width: "1px"
      }
    };
    let symbol1 = {
      color: [55, 55, 55, 0.2]
    };
    let sfs = new SimpleFillSymbol(symbol);
    let sls = new SimpleLineSymbol(symbol1);
    let webMercator;
    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 ptCenter = pt;
    let point1 = {
      type: "point",
      longitude: ptCenter.x,
      latitude: ptCenter.y + radius * Math.sqrt(2)
    };
    let ptEnd = new Point(point1);
    let ptStart = geometryEngine.rotate(ptEnd, 22.5, ptCenter);
    let ptStop = geometryEngine.rotate(ptEnd, -22.5, ptCenter);
    let paCenter = [ptCenter.x, ptCenter.y];
    let paStart = [ptStart.x, ptStart.y];
    let paStop = [ptStop.x, ptStop.y];
    let triangle = new Polygon();
    triangle.addRing([paCenter, paStart, paStop, paCenter]);
    let Circle$1 = {
      center: ptCenter,
      geodesic: false,
      radius
    };
    let circle = new Circle(Circle$1);
    let aa = {
      geometry: circle,
      symbol: sls
    };
    let circleGraphic = new Graphic(aa);
    pointLayer.add(circleGraphic);
    circleGraphic.visible = false;
    let sector = geometryEngine.intersect(triangle, circle);
    angle = Number(angle);
    if (!angle) {
      angle = 0;
    }
    let offsetAngle = 0;
    offsetAngle = Number(offsetAngle);
    if (!offsetAngle) {
      offsetAngle = 0;
    }
    let realAngle = angle + offsetAngle;
    sector = geometryEngine.rotate(sector, -realAngle, ptCenter);
    let aa1 = {
      geometry: circle,
      symbol: sfs
    };
    new Graphic(aa1);
  }
  static delSingleP(mapId, layerName, data) {
    let fixedLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(layerName);
    let pointArr = tempObj[mapId + "map_" + layerName + "_" + data.clusterId];
    if (pointArr) {
      for (let i = 0; i < pointArr.length; i++) {
        fixedLayer.remove(pointArr[i]);
      }
    }
  }
  static addFootholdPonits(mapId, mapLyerName, data, imgArr, titleImg) {
    config.fontsUrl = "/static/font/";
    if (!data[0] || !mapId) {
      return;
    }
    let PointLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(mapLyerName);
    PointLayer.removeAll();
    let MinW = titleImg.width * dpr;
    let p = {
      type: "point",
      longitude: data[0].x,
      latitude: data[0].y
    };
    let pt = new Point(p);
    let p1 = {
      type: "point",
      longitude: data[1].x,
      latitude: data[1].y
    };
    let pt1 = new Point(p1);
    if (window[mapId + "mapObj"][mapId + "view"].spatialReference.isWebMercator) {
      pt = webMercatorUtils.geographicToWebMercator(pt);
      pt1 = webMercatorUtils.geographicToWebMercator(pt1);
    }
    let symbol = {
      url: imgArr[0].imgUrl,
      width: imgArr[0].width * dpr,
      height: imgArr[0].height * dpr
    };
    let symbol1 = {
      url: imgArr[1].imgUrl,
      width: imgArr[1].width * dpr,
      height: imgArr[1].height * dpr
    };
    let wid1 = MinW;
    let wid2 = MinW;
    if (data[0].name.length <= 3) {
      wid1 = MinW;
    } else {
      wid1 = (data[0].name + "").length * 8;
    }
    if (data[1].name.length <= 3) {
      wid2 = MinW;
    } else {
      wid2 = (data[1].name + "").length * 8;
    }
    let symbol3 = {
      url: titleImg.imgUrl,
      width: wid1,
      height: titleImg.height,
      yoffset: titleImg.height * dpr + 10 + "px"
    };
    let symbol4 = {
      url: titleImg.imgUrl,
      width: wid2,
      height: titleImg.height,
      yoffset: titleImg.height * dpr + 10 + "px"
    };
    let PictureMarkerSymbol$1 = new PictureMarkerSymbol(symbol);
    let PictureMarkerSymbol1 = new PictureMarkerSymbol(symbol1);
    new PictureMarkerSymbol(symbol3);
    new PictureMarkerSymbol(symbol4);
    let pG = {
      geometry: pt,
      symbol: PictureMarkerSymbol$1
    };
    let pG1 = {
      geometry: pt1,
      symbol: PictureMarkerSymbol1
    };
    let textSymbol = {
      type: "text",
      color: "#fff",
      text: "\u524D",
      font: {
        size: 14 * dpr,
        family: "Arial Unicode MS",
        weight: "bold"
      },
      yoffset: -3
    };
    let textSymbol1 = {
      type: "text",
      color: "#fff",
      text: "\u540E",
      font: {
        size: 14 * dpr,
        family: "Arial Unicode MS",
        weight: "bold"
      },
      yoffset: -3
    };
    let textSymbol3 = {
      type: "text",
      color: "#fff",
      text: data[0].name + "",
      font: {
        size: 14 * dpr,
        family: "Arial Unicode MS",
        weight: "bold"
      },
      yoffset: titleImg.height * dpr + 10 + "px"
    };
    let textSymbol4 = {
      type: "text",
      color: "#fff",
      text: data[1].name + "",
      font: {
        size: 14 * dpr,
        family: "Arial Unicode MS",
        weight: "bold"
      },
      yoffset: titleImg.height * dpr + 10 + "px"
    };
    let g = new Graphic(pG);
    let g1 = new Graphic(pG1);
    PointLayer.add(g);
    PointLayer.add(g1);
    let pointGraphic1 = new Graphic({
      geometry: pt,
      symbol: textSymbol
    });
    let pointGraphic2 = new Graphic({
      geometry: pt1,
      symbol: textSymbol1
    });
    new Graphic({
      geometry: pt,
      symbol: textSymbol3
    });
    new Graphic({
      geometry: pt1,
      symbol: textSymbol4
    });
    PointLayer.add(pointGraphic1);
    PointLayer.add(pointGraphic2);
    let mapXmin = 0;
    let mapXmax = 0;
    let mapYmin = 0;
    let mapYmax = 0;
    for (let i = 0; i < data.length; i++) {
      if (mapXmin == 0) {
        mapXmin = data[i].x - 0.01;
      } else {
        if (data[i].x < mapXmin) {
          mapXmin = data[i].x - 0.01;
        }
      }
      if (mapXmax == 0) {
        mapXmax = data[i].x + 0.01;
      } else {
        if (data[i].x > mapXmax) {
          mapXmax = data[i].x + 0.01;
        }
      }
      if (mapYmin == 0) {
        mapYmin = data[i].y - 0.01;
      } else {
        if (data[i].y < mapYmin) {
          mapYmin = data[i].y - 0.01;
        }
      }
      if (mapYmax == 0) {
        mapYmax = data[i].y + 0.01;
      } else {
        if (data[i].y > mapYmax) {
          mapYmax = data[i].y + 0.01;
        }
      }
    }
    arctiveFlag = 1;
    let view = window[mapId + "mapObj"][mapId + "view"];
    let map = window[mapId + "mapObj"][mapId + "view"];
    watchUtils.watch(view, "extent", (extent) => {
      if (arctiveFlag == 1) {
        if ($(".arctiveTitle")) {
          $(".arctiveTitle").remove();
        }
        let html = `<div class="arctiveTitle arctiveTitle1">
          ${data[0].name}
          </div>`;
        let html1 = `<div class="arctiveTitle arctiveTitle2">
        ${data[1].name}
          </div>`;
        $(".gisMap").append(html);
        $(".gisMap").append(html1);
        let scrPt = map.toScreen(pt);
        let scrPt1 = map.toScreen(pt1);
        console.log(scrPt, scrPt1);
        $(".arctiveTitle1").css({
          display: "block",
          background: "url(" + symbol3.url + ") no-repeat",
          height: symbol3.height + "px",
          lineHeight: symbol3.height * 0.7 + "px",
          backgroundSize: "100% 100%",
          left: scrPt.x + "px",
          top: scrPt.y - symbol3.height - 26 + "px"
        });
        $(".arctiveTitle2").css({
          display: "block",
          background: "url(" + symbol4.url + ") no-repeat",
          height: symbol4.height + "px",
          lineHeight: symbol4.height * 0.7 + "px",
          backgroundSize: "100% 100%",
          left: scrPt1.x + "px",
          top: scrPt1.y - symbol4.height - 26 + "px"
        });
      }
    });
    let startExtent = new Extent({
      xmin: mapXmin,
      ymin: mapYmin,
      xmax: mapXmax,
      ymax: mapYmax
    });
    window[mapId + "mapObj"][mapId + "view"].extent = startExtent;
  }
  static arctiveCloseFlag() {
    arctiveFlag = 2;
    $(".arctiveTitle").remove();
  }
  static addSingleP(data, mapId, mapLyerName, imgObj, markPointFn, fontColor) {
    if (!data[0] || !mapId) {
      return;
    }
    let PointLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(mapLyerName);
    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++) {
            if (a[c].cluster) {
              longitude = a[c].x;
              latitude = a[c].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 (a[c].data.netstatus == "yes") {
                longitude = a[c].data.longitude;
                latitude = a[c].data.latitude;
                videoImage = imgObj.online.imgUrl;
                width = imgObj.online.width;
                height = imgObj.online.height;
              } else {
                longitude = a[c].data.longitude;
                latitude = a[c].data.latitude;
                videoImage = imgObj.offline.imgUrl;
                width = imgObj.online.width;
                height = imgObj.online.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);
      console.log(pt);
      if (window[mapId + "mapObj"][mapId + "view"].spatialReference.isWebMercator) {
        pt = webMercatorUtils.geographicToWebMercator(pt);
      }
      let symbol = {
        url: videoImage,
        width: width * dpr,
        height: height * dpr
      };
      console.log(symbol);
      let PictureMarkerSymbol$1 = new PictureMarkerSymbol(symbol);
      console.log(data[i]);
      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
      };
      console.log(pG);
      let g = new Graphic(pG);
      console.log(PointLayer);
      PointLayer.add(g);
      let pointArr = lineObj[mapId + "map_" + mapLyerName + "_" + data[i].clusterId];
      if (pointArr) {
        for (let i2 = 0; i2 < pointArr.length; i2++) {
          PointLayer.remove(pointArr[i2]);
        }
      }
      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);
        tempObj[mapId + "map_" + mapLyerName + "_" + data[i].clusterId].push(pointGraphic1);
      }
    }
    setEvent(window[mapId + "mapObj"][mapId + "view"], PointLayer, markPointFn);
  }
  static roundHeatMap(data, mapId, mapLyerName) {
    if (!data[0] || !mapId) {
      return;
    }
    let map = window[mapId + "mapObj"][mapId + "map"];
    let rendererT = {
      type: "heatmap",
      colorStops: [
        { ratio: 0, color: "rgba(255, 255, 255, 0)" },
        { color: "#00AFFF", ratio: 0.083 },
        { color: "#00AFFF", ratio: 0.166 },
        { ratio: 0.2, color: "#14B441" },
        { ratio: 0.5, color: "#FFFA00" },
        { ratio: 0.8, color: "rgba(255, 140, 0, 1)" },
        { ratio: 1, color: "rgba(255, 0, 0, 1)" }
      ],
      maxDensity: 0.1,
      minDensity: 0,
      radius: 40
    };
    let features = [];
    for (let i = 0; i < data.length; i++) {
      features.push({
        geometry: {
          type: "point",
          x: data[i].x,
          y: data[i].y
        },
        attributes: {
          ObjectID: data[i].ObjectID,
          crime_count: data[i].crime_count
        }
      });
    }
    let featureLayer = new FeatureLayer({
      id: mapLyerName + "",
      geometryType: "point",
      source: features,
      title: "\u70ED\u529B\u56FE",
      fields: [
        { name: "ObjectID", alias: "ObjectID", type: "oid" },
        { name: "crime_count", alias: "crime_count", type: "integer" }
      ],
      objectIdField: "ObjectID",
      renderer: rendererT
    });
    map.add(featureLayer);
  }
  static addSingleP1(data, mapId, mapLyerName, imgObj, markPointFn, fontColor) {
    if (!data[0] || !mapId) {
      return;
    }
    let PointLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(mapLyerName);
    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++) {
            if (a[c].cluster) {
              longitude = a[c].x;
              latitude = a[c].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 (a[c].data.netstatus == "yes") {
                longitude = a[c].data.longitude;
                latitude = a[c].data.latitude;
                videoImage = imgObj.online.imgUrl;
                width = imgObj.online.width;
                height = imgObj.online.height;
              } else {
                longitude = a[c].data.longitude;
                latitude = a[c].data.latitude;
                videoImage = imgObj.offline.imgUrl;
                width = imgObj.online.width;
                height = imgObj.online.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);
      let pointArr = lineObj[mapId + "map_" + mapLyerName + "_" + data[i].clusterId];
      if (pointArr) {
        for (let i2 = 0; i2 < pointArr.length; i2++) {
          PointLayer.remove(pointArr[i2]);
        }
      }
      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);
        tempObj[mapId + "map_" + mapLyerName + "_" + data[i].clusterId].push(pointGraphic1);
      }
    }
    setEvent(window[mapId + "mapObj"][mapId + "view"], PointLayer, markPointFn);
  }
  static addTrackLine(mapId, layerId, lineArr, lineColor, textFlag) {
    config.fontsUrl = "/static/font/";
    let pointLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(layerId);
    let Y = lineArr.filter((item, index) => {
      return item[0] && item[1];
    });
    let symbol1 = {
      type: "CIMLineSymbol",
      symbolLayers: [
        {
          type: "CIMPictureMarker",
          enable: true,
          anchorPointUnits: "Relative",
          dominantSizeAxis3D: "Y",
          rotateClockwise: true,
          rotation: 90,
          size: 8,
          billboardMode3D: "FaceNearPlane",
          markerPlacement: {
            type: "CIMMarkerPlacementAlongLineSameSize",
            angleToLine: true,
            offset: 0,
            controlPointsPlacement: "WithFullGap",
            customEndingOffset: 0,
            endings: "NoConstraint",
            offsetAlongLine: 0,
            placementTemplate: ["20", "20"]
          },
          invertBackfaceTexture: true,
          scaleX: 1,
          textureFilter: "Picture",
          tintColor: [255, 255, 255, 255],
          url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAICAYAAADN5B7xAAAAAXNSR0IArs4c6QAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAADKADAAQAAAABAAAACAAAAADFRH6nAAAAg0lEQVQYGWNgwAL+//9fAsQNWKQwhaCKgRQYVGCqQBIBKgGZjA4KkJQgmEBVDUgqk4HsuUh8VE1AiW4kyUyQMUA+IxAvQRcHSdQjCaKYBBRnAuLVSPKZTEDDGKEOK2RkZJwAZYMpIP8fkBEBxJuAGMT+BsRg653ADBwE0AYWILYFSQMA6xeauOeqhe8AAAAASUVORK5CYII="
        },
        {
          type: "CIMSolidStroke",
          enable: true,
          capStyle: "Butt",
          joinStyle: "Round",
          lineStyle3D: "Strip",
          miterLimit: 10,
          width: 10,
          color: lineColor || [26, 85, 203, 255],
          colorLocked: true
        }
      ]
    };
    let aa = {
      data: {
        type: "CIMSymbolReference",
        symbol: symbol1
      }
    };
    let symbol = new CIMSymbol(aa);
    let line = new Polyline({
      paths: Y
    });
    let bb = {
      geometry: line,
      symbol
    };
    let circleGraphic = new Graphic(bb);
    pointLayer.add(circleGraphic);
    for (let i = 0; i < lineArr.length; i++) {
      if (!lineArr[i][0] || !lineArr[i][1]) {
        continue;
      }
      let symbol2 = {
        type: "CIMPointSymbol",
        symbolLayers: [
          {
            type: "CIMVectorMarker",
            enable: true,
            anchorPointUnits: "Relative",
            dominantSizeAxis3D: "Y",
            size: 24,
            billboardMode3D: "FaceNearPlane",
            frame: {
              xmin: 0,
              ymin: 0,
              xmax: 15,
              ymax: 17
            },
            markerGraphics: [
              {
                type: "CIMMarkerGraphic",
                geometry: {
                  rings: [
                    [
                      [10.21, 2],
                      [9.26, 1.84],
                      [8.54, 1.43],
                      [8.11, 0.82],
                      [7.96, 0],
                      [7.04, 0],
                      [6.89, 0.82],
                      [6.46, 1.43],
                      [5.74, 1.84],
                      [4.79, 2],
                      [2.31, 2],
                      [1.43, 2.15],
                      [0.68, 2.59],
                      [0.18, 3.24],
                      [0, 4],
                      [0, 17],
                      [15, 17],
                      [15, 4.01],
                      [14.83, 3.24],
                      [14.33, 2.59],
                      [13.58, 2.15],
                      [12.69, 2],
                      [10.21, 2]
                    ]
                  ]
                },
                symbol: {
                  type: "CIMPolygonSymbol",
                  symbolLayers: [
                    {
                      type: "CIMSolidStroke",
                      enable: true,
                      capStyle: "Round",
                      joinStyle: "Round",
                      lineStyle3D: "Strip",
                      miterLimit: 10,
                      width: 1,
                      color: [255, 255, 255, 255]
                    },
                    {
                      type: "CIMSolidFill",
                      enable: true,
                      color: lineColor || [42, 156, 213, 255]
                    }
                  ]
                }
              }
            ],
            scaleSymbolsProportionally: true,
            respectFrame: true,
            offsetY: 12
          }
        ]
      };
      let aa1 = {
        data: {
          type: "CIMSymbolReference",
          symbol: symbol2
        }
      };
      let symbol3 = new CIMSymbol(aa1);
      let point = {
        type: "point",
        longitude: Number(lineArr[i][0]),
        latitude: Number(lineArr[i][1])
      };
      let pt = new Point(point);
      let text = "";
      if (textFlag == "1") {
        if (i == 0) {
          text = "\u8D77";
        } else if (i == lineArr.length - 1) {
          text = "\u7EC8";
        }
      } else if (textFlag == "2") {
        if (i == 0) {
          text = "\u8D77";
        } else if (i == lineArr.length - 1) {
          text = "\u7EC8";
        } else {
          text = "\u7ECF";
        }
      } else if (textFlag == "3") {
        text = i + 1 + "";
      }
      let textSymbol = {
        type: "text",
        color: "#fff",
        text,
        font: {
          size: 14 * dpr,
          family: "Arial Unicode MS",
          weight: "bold"
        },
        yoffset: 9
      };
      let cc = {
        geometry: pt,
        symbol: symbol3
      };
      let cc1 = {
        geometry: pt,
        symbol: textSymbol
      };
      let circleGraphic1 = new Graphic(cc);
      let circleGraphic2 = new Graphic(cc1);
      if (textFlag == "1") {
        if (i == 0 || i == lineArr.length - 1) {
          pointLayer.add(circleGraphic1);
          pointLayer.add(circleGraphic2);
        }
      } else {
        pointLayer.add(circleGraphic1);
        pointLayer.add(circleGraphic2);
      }
    }
  }
  static addTrackLineCheckP(mapId, data, index, text, lineColor) {
    let pointLayer1 = window[mapId + "mapObj"][mapId + "map"].findLayerById("MoveLayerText1");
    if (pointLayer1) {
      pointLayer1.removeAll();
    }
    let size = 26;
    if ((index + "").length > 2 && (index + "").length < 4) {
      size = 38;
    } else if ((index + "").length > 3 && (index + "").length < 5) {
      size = 50;
    } else if ((index + "").length >= 5) {
      size = 62;
    }
    let symbol2 = {
      type: "CIMPointSymbol",
      symbolLayers: [
        {
          type: "CIMVectorMarker",
          enable: true,
          anchorPointUnits: "Relative",
          dominantSizeAxis3D: "Y",
          size,
          billboardMode3D: "FaceNearPlane",
          frame: {
            xmin: 0,
            ymin: 0,
            xmax: 15,
            ymax: 17
          },
          markerGraphics: [
            {
              type: "CIMMarkerGraphic",
              geometry: {
                rings: [
                  [
                    [10.21, 2],
                    [9.26, 1.84],
                    [8.54, 1.43],
                    [8.11, 0.82],
                    [7.96, 0],
                    [7.04, 0],
                    [6.89, 0.82],
                    [6.46, 1.43],
                    [5.74, 1.84],
                    [4.79, 2],
                    [2.31, 2],
                    [1.43, 2.15],
                    [0.68, 2.59],
                    [0.18, 3.24],
                    [0, 4],
                    [0, 17],
                    [15, 17],
                    [15, 4.01],
                    [14.83, 3.24],
                    [14.33, 2.59],
                    [13.58, 2.15],
                    [12.69, 2],
                    [10.21, 2]
                  ]
                ]
              },
              symbol: {
                type: "CIMPolygonSymbol",
                symbolLayers: [
                  {
                    type: "CIMSolidStroke",
                    enable: true,
                    capStyle: "Round",
                    joinStyle: "Round",
                    lineStyle3D: "Strip",
                    miterLimit: 10,
                    width: 1,
                    color: [255, 255, 255, 255]
                  },
                  {
                    type: "CIMSolidFill",
                    enable: true,
                    color: lineColor || [21, 72, 239, 255]
                  }
                ]
              }
            }
          ],
          scaleSymbolsProportionally: true,
          respectFrame: true,
          offsetY: 12
        }
      ]
    };
    let aa1 = {
      data: {
        type: "CIMSymbolReference",
        symbol: symbol2
      }
    };
    let symbol3 = new CIMSymbol(aa1);
    let point = {
      type: "point",
      longitude: Number(data[0]),
      latitude: Number(data[1])
    };
    let pt = new Point(point);
    let textSymbol = {
      type: "text",
      color: "#fff",
      text,
      font: {
        size: 14 * dpr,
        family: "Arial Unicode MS",
        weight: "bold"
      },
      yoffset: 9
    };
    let cc = {
      geometry: pt,
      symbol: symbol3
    };
    let cc1 = {
      geometry: pt,
      symbol: textSymbol
    };
    let circleGraphic1 = new Graphic(cc);
    let circleGraphic2 = new Graphic(cc1);
    pointLayer1.add(circleGraphic1);
    pointLayer1.add(circleGraphic2);
  }
  static addOnlyTrackLine(mapId, layerId, data, lineArrIds, lineArrIdFn) {
    config.fontsUrl = "/static/font/";
    let view = window[mapId + "mapObj"][mapId + "view"];
    let pointLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(layerId);
    let pointLayer1 = window[mapId + "mapObj"][mapId + "map"].findLayerById("MoveLayerText");
    let mapXmin = 0;
    let mapXmax = 0;
    let mapYmin = 0;
    let mapYmax = 0;
    for (let c = 0; c < data.length; c++) {
      let lineColor = data[c].color;
      let lineArr = data[c].data;
      let id = data[c].flagId;
      let Y = lineArr.filter((item, index) => {
        return item[0] && item[1];
      });
      let symbol1 = {
        type: "CIMLineSymbol",
        symbolLayers: [
          {
            type: "CIMPictureMarker",
            enable: true,
            anchorPointUnits: "Relative",
            dominantSizeAxis3D: "Y",
            rotateClockwise: true,
            rotation: 90,
            size: 6,
            billboardMode3D: "FaceNearPlane",
            markerPlacement: {
              type: "CIMMarkerPlacementAlongLineSameSize",
              angleToLine: true,
              offset: 0,
              controlPointsPlacement: "WithFullGap",
              customEndingOffset: 0,
              endings: "NoConstraint",
              offsetAlongLine: 0,
              placementTemplate: ["20", "20"]
            },
            invertBackfaceTexture: true,
            scaleX: 1,
            textureFilter: "Picture",
            tintColor: [255, 255, 255, 255],
            url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAICAYAAADN5B7xAAAAAXNSR0IArs4c6QAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAADKADAAQAAAABAAAACAAAAADFRH6nAAAAg0lEQVQYGWNgwAL+//9fAsQNWKQwhaCKgRQYVGCqQBIBKgGZjA4KkJQgmEBVDUgqk4HsuUh8VE1AiW4kyUyQMUA+IxAvQRcHSdQjCaKYBBRnAuLVSPKZTEDDGKEOK2RkZJwAZYMpIP8fkBEBxJuAGMT+BsRg653ADBwE0AYWILYFSQMA6xeauOeqhe8AAAAASUVORK5CYII="
          },
          {
            type: "CIMSolidStroke",
            enable: true,
            capStyle: "Butt",
            joinStyle: "Round",
            lineStyle3D: "Strip",
            miterLimit: 10,
            width: 8,
            color: lineColor || [26, 85, 203, 255],
            colorLocked: true
          }
        ]
      };
      let aa = {
        data: {
          type: "CIMSymbolReference",
          symbol: symbol1
        }
      };
      let symbol = new CIMSymbol(aa);
      let line = new Polyline({
        paths: Y
      });
      let bb = {
        geometry: line,
        symbol,
        attributes: lineArrIds[c]
      };
      let circleGraphic = new Graphic(bb);
      let pointArr = lineObj[mapId + "map_" + layerId + "_" + id];
      if (pointArr) {
        for (let i = 0; i < pointArr.length; i++) {
          pointLayer.remove(pointArr[i]);
        }
      }
      lineObj[mapId + "map_" + layerId + "_" + id] = [circleGraphic];
      pointLayer.add(circleGraphic);
      let pointArr1 = lineObj1[mapId + "map_" + layerId + "_" + id];
      if (pointArr1) {
        for (let i = 0; i < pointArr1.length; i++) {
          pointLayer1.remove(pointArr1[i]);
        }
      }
      lineObj1[mapId + "map_" + layerId + "_" + id] = [];
      for (let i = 0; i < lineArr.length; i++) {
        if (!lineArr[i][0] || !lineArr[i][1]) {
          continue;
        }
        if (mapXmin == 0) {
          mapXmin = lineArr[i][0] - 0.02;
        } else {
          if (lineArr[i][0] < mapXmin) {
            mapXmin = lineArr[i][0] - 0.02;
          }
        }
        if (mapXmax == 0) {
          mapXmax = lineArr[i][0] + 0.02;
        } else {
          if (lineArr[i][0] > mapXmax) {
            mapXmax = lineArr[i][0] + 0.02;
          }
        }
        if (mapYmin == 0) {
          mapYmin = lineArr[i][1] - 0.02;
        } else {
          if (lineArr[i][1] < mapYmin) {
            mapYmin = lineArr[i][1] - 0.02;
          }
        }
        if (mapYmax == 0) {
          mapYmax = lineArr[i][1] + 0.02;
        } else {
          if (lineArr[i][1] > mapYmax) {
            mapYmax = lineArr[i][1] + 0.02;
          }
        }
      }
    }
    console.log();
    let congfig = window[mapId + "mapObj"][mapId + "mapconfig"];
    if (mapXmin < congfig.XMin) {
      mapXmin = congfig.XMin;
    }
    if (mapYmin < congfig.YMin) {
      mapYmin = congfig.YMin;
    }
    if (mapXmax > congfig.XMax) {
      mapXmax = congfig.XMax;
    }
    if (mapYmax > congfig.YMax) {
      mapYmax = congfig.YMax;
    }
    let startExtent = new Extent({
      xmin: mapXmin,
      ymin: mapYmin,
      xmax: mapXmax,
      ymax: mapYmax
    });
    view.extent = startExtent;
    if (CCmouseClick !== 0) {
      CCmouseClick.remove();
    }
    CCmouseClick = view.on("immediate-click", function(event) {
      view.hitTest(event).then((res) => {
        var _a;
        if (res.results.length) {
          let results = res.results.filter((result) => {
            return result.graphic && result.graphic.layer && result.graphic.layer.id === layerId;
          });
          if (!results[0].graphic) {
            return;
          }
          let arr = [];
          for (let i = 0; i < results.length; i++) {
            arr.push((_a = results[i].graphic) == null ? void 0 : _a.attributes);
          }
          lineArrIdFn(arr);
        }
      });
    });
    pointLayer.on("layerview-destroy", function(event) {
      CCmouseClick.remove();
    });
    pointLayer1.on("layerview-destroy", function(event) {
      CCmouseClick.remove();
    });
  }
  static addTrackLine1(mapId, layerId, data, textFlag, lineArrIds, lineArrIdFn) {
    config.fontsUrl = "/static/font/";
    let view = window[mapId + "mapObj"][mapId + "view"];
    let pointLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(layerId);
    let pointLayer1 = window[mapId + "mapObj"][mapId + "map"].findLayerById("MoveLayerText");
    let mapXmin = 0;
    let mapXmax = 0;
    let mapYmin = 0;
    let mapYmax = 0;
    for (let c = 0; c < data.length; c++) {
      let lineColor = data[c].color;
      let lineArr = data[c].data;
      let id = data[c].flagId;
      let Y = lineArr.filter((item, index) => {
        return item[0] && item[1];
      });
      let symbol1 = {
        type: "CIMLineSymbol",
        symbolLayers: [
          {
            type: "CIMPictureMarker",
            enable: true,
            anchorPointUnits: "Relative",
            dominantSizeAxis3D: "Y",
            rotateClockwise: true,
            rotation: 90,
            size: 6,
            billboardMode3D: "FaceNearPlane",
            markerPlacement: {
              type: "CIMMarkerPlacementAlongLineSameSize",
              angleToLine: true,
              offset: 0,
              controlPointsPlacement: "WithFullGap",
              customEndingOffset: 0,
              endings: "NoConstraint",
              offsetAlongLine: 0,
              placementTemplate: ["20", "20"]
            },
            invertBackfaceTexture: true,
            scaleX: 1,
            textureFilter: "Picture",
            tintColor: [255, 255, 255, 255],
            url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAICAYAAADN5B7xAAAAAXNSR0IArs4c6QAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAADKADAAQAAAABAAAACAAAAADFRH6nAAAAg0lEQVQYGWNgwAL+//9fAsQNWKQwhaCKgRQYVGCqQBIBKgGZjA4KkJQgmEBVDUgqk4HsuUh8VE1AiW4kyUyQMUA+IxAvQRcHSdQjCaKYBBRnAuLVSPKZTEDDGKEOK2RkZJwAZYMpIP8fkBEBxJuAGMT+BsRg653ADBwE0AYWILYFSQMA6xeauOeqhe8AAAAASUVORK5CYII="
          },
          {
            type: "CIMSolidStroke",
            enable: true,
            capStyle: "Butt",
            joinStyle: "Round",
            lineStyle3D: "Strip",
            miterLimit: 10,
            width: 8,
            color: lineColor || [26, 85, 203, 255],
            colorLocked: true
          }
        ]
      };
      let aa = {
        data: {
          type: "CIMSymbolReference",
          symbol: symbol1
        }
      };
      let symbol = new CIMSymbol(aa);
      let line = new Polyline({
        paths: Y
      });
      let bb = {
        geometry: line,
        symbol
      };
      let circleGraphic = new Graphic(bb);
      let pointArr = lineObj[mapId + "map_" + layerId + "_" + id];
      if (pointArr) {
        for (let i = 0; i < pointArr.length; i++) {
          pointLayer.remove(pointArr[i]);
        }
      }
      lineObj[mapId + "map_" + layerId + "_" + id] = [circleGraphic];
      pointLayer.add(circleGraphic);
      let pointArr1 = lineObj1[mapId + "map_" + layerId + "_" + id];
      if (pointArr1) {
        for (let i = 0; i < pointArr1.length; i++) {
          pointLayer1.remove(pointArr1[i]);
        }
      }
      lineObj1[mapId + "map_" + layerId + "_" + id] = [];
      for (let i = 0; i < lineArr.length; i++) {
        if (!lineArr[i][0] || !lineArr[i][1]) {
          continue;
        }
        let size = 26;
        if ((i + "").length > 2 && (i + "").length < 4) {
          size = 38;
        } else if ((i + "").length > 3 && (i + "").length < 5) {
          size = 50;
        } else if ((i + "").length >= 5) {
          size = 62;
        }
        let symbol2 = {
          type: "CIMPointSymbol",
          symbolLayers: [
            {
              type: "CIMVectorMarker",
              enable: true,
              anchorPointUnits: "Relative",
              dominantSizeAxis3D: "Y",
              size,
              billboardMode3D: "FaceNearPlane",
              frame: {
                xmin: 0,
                ymin: 0,
                xmax: 15,
                ymax: 17
              },
              markerGraphics: [
                {
                  type: "CIMMarkerGraphic",
                  geometry: {
                    rings: [
                      [
                        [10.21, 2],
                        [9.26, 1.84],
                        [8.54, 1.43],
                        [8.11, 0.82],
                        [7.96, 0],
                        [7.04, 0],
                        [6.89, 0.82],
                        [6.46, 1.43],
                        [5.74, 1.84],
                        [4.79, 2],
                        [2.31, 2],
                        [1.43, 2.15],
                        [0.68, 2.59],
                        [0.18, 3.24],
                        [0, 4],
                        [0, 17],
                        [15, 17],
                        [15, 4.01],
                        [14.83, 3.24],
                        [14.33, 2.59],
                        [13.58, 2.15],
                        [12.69, 2],
                        [10.21, 2]
                      ]
                    ]
                  },
                  symbol: {
                    type: "CIMPolygonSymbol",
                    symbolLayers: [
                      {
                        type: "CIMSolidStroke",
                        enable: true,
                        capStyle: "Round",
                        joinStyle: "Round",
                        lineStyle3D: "Strip",
                        miterLimit: 10,
                        width: 1,
                        color: [255, 255, 255, 255]
                      },
                      {
                        type: "CIMSolidFill",
                        enable: true,
                        color: lineColor || [42, 156, 213, 255]
                      }
                    ]
                  }
                }
              ],
              scaleSymbolsProportionally: true,
              respectFrame: true,
              offsetY: 12
            }
          ]
        };
        let aa1 = {
          data: {
            type: "CIMSymbolReference",
            symbol: symbol2
          }
        };
        let symbol3 = new CIMSymbol(aa1);
        if (mapXmin == 0) {
          mapXmin = lineArr[i][0] - 0.02;
        } else {
          if (lineArr[i][0] < mapXmin) {
            mapXmin = lineArr[i][0] - 0.02;
          }
        }
        if (mapXmax == 0) {
          mapXmax = lineArr[i][0] + 0.02;
        } else {
          if (lineArr[i][0] > mapXmax) {
            mapXmax = lineArr[i][0] + 0.02;
          }
        }
        if (mapYmin == 0) {
          mapYmin = lineArr[i][1] - 0.02;
        } else {
          if (lineArr[i][1] < mapYmin) {
            mapYmin = lineArr[i][1] - 0.02;
          }
        }
        if (mapYmax == 0) {
          mapYmax = lineArr[i][1] + 0.02;
        } else {
          if (lineArr[i][1] > mapYmax) {
            mapYmax = lineArr[i][1] + 0.02;
          }
        }
        let point = {
          type: "point",
          longitude: Number(lineArr[i][0]),
          latitude: Number(lineArr[i][1])
        };
        let pt = new Point(point);
        let text = "";
        if (textFlag == "1") {
          if (i == 0) {
            text = "\u8D77";
          } else if (i == lineArr.length - 1) {
            text = "\u7EC8";
          }
        } else if (textFlag == "2") {
          if (i == 0) {
            text = "\u8D77";
          } else if (i == lineArr.length - 1) {
            text = "\u7EC8";
          } else {
            text = "\u7ECF";
          }
        } else if (textFlag == "3") {
          if (lineArr[i][2] && lineArr[i][2] == "1") {
            text = i + 1 + "+";
          } else {
            text = i + 1 + "";
          }
        }
        let textSymbol = {
          type: "text",
          color: "#fff",
          text,
          font: {
            size: 14 * dpr,
            family: "Arial Unicode MS",
            weight: "bold"
          },
          yoffset: 9
        };
        let cc = {
          geometry: pt,
          symbol: symbol3,
          attributes: {
            id: lineArrIds[c][i],
            position: lineArr[i],
            text,
            index: i + 1
          }
        };
        let cc1 = {
          geometry: pt,
          symbol: textSymbol,
          attributes: {
            id: lineArrIds[c][i],
            position: lineArr[i],
            text,
            index: i + 1
          }
        };
        let circleGraphic1 = new Graphic(cc);
        let circleGraphic2 = new Graphic(cc1);
        if (textFlag == "1") {
          if (i == 0 || i == lineArr.length - 1) {
            pointLayer1.add(circleGraphic1);
            pointLayer1.add(circleGraphic2);
            lineObj1[mapId + "map_" + layerId + "_" + id].push(circleGraphic1);
            lineObj1[mapId + "map_" + layerId + "_" + id].push(circleGraphic2);
          }
        } else {
          pointLayer1.add(circleGraphic1);
          pointLayer1.add(circleGraphic2);
          lineObj1[mapId + "map_" + layerId + "_" + id].push(circleGraphic1);
          lineObj1[mapId + "map_" + layerId + "_" + id].push(circleGraphic2);
        }
      }
    }
    console.log();
    let congfig = window[mapId + "mapObj"][mapId + "mapconfig"];
    if (mapXmin < congfig.XMin) {
      mapXmin = congfig.XMin;
    }
    if (mapYmin < congfig.YMin) {
      mapYmin = congfig.YMin;
    }
    if (mapXmax > congfig.XMax) {
      mapXmax = congfig.XMax;
    }
    if (mapYmax > congfig.YMax) {
      mapYmax = congfig.YMax;
    }
    let startExtent = new Extent({
      xmin: mapXmin,
      ymin: mapYmin,
      xmax: mapXmax,
      ymax: mapYmax
    });
    view.extent = startExtent;
    if (CCmouseClick !== 0) {
      CCmouseClick.remove();
    }
    CCmouseClick = 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 === layerId || result.graphic.layer.id === "MoveLayerText");
          });
          if (!results[0].graphic) {
            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 && !results[0].graphic.attributes.cluster) {
            lineArrIdFn(results[0].graphic.attributes);
          }
        }
      });
    });
    pointLayer.on("layerview-destroy", function(event) {
      CCmouseClick.remove();
    });
    pointLayer1.on("layerview-destroy", function(event) {
      CCmouseClick.remove();
    });
  }
  static addTrackLine3(mapId, layerId, data, textFlag, lineArrIds, lineArrIdFn) {
    config.fontsUrl = "/static/font/";
    let view = window[mapId + "mapObj"][mapId + "view"];
    let pointLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(layerId);
    let pointLayer1 = window[mapId + "mapObj"][mapId + "map"].findLayerById("MoveLayerText");
    let mapXmin = 0;
    let mapXmax = 0;
    let mapYmin = 0;
    let mapYmax = 0;
    for (let c = 0; c < data.length; c++) {
      let lineColor = data[c].color;
      let lineArr = data[c].data;
      let id = data[c].flagId;
      let imgObj = data[c].imgObj;
      let Y = lineArr.filter((item, index) => {
        return item[0] && item[1];
      });
      let symbol1 = {
        type: "CIMLineSymbol",
        symbolLayers: [
          {
            type: "CIMPictureMarker",
            enable: true,
            anchorPointUnits: "Relative",
            dominantSizeAxis3D: "Y",
            rotateClockwise: true,
            rotation: 90,
            size: 6,
            billboardMode3D: "FaceNearPlane",
            markerPlacement: {
              type: "CIMMarkerPlacementAlongLineSameSize",
              angleToLine: true,
              offset: 0,
              controlPointsPlacement: "WithFullGap",
              customEndingOffset: 0,
              endings: "NoConstraint",
              offsetAlongLine: 0,
              placementTemplate: ["20", "20"]
            },
            invertBackfaceTexture: true,
            scaleX: 1,
            textureFilter: "Picture",
            tintColor: [255, 255, 255, 255],
            url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAICAYAAADN5B7xAAAAAXNSR0IArs4c6QAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAADKADAAQAAAABAAAACAAAAADFRH6nAAAAg0lEQVQYGWNgwAL+//9fAsQNWKQwhaCKgRQYVGCqQBIBKgGZjA4KkJQgmEBVDUgqk4HsuUh8VE1AiW4kyUyQMUA+IxAvQRcHSdQjCaKYBBRnAuLVSPKZTEDDGKEOK2RkZJwAZYMpIP8fkBEBxJuAGMT+BsRg653ADBwE0AYWILYFSQMA6xeauOeqhe8AAAAASUVORK5CYII="
          },
          {
            type: "CIMSolidStroke",
            enable: true,
            capStyle: "Butt",
            joinStyle: "Round",
            lineStyle3D: "Strip",
            miterLimit: 10,
            width: 8,
            color: lineColor || [26, 85, 203, 255],
            colorLocked: true
          }
        ]
      };
      let aa = {
        data: {
          type: "CIMSymbolReference",
          symbol: symbol1
        }
      };
      let symbol = new CIMSymbol(aa);
      let line = new Polyline({
        paths: Y
      });
      let bb = {
        geometry: line,
        symbol
      };
      let circleGraphic = new Graphic(bb);
      let pointArr = lineObj[mapId + "map_" + layerId + "_" + id];
      if (pointArr) {
        for (let i = 0; i < pointArr.length; i++) {
          pointLayer.remove(pointArr[i]);
        }
      }
      lineObj[mapId + "map_" + layerId + "_" + id] = [circleGraphic];
      pointLayer.add(circleGraphic);
      let pointArr1 = lineObj1[mapId + "map_" + layerId + "_" + id];
      if (pointArr1) {
        for (let i = 0; i < pointArr1.length; i++) {
          pointLayer1.remove(pointArr1[i]);
        }
      }
      lineObj1[mapId + "map_" + layerId + "_" + id] = [];
      for (let i = 0; i < lineArr.length; i++) {
        if (!lineArr[i][0] || !lineArr[i][1]) {
          continue;
        }
        let point = {
          type: "point",
          longitude: Number(lineArr[i][0]),
          latitude: Number(lineArr[i][1])
        };
        let pt = new Point(point);
        let symbol2 = {
          url: imgObj[lineArr[i][2]],
          width: imgObj.width * dpr,
          height: imgObj.height * dpr
        };
        let PictureMarkerSymbol$1 = new PictureMarkerSymbol(symbol2);
        let pG = {
          geometry: pt,
          symbol: PictureMarkerSymbol$1,
          attributes: {
            id: lineArrIds[c][i],
            position: lineArr[i],
            index: i + 1
          }
        };
        if (mapXmin == 0) {
          mapXmin = lineArr[i][0] - 0.02;
        } else {
          if (lineArr[i][0] < mapXmin) {
            mapXmin = lineArr[i][0] - 0.02;
          }
        }
        if (mapXmax == 0) {
          mapXmax = lineArr[i][0] + 0.02;
        } else {
          if (lineArr[i][0] > mapXmax) {
            mapXmax = lineArr[i][0] + 0.02;
          }
        }
        if (mapYmin == 0) {
          mapYmin = lineArr[i][1] - 0.02;
        } else {
          if (lineArr[i][1] < mapYmin) {
            mapYmin = lineArr[i][1] - 0.02;
          }
        }
        if (mapYmax == 0) {
          mapYmax = lineArr[i][1] + 0.02;
        } else {
          if (lineArr[i][1] > mapYmax) {
            mapYmax = lineArr[i][1] + 0.02;
          }
        }
        let circleGraphic1 = new Graphic(pG);
        pointLayer1.add(circleGraphic1);
        lineObj1[mapId + "map_" + layerId + "_" + id].push(circleGraphic1);
      }
    }
    let congfig = window[mapId + "mapObj"][mapId + "mapconfig"];
    if (mapXmin < congfig.XMin) {
      mapXmin = congfig.XMin;
    }
    if (mapYmin < congfig.YMin) {
      mapYmin = congfig.YMin;
    }
    if (mapXmax > congfig.XMax) {
      mapXmax = congfig.XMax;
    }
    if (mapYmax > congfig.YMax) {
      mapYmax = congfig.YMax;
    }
    let startExtent = new Extent({
      xmin: mapXmin,
      ymin: mapYmin,
      xmax: mapXmax,
      ymax: mapYmax
    });
    view.extent = startExtent;
    if (CCmouseClick !== 0) {
      CCmouseClick.remove();
    }
    CCmouseClick = 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 === "MoveLayerText";
          });
          if (!results[0].graphic) {
            return;
          }
          let g = results[0].graphic;
          console.log(g);
          lineArrIdFn(g.attributes);
        }
      });
    });
    pointLayer.on("layerview-destroy", function(event) {
      CCmouseClick.remove();
    });
    pointLayer1.on("layerview-destroy", function(event) {
      CCmouseClick.remove();
    });
  }
  static addTrackLine4(mapId, layerId, data, itemDataArr, lineArrIdFn) {
    config.fontsUrl = "/static/font/";
    let view = window[mapId + "mapObj"][mapId + "view"];
    let pointLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(layerId);
    let pointLayer1 = window[mapId + "mapObj"][mapId + "map"].findLayerById("MoveLayerText");
    let mapXmin = 0;
    let mapXmax = 0;
    let mapYmin = 0;
    let mapYmax = 0;
    for (let c = 0; c < data.length; c++) {
      let lineColor = data[c].color;
      let lineArr = data[c].data;
      let id = data[c].flagId;
      let imgObj = data[c].imgObj;
      let symbol1 = {
        type: "CIMLineSymbol",
        symbolLayers: [
          {
            type: "CIMPictureMarker",
            enable: true,
            anchorPointUnits: "Relative",
            dominantSizeAxis3D: "Y",
            rotateClockwise: true,
            rotation: 90,
            size: 6,
            billboardMode3D: "FaceNearPlane",
            markerPlacement: {
              type: "CIMMarkerPlacementAlongLineSameSize",
              angleToLine: true,
              offset: 0,
              controlPointsPlacement: "WithFullGap",
              customEndingOffset: 0,
              endings: "NoConstraint",
              offsetAlongLine: 0,
              placementTemplate: ["20", "20"]
            },
            invertBackfaceTexture: true,
            scaleX: 1,
            textureFilter: "Picture",
            tintColor: [255, 255, 255, 255],
            url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAICAYAAADN5B7xAAAAAXNSR0IArs4c6QAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAADKADAAQAAAABAAAACAAAAADFRH6nAAAAg0lEQVQYGWNgwAL+//9fAsQNWKQwhaCKgRQYVGCqQBIBKgGZjA4KkJQgmEBVDUgqk4HsuUh8VE1AiW4kyUyQMUA+IxAvQRcHSdQjCaKYBBRnAuLVSPKZTEDDGKEOK2RkZJwAZYMpIP8fkBEBxJuAGMT+BsRg653ADBwE0AYWILYFSQMA6xeauOeqhe8AAAAASUVORK5CYII="
          },
          {
            type: "CIMSolidStroke",
            enable: true,
            capStyle: "Butt",
            joinStyle: "Round",
            lineStyle3D: "Strip",
            miterLimit: 10,
            width: 8,
            color: lineColor || [26, 85, 203, 255],
            colorLocked: true
          }
        ]
      };
      let aa = {
        data: {
          type: "CIMSymbolReference",
          symbol: symbol1
        }
      };
      let symbol = new CIMSymbol(aa);
      let line = new Polyline({
        paths: lineArr
      });
      let bb = {
        geometry: line,
        symbol
      };
      let circleGraphic = new Graphic(bb);
      let pointArr = lineObj[mapId + "map_" + layerId + "_" + id];
      if (pointArr) {
        for (let i = 0; i < pointArr.length; i++) {
          pointLayer.remove(pointArr[i]);
        }
      }
      lineObj[mapId + "map_" + layerId + "_" + id] = [circleGraphic];
      pointLayer.add(circleGraphic);
      let pointArr1 = lineObj1[mapId + "map_" + layerId + "_" + id];
      if (pointArr1) {
        for (let i = 0; i < pointArr1.length; i++) {
          pointLayer1.remove(pointArr1[i]);
        }
      }
      lineObj1[mapId + "map_" + layerId + "_" + id] = [];
      for (let i = 0; i < lineArr.length; i++) {
        let point = {
          type: "point",
          longitude: Number(lineArr[i][0]),
          latitude: Number(lineArr[i][1])
        };
        let pt = new Point(point);
        let symbol2 = {
          url: imgObj[lineArr[i][2]],
          width: imgObj.width * dpr,
          height: imgObj.height * dpr
        };
        let PictureMarkerSymbol$1 = new PictureMarkerSymbol(symbol2);
        let pG = {
          geometry: pt,
          symbol: PictureMarkerSymbol$1,
          attributes: {
            itemDataArr: itemDataArr[i],
            position: lineArr[i],
            index: i + 1
          }
        };
        if (mapXmin == 0) {
          mapXmin = lineArr[i][0] - 0.02;
        } else {
          if (lineArr[i][0] < mapXmin) {
            mapXmin = lineArr[i][0] - 0.02;
          }
        }
        if (mapXmax == 0) {
          mapXmax = lineArr[i][0] + 0.02;
        } else {
          if (lineArr[i][0] > mapXmax) {
            mapXmax = lineArr[i][0] + 0.02;
          }
        }
        if (mapYmin == 0) {
          mapYmin = lineArr[i][1] - 0.02;
        } else {
          if (lineArr[i][1] < mapYmin) {
            mapYmin = lineArr[i][1] - 0.02;
          }
        }
        if (mapYmax == 0) {
          mapYmax = lineArr[i][1] + 0.02;
        } else {
          if (lineArr[i][1] > mapYmax) {
            mapYmax = lineArr[i][1] + 0.02;
          }
        }
        let circleGraphic1 = new Graphic(pG);
        pointLayer1.add(circleGraphic1);
        lineObj1[mapId + "map_" + layerId + "_" + id].push(circleGraphic1);
      }
    }
    let congfig = window[mapId + "mapObj"][mapId + "mapconfig"];
    if (mapXmin < congfig.XMin) {
      mapXmin = congfig.XMin;
    }
    if (mapYmin < congfig.YMin) {
      mapYmin = congfig.YMin;
    }
    if (mapXmax > congfig.XMax) {
      mapXmax = congfig.XMax;
    }
    if (mapYmax > congfig.YMax) {
      mapYmax = congfig.YMax;
    }
    let startExtent = new Extent({
      xmin: mapXmin,
      ymin: mapYmin,
      xmax: mapXmax,
      ymax: mapYmax
    });
    view.extent = startExtent;
    if (CCmouseClick !== 0) {
      CCmouseClick.remove();
    }
    CCmouseClick = 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 === "MoveLayerText";
          });
          if (!results[0].graphic) {
            return;
          }
          let g = results[0].graphic;
          console.log(g);
          lineArrIdFn(g.attributes);
        }
      });
    });
    pointLayer.on("layerview-destroy", function(event) {
      CCmouseClick.remove();
    });
    pointLayer1.on("layerview-destroy", function(event) {
      CCmouseClick.remove();
    });
  }
  static addTrackLineCloseTime() {
    timeObjC = {};
    $(".trackLinetime").remove();
  }
  static addTrackLine2(mapId, layerId, data, textFlag, lineArrIds, lineArrIdFn) {
    let map = window[mapId + "mapObj"][mapId + "view"];
    config.fontsUrl = "/static/font/";
    let view = window[mapId + "mapObj"][mapId + "view"];
    let pointLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(layerId);
    let pointLayer1 = window[mapId + "mapObj"][mapId + "map"].findLayerById("MoveLayerText");
    let mapXmin = 0;
    let mapXmax = 0;
    let mapYmin = 0;
    let mapYmax = 0;
    timeObjC = {};
    for (let c = 0; c < data.length; c++) {
      let lineColor = data[c].color;
      let lineArr = data[c].data;
      let id = data[c].flagId;
      let timeObj = data[c].timeObj;
      let Y = lineArr.filter((item, index) => {
        return item[0] && item[1];
      });
      let symbol1 = {
        type: "CIMLineSymbol",
        symbolLayers: [
          {
            type: "CIMPictureMarker",
            enable: true,
            anchorPointUnits: "Relative",
            dominantSizeAxis3D: "Y",
            rotateClockwise: true,
            rotation: 90,
            size: 6,
            billboardMode3D: "FaceNearPlane",
            markerPlacement: {
              type: "CIMMarkerPlacementAlongLineSameSize",
              angleToLine: true,
              offset: 0,
              controlPointsPlacement: "WithFullGap",
              customEndingOffset: 0,
              endings: "NoConstraint",
              offsetAlongLine: 0,
              placementTemplate: ["20", "20"]
            },
            invertBackfaceTexture: true,
            scaleX: 1,
            textureFilter: "Picture",
            tintColor: [255, 255, 255, 255],
            url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAICAYAAADN5B7xAAAAAXNSR0IArs4c6QAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAADKADAAQAAAABAAAACAAAAADFRH6nAAAAg0lEQVQYGWNgwAL+//9fAsQNWKQwhaCKgRQYVGCqQBIBKgGZjA4KkJQgmEBVDUgqk4HsuUh8VE1AiW4kyUyQMUA+IxAvQRcHSdQjCaKYBBRnAuLVSPKZTEDDGKEOK2RkZJwAZYMpIP8fkBEBxJuAGMT+BsRg653ADBwE0AYWILYFSQMA6xeauOeqhe8AAAAASUVORK5CYII="
          },
          {
            type: "CIMSolidStroke",
            enable: true,
            capStyle: "Butt",
            joinStyle: "Round",
            lineStyle3D: "Strip",
            miterLimit: 10,
            width: 8,
            color: lineColor || [26, 85, 203, 255],
            colorLocked: true
          }
        ]
      };
      let aa = {
        data: {
          type: "CIMSymbolReference",
          symbol: symbol1
        }
      };
      let symbol = new CIMSymbol(aa);
      let line = new Polyline({
        paths: Y
      });
      let bb = {
        geometry: line,
        symbol
      };
      let circleGraphic = new Graphic(bb);
      let pointArr = lineObj[mapId + "map_" + layerId + "_" + id];
      if (pointArr) {
        for (let i = 0; i < pointArr.length; i++) {
          pointLayer.remove(pointArr[i]);
        }
      }
      lineObj[mapId + "map_" + layerId + "_" + id] = [circleGraphic];
      pointLayer.add(circleGraphic);
      let pointArr1 = lineObj1[mapId + "map_" + layerId + "_" + id];
      if (pointArr1) {
        for (let i = 0; i < pointArr1.length; i++) {
          pointLayer1.remove(pointArr1[i]);
        }
      }
      lineObj1[mapId + "map_" + layerId + "_" + id] = [];
      for (let i = 0; i < lineArr.length; i++) {
        if (!lineArr[i][0] || !lineArr[i][1]) {
          continue;
        }
        let size = 26;
        if ((i + "").length > 2 && (i + "").length < 4) {
          size = 38;
        } else if ((i + "").length > 3 && (i + "").length < 5) {
          size = 50;
        } else if ((i + "").length >= 5) {
          size = 62;
        }
        let symbol2 = {
          type: "CIMPointSymbol",
          symbolLayers: [
            {
              type: "CIMVectorMarker",
              enable: true,
              anchorPointUnits: "Relative",
              dominantSizeAxis3D: "Y",
              size,
              billboardMode3D: "FaceNearPlane",
              frame: {
                xmin: 0,
                ymin: 0,
                xmax: 15,
                ymax: 17
              },
              markerGraphics: [
                {
                  type: "CIMMarkerGraphic",
                  geometry: {
                    rings: [
                      [
                        [10.21, 2],
                        [9.26, 1.84],
                        [8.54, 1.43],
                        [8.11, 0.82],
                        [7.96, 0],
                        [7.04, 0],
                        [6.89, 0.82],
                        [6.46, 1.43],
                        [5.74, 1.84],
                        [4.79, 2],
                        [2.31, 2],
                        [1.43, 2.15],
                        [0.68, 2.59],
                        [0.18, 3.24],
                        [0, 4],
                        [0, 17],
                        [15, 17],
                        [15, 4.01],
                        [14.83, 3.24],
                        [14.33, 2.59],
                        [13.58, 2.15],
                        [12.69, 2],
                        [10.21, 2]
                      ]
                    ]
                  },
                  symbol: {
                    type: "CIMPolygonSymbol",
                    symbolLayers: [
                      {
                        type: "CIMSolidStroke",
                        enable: true,
                        capStyle: "Round",
                        joinStyle: "Round",
                        lineStyle3D: "Strip",
                        miterLimit: 10,
                        width: 1,
                        color: [255, 255, 255, 255]
                      },
                      {
                        type: "CIMSolidFill",
                        enable: true,
                        color: lineColor || [42, 156, 213, 255]
                      }
                    ]
                  }
                }
              ],
              scaleSymbolsProportionally: true,
              respectFrame: true,
              offsetY: 12
            }
          ]
        };
        let aa1 = {
          data: {
            type: "CIMSymbolReference",
            symbol: symbol2
          }
        };
        let symbol3 = new CIMSymbol(aa1);
        if (mapXmin == 0) {
          mapXmin = lineArr[i][0] - 0.02;
        } else {
          if (lineArr[i][0] < mapXmin) {
            mapXmin = lineArr[i][0] - 0.02;
          }
        }
        if (mapXmax == 0) {
          mapXmax = lineArr[i][0] + 0.02;
        } else {
          if (lineArr[i][0] > mapXmax) {
            mapXmax = lineArr[i][0] + 0.02;
          }
        }
        if (mapYmin == 0) {
          mapYmin = lineArr[i][1] - 0.02;
        } else {
          if (lineArr[i][1] < mapYmin) {
            mapYmin = lineArr[i][1] - 0.02;
          }
        }
        if (mapYmax == 0) {
          mapYmax = lineArr[i][1] + 0.02;
        } else {
          if (lineArr[i][1] > mapYmax) {
            mapYmax = lineArr[i][1] + 0.02;
          }
        }
        let point = {
          type: "point",
          longitude: Number(lineArr[i][0]),
          latitude: Number(lineArr[i][1])
        };
        let pt = new Point(point);
        let text = "";
        if (textFlag == "1") {
          if (i == 0) {
            text = "\u8D77";
          } else if (i == lineArr.length - 1) {
            text = "\u7EC8";
          }
        } else if (textFlag == "2") {
          if (i == 0) {
            text = "\u8D77";
          } else if (i == lineArr.length - 1) {
            text = "\u7EC8";
          } else {
            text = "\u7ECF";
          }
        } else if (textFlag == "3") {
          if (lineArr[i][2] && lineArr[i][2] == "1") {
            text = i + 1 + "+";
          } else {
            text = i + 1 + "";
          }
        }
        let textSymbol = {
          type: "text",
          color: "#fff",
          text,
          font: {
            size: 14 * dpr,
            family: "Arial Unicode MS",
            weight: "bold"
          },
          yoffset: 9
        };
        let cc = {
          geometry: pt,
          symbol: symbol3,
          attributes: {
            id: lineArrIds[c][i],
            position: lineArr[i],
            text,
            index: i + 1
          }
        };
        let cc1 = {
          geometry: pt,
          symbol: textSymbol,
          attributes: {
            id: lineArrIds[c][i],
            position: lineArr[i],
            text,
            index: i + 1
          }
        };
        let circleGraphic1 = new Graphic(cc);
        let circleGraphic2 = new Graphic(cc1);
        if (textFlag == "1") {
          if (i == 0 || i == lineArr.length - 1) {
            pointLayer1.add(circleGraphic1);
            pointLayer1.add(circleGraphic2);
            lineObj1[mapId + "map_" + layerId + "_" + id].push(circleGraphic1);
            lineObj1[mapId + "map_" + layerId + "_" + id].push(circleGraphic2);
          }
        } else {
          pointLayer1.add(circleGraphic1);
          pointLayer1.add(circleGraphic2);
          lineObj1[mapId + "map_" + layerId + "_" + id].push(circleGraphic1);
          lineObj1[mapId + "map_" + layerId + "_" + id].push(circleGraphic2);
        }
      }
      let a = {
        [`trackLinetime${id}`]: true
      };
      Object.assign(timeObjC, a);
      watchUtils.watch(view, "extent", (extent) => {
        if (timeObjC[`trackLinetime${id}`]) {
          if ($(".trackLinetime" + id)) {
            $(".trackLinetime" + id).remove();
          }
          let html = `<div class="trackLinetime trackLinetime${id}">
          <p>${timeObj.startTime}-</p>
          <p>${timeObj.endTime}</p>
          <div class="trackLinetimeClose trackLinetime${id}Close">x</div>
          </div>`;
          $(".gisMap").append(html);
          $(".trackLinetime" + id).css({
            display: "block"
          });
          let x = 0;
          let y = 0;
          for (let i = 0; i < lineArr.length; i++) {
            if (lineArr[i][0] && lineArr[i][1]) {
              x = lineArr[i][0];
              y = lineArr[i][1];
              break;
            }
          }
          let p = {
            type: "point",
            longitude: x,
            latitude: y
          };
          let pt = new Point(p);
          let scrPt = map.toScreen(pt);
          if (map.spatialReference.isWebMercator) {
            pt = webMercatorUtils.geographicToWebMercator(pt);
          }
          $(".trackLinetime" + id).css({
            left: scrPt.x + 30 * dpr + "px",
            top: scrPt.y - 50 * dpr + "px"
          });
          setTimeout(() => {
            $(".trackLinetime" + id + "Close").off().on("click", function() {
              timeObjC[`trackLinetime${id}`] = false;
              $(".trackLinetime" + id).css({
                display: "none"
              });
            });
          }, 50);
        }
      });
    }
    let congfig = window[mapId + "mapObj"][mapId + "mapconfig"];
    if (mapXmin < congfig.XMin) {
      mapXmin = congfig.XMin;
    }
    if (mapYmin < congfig.YMin) {
      mapYmin = congfig.YMin;
    }
    if (mapXmax > congfig.XMax) {
      mapXmax = congfig.XMax;
    }
    if (mapYmax > congfig.YMax) {
      mapYmax = congfig.YMax;
    }
    let startExtent = new Extent({
      xmin: mapXmin,
      ymin: mapYmin,
      xmax: mapXmax,
      ymax: mapYmax
    });
    view.extent = startExtent;
    if (CCmouseClick !== 0) {
      CCmouseClick.remove();
    }
    CCmouseClick = 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 === layerId || result.graphic.layer.id === "MoveLayerText");
          });
          if (!results[0].graphic) {
            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) {
            lineArrIdFn(results[0].graphic.attributes);
          }
        }
      });
    });
    pointLayer.on("layerview-destroy", function(event) {
      CCmouseClick.remove();
    });
    pointLayer1.on("layerview-destroy", function(event) {
      CCmouseClick.remove();
    });
  }
  static delTrackLine1(mapId, layerName, lineName) {
    let fixedLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(layerName);
    let fixedLayer1 = window[mapId + "mapObj"][mapId + "map"].findLayerById("MoveLayerText");
    let pointArr = lineObj[mapId + "map_" + layerName + "_" + lineName];
    for (let i = 0; i < pointArr.length; i++) {
      fixedLayer.remove(pointArr[i]);
    }
    let pointArr1 = lineObj1[mapId + "map_" + layerName + "_" + lineName];
    for (let i = 0; i < pointArr1.length; i++) {
      fixedLayer1.remove(pointArr1[i]);
    }
  }
  static addPolygon(mapId, layerId, ponitArr, lineColor, fnObj) {
    let pointLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(layerId);
    let view = window[mapId + "mapObj"][mapId + "view"];
    let Y = ponitArr.filter((item, index) => {
      return item[0] && item[1];
    });
    let polygon = {
      type: "polygon",
      rings: Y
    };
    let color = "";
    let color1 = "";
    let boderWidth = 1;
    if (lineColor) {
      color = lineColor.fillColor;
      color1 = lineColor.boderColor;
      if (lineColor.boderWidth) {
        boderWidth = lineColor.boderWidth;
      }
    }
    const polygon1 = new Polygon(polygon);
    const fillSymbol = {
      type: "simple-fill",
      color: color || [227, 139, 79, 0.8],
      outline: {
        color: color1 || [255, 255, 255],
        width: boderWidth
      }
    };
    let a = {
      geometry: polygon1,
      symbol: fillSymbol
    };
    if (fnObj) {
      a = {
        geometry: polygon1,
        symbol: fillSymbol,
        attributes: fnObj.atrr
      };
    }
    const polygonGraphic = new Graphic(a);
    pointLayer.add(polygonGraphic);
    if (fnObj) {
      if (PolygonmouseClick !== 0) {
        PolygonmouseClick.remove();
      }
      PolygonmouseClick = view.on("immediate-click", function(event) {
        view.hitTest(event).then((res) => {
          var _a;
          if (res.results.length) {
            let results = res.results.filter((result) => {
              return result.graphic && result.graphic.layer && result.graphic.layer.id === layerId;
            });
            if (!results[0].graphic) {
              return;
            }
            let arr = [];
            for (let i = 0; i < results.length; i++) {
              arr.push((_a = results[i].graphic) == null ? void 0 : _a.attributes);
            }
            fnObj.fn(arr);
          }
        });
      });
    }
  }
  static addPolygonP(ponitArr1, id, mapId, fnName, callback, colorObj) {
    let pointLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(id);
    let ponitArr = [];
    let Y = ponitArr1.filter((item, index) => {
      return item[0] && item[1];
    });
    for (let i = 0; i < Y.length; i++) {
      ponitArr.push(webMercatorUtils.lngLatToXY(Number(Y[i][0]), Number(Y[i][1])));
    }
    let polygon = {
      type: "polygon",
      rings: ponitArr,
      spatialReference: {
        wkid: window[mapId + "mapObj"][mapId + "view"].spatialReference.wkid
      }
    };
    let color = "";
    let color1 = "";
    if (colorObj) {
      color = colorObj.fillColor;
      color1 = colorObj.boderColor;
    }
    const fillSymbol = {
      type: "simple-fill",
      color: color || [227, 139, 79, 0.8],
      outline: {
        color: color1 || [255, 255, 255],
        width: 1
      }
    };
    const popupTemplate = {
      title: "{Name}",
      content: "{Description}"
    };
    const attributes = {
      Name: "Graphic",
      Description: "I am a polygon"
    };
    let a = {
      geometry: polygon,
      symbol: fillSymbol,
      attributes,
      popupTemplate
    };
    let polygonGraphic = new Graphic(a);
    pointLayer.add(polygonGraphic);
    let sketch = new Sketch({
      view: window[mapId + "mapObj"][mapId + "view"],
      layer: pointLayer,
      creationMode: "update"
    });
    window[mapId + "mapObj"][mapId + "view"].goTo(polygonGraphic);
    sketch.update([polygonGraphic], {
      tool: "transform"
    });
    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 addBufferZone(mapId, layerId, ponitArr, lineColor, meters) {
    let pointLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(layerId);
    let Y = ponitArr.filter((item, index) => {
      return item[0] && item[1];
    });
    let polygon = {
      type: "polygon",
      rings: Y
    };
    let color = "";
    let color1 = "";
    if (lineColor) {
      color = lineColor.fillColor;
      color1 = lineColor.boderColor;
    }
    const polygon1 = new Polygon(polygon);
    const fillSymbol = {
      type: "simple-fill",
      color: color || [227, 139, 79, 0.8],
      outline: {
        color: color1 || [255, 255, 255],
        width: 1
      }
    };
    let buffer = geometryEngine.geodesicBuffer(polygon1, meters, "meters");
    let bb = {
      geometry: buffer,
      symbol: fillSymbol
    };
    pointLayer.add(new Graphic(bb));
  }
  static addBufferLine(mapId, layerId, ponitArr, lineColor, meters, fn) {
    let pointLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(layerId);
    let color = "";
    let color1 = "";
    if (lineColor) {
      color = lineColor.fillColor;
      color1 = lineColor.boderColor;
    }
    let Y = ponitArr.filter((item, index) => {
      return item[0] && item[1];
    });
    let line = new Polyline({
      paths: Y
    });
    const fillSymbol = {
      type: "simple-fill",
      color: color || [227, 139, 79, 0.8],
      outline: {
        color: color1 || [255, 255, 255],
        width: 1
      }
    };
    let buffer = geometryEngine.geodesicBuffer(line, meters, "meters");
    if (fn) {
      fn(buffer.rings);
    }
    let bb = {
      geometry: buffer,
      symbol: fillSymbol
    };
    pointLayer.add(new Graphic(bb));
  }
  static iconMove(mapId, layerId, lineArr, imgObj, speed, lineArrIds, color, linFlag, lineArrIdFn) {
    config.fontsUrl = "/static/font/";
    let moveLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(layerId);
    let lineLayed = window[mapId + "mapObj"][mapId + "map"].findLayerById(layerId + "1");
    lineLayed.removeAll();
    moveLayer.removeAll();
    let polyline = {
      type: "polyline",
      paths: lineArr
    };
    let lineSymboled = {
      type: "cim",
      data: {
        type: "CIMSymbolReference",
        symbol: {
          type: "CIMLineSymbol",
          symbolLayers: [
            {
              type: "CIMPictureMarker",
              enable: true,
              anchorPointUnits: "Relative",
              dominantSizeAxis3D: "Y",
              rotateClockwise: true,
              rotation: 90,
              size: 6,
              billboardMode3D: "FaceNearPlane",
              markerPlacement: {
                type: "CIMMarkerPlacementAlongLineSameSize",
                angleToLine: true,
                offset: 0,
                controlPointsPlacement: "WithFullGap",
                customEndingOffset: 0,
                endings: "NoConstraint",
                offsetAlongLine: 0,
                placementTemplate: ["20", "20"]
              },
              invertBackfaceTexture: true,
              scaleX: 1,
              textureFilter: "Picture",
              tintColor: [255, 255, 255, 255],
              url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAICAYAAADN5B7xAAAAAXNSR0IArs4c6QAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAADKADAAQAAAABAAAACAAAAADFRH6nAAAAg0lEQVQYGWNgwAL+//9fAsQNWKQwhaCKgRQYVGCqQBIBKgGZjA4KkJQgmEBVDUgqk4HsuUh8VE1AiW4kyUyQMUA+IxAvQRcHSdQjCaKYBBRnAuLVSPKZTEDDGKEOK2RkZJwAZYMpIP8fkBEBxJuAGMT+BsRg653ADBwE0AYWILYFSQMA6xeauOeqhe8AAAAASUVORK5CYII="
            },
            {
              type: "CIMSolidStroke",
              enable: true,
              width: 8,
              color: color || [151, 151, 151, 255]
            }
          ]
        }
      }
    };
    let startP = {
      type: "point",
      longitude: polyline.paths[0][0],
      latitude: polyline.paths[0][1]
    };
    let startS = {
      type: "picture-marker",
      url: imgObj.imgUrl,
      width: imgObj.width * dpr,
      height: imgObj.height * dpr,
      yoffset: linFlag == "1" ? 0 : imgObj.height * dpr / 1.6 + "px"
    };
    let moveGra = new Graphic({
      geometry: startP,
      symbol: startS
    });
    moveLayer.add(moveGra);
    let startNum, endNum, moving;
    function move(start, end) {
      let x1 = polyline.paths[start][0];
      let y1 = polyline.paths[start][1];
      let x2 = polyline.paths[end][0];
      let y2 = polyline.paths[end][1];
      let p = (y2 - y1) / (x2 - x1);
      let v = 5e-4 * speed;
      moving = setInterval(function() {
        startNum = start;
        endNum = end;
        let newX;
        let newY;
        if (Math.abs(p) == Number.POSITIVE_INFINITY) {
          if (y2 > y1) {
            newY = moveGra.geometry.y + v;
          } else {
            newY = moveGra.geometry.y - v;
          }
          newX = moveGra.geometry.x;
        } else {
          if (x2 < x1) {
            newX = moveGra.geometry.x - 1 / Math.sqrt(1 + p * p) * v;
            newY = moveGra.geometry.y - p / Math.sqrt(1 + p * p) * v;
            if (linFlag == "1") {
              moveGra.symbol.angle = calcAngle(x1, y1, newX, newY);
            }
          } else {
            newX = moveGra.geometry.x + 1 / Math.sqrt(1 + p * p) * v;
            newY = moveGra.geometry.y + p / Math.sqrt(1 + p * p) * v;
            if (linFlag == "1") {
              moveGra.symbol.angle = calcAngle(x1, y1, newX, newY);
            }
          }
        }
        if (start == 0) {
          addLineSYmboled(0);
        } else {
          addLineSYmboled(end);
        }
        if ((moveGra.geometry.x - x2) * (newX - x2) <= 0 || (moveGra.geometry.y - y2) * (newY - y2) <= 0) {
          moveGra.geometry.x = x2;
          moveGra.geometry.y = y2;
          clearInterval(moving);
          startNum = start++;
          endNum = end++;
          if (end < polyline.paths.length) {
            if (lineArrIdFn) {
              lineArrIdFn(lineArrIds[end - 1]);
            }
            move(start, end);
          } else {
            if (lineArrIdFn) {
              lineArrIdFn(lineArrIds[end - 1]);
            }
            $("#Bback").trigger("click");
          }
        } else {
          let people1 = {
            type: "point",
            longitude: newX,
            latitude: newY
          };
          let people = new Point(people1);
          let peopleSimpleMark = {
            url: imgObj.imgUrl,
            width: imgObj.width * dpr,
            height: imgObj.height * dpr,
            yoffset: linFlag == "1" ? 0 : imgObj.height * dpr / 1.6 + "px"
          };
          moveGra = new Graphic({
            geometry: people,
            symbol: new PictureMarkerSymbol(peopleSimpleMark)
          });
          if (linFlag == "1") {
            moveGra.symbol.angle = calcAngle(x1, y1, newX, newY);
          }
          moveLayer.graphics = [moveGra];
        }
        moveLayer.add(moveGra);
      }, 50);
    }
    function calcAngle(x1, y1, x2, y2) {
      let tan = Math.atan(Math.abs((y2 - y1) / (x2 - x1))) * 180 / Math.PI + 90;
      if (x2 > x1 && y2 > y1) {
        return -tan + 180;
      } else if (x2 > x1 && y2 < y1) {
        return tan;
      } else if (x2 < x1 && y2 > y1) {
        return tan - 180;
      } else {
        return -tan;
      }
    }
    function addLineSYmboled(end) {
      lineLayed.removeAll();
      let path = null;
      if (end == 0) {
        path = polyline.paths.slice(0, 1);
      } else {
        path = polyline.paths.slice(0, end);
      }
      path.push([moveGra.geometry.x, moveGra.geometry.y]);
      let polylined1 = {
        type: "polyline",
        paths: path
      };
      let polylined = new Polyline(polylined1);
      lineLayed.add(
        new Graphic({
          geometry: polylined,
          symbol: lineSymboled
        })
      );
    }
    $(".moveControlBtn").off().click(function() {
      let value = $(this).attr("id");
      switch (value) {
        case "Bstart": {
          if (moving != void 0) {
            clearInterval(moving);
          }
          if (lineArrIdFn) {
            lineArrIdFn(lineArrIds[0]);
          }
          moveGra.geometry = startP;
          move(0, 1);
          lineLayed.removeAll();
          break;
        }
        case "Bpause": {
          clearInterval(moving);
          break;
        }
        case "Bcontinue": {
          if (moving != void 0) {
            clearInterval(moving);
          }
          move(startNum, endNum);
          break;
        }
        case "Bback": {
          if (moving != void 0) {
            clearInterval(moving);
          }
          lineLayed.removeAll();
          moveLayer.graphics = [moveGra];
          moveGra.geometry = startP;
          moveGra.symbol.angle = 0;
          break;
        }
        default:
          if (moving != void 0) {
            clearInterval(moving);
          }
          lineLayed.removeAll();
          moveGra.geometry = startP;
          moveGra.symbol.angle = 0;
      }
    });
  }
  static roundViewMove(mapId, layerId, lineArr, imgObj, speed, lineArrIds, color, linFlag, lineArrIdFn, oldArr) {
    config.fontsUrl = "/static/font/";
    let moveLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(layerId);
    let lineLayed = window[mapId + "mapObj"][mapId + "map"].findLayerById(layerId + "1");
    if (oldArr) {
      let lineColor = color;
      let lineArr2 = oldArr;
      let Y = lineArr2.filter((item, index) => {
        return item[0] && item[1];
      });
      let symbol1 = {
        type: "CIMLineSymbol",
        symbolLayers: [
          {
            type: "CIMPictureMarker",
            enable: true,
            anchorPointUnits: "Relative",
            dominantSizeAxis3D: "Y",
            rotateClockwise: true,
            rotation: 90,
            size: 6,
            billboardMode3D: "FaceNearPlane",
            markerPlacement: {
              type: "CIMMarkerPlacementAlongLineSameSize",
              angleToLine: true,
              offset: 0,
              controlPointsPlacement: "WithFullGap",
              customEndingOffset: 0,
              endings: "NoConstraint",
              offsetAlongLine: 0,
              placementTemplate: ["20", "20"]
            },
            invertBackfaceTexture: true,
            scaleX: 1,
            textureFilter: "Picture",
            tintColor: [255, 255, 255, 255],
            url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAICAYAAADN5B7xAAAAAXNSR0IArs4c6QAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAADKADAAQAAAABAAAACAAAAADFRH6nAAAAg0lEQVQYGWNgwAL+//9fAsQNWKQwhaCKgRQYVGCqQBIBKgGZjA4KkJQgmEBVDUgqk4HsuUh8VE1AiW4kyUyQMUA+IxAvQRcHSdQjCaKYBBRnAuLVSPKZTEDDGKEOK2RkZJwAZYMpIP8fkBEBxJuAGMT+BsRg653ADBwE0AYWILYFSQMA6xeauOeqhe8AAAAASUVORK5CYII="
          },
          {
            type: "CIMSolidStroke",
            enable: true,
            capStyle: "Butt",
            joinStyle: "Round",
            lineStyle3D: "Strip",
            miterLimit: 10,
            width: 8,
            color: lineColor || [26, 85, 203, 255],
            colorLocked: true
          }
        ]
      };
      let aa = {
        data: {
          type: "CIMSymbolReference",
          symbol: symbol1
        }
      };
      let symbol = new CIMSymbol(aa);
      let line = new Polyline({
        paths: Y
      });
      let bb = {
        geometry: line,
        symbol
      };
      let circleGraphic = new Graphic(bb);
      lineLayed.add(circleGraphic);
    }
    let view = window[mapId + "mapObj"][mapId + "view"];
    let polyline = {
      type: "polyline",
      paths: lineArr
    };
    let lineSymboled = {
      type: "cim",
      data: {
        type: "CIMSymbolReference",
        symbol: {
          type: "CIMLineSymbol",
          symbolLayers: [
            {
              type: "CIMPictureMarker",
              enable: true,
              anchorPointUnits: "Relative",
              dominantSizeAxis3D: "Y",
              rotateClockwise: true,
              rotation: 90,
              size: 6,
              billboardMode3D: "FaceNearPlane",
              markerPlacement: {
                type: "CIMMarkerPlacementAlongLineSameSize",
                angleToLine: true,
                offset: 0,
                controlPointsPlacement: "WithFullGap",
                customEndingOffset: 0,
                endings: "NoConstraint",
                offsetAlongLine: 0,
                placementTemplate: ["20", "20"]
              },
              invertBackfaceTexture: true,
              scaleX: 1,
              textureFilter: "Picture",
              tintColor: [255, 255, 255, 255],
              url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAICAYAAADN5B7xAAAAAXNSR0IArs4c6QAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAADKADAAQAAAABAAAACAAAAADFRH6nAAAAg0lEQVQYGWNgwAL+//9fAsQNWKQwhaCKgRQYVGCqQBIBKgGZjA4KkJQgmEBVDUgqk4HsuUh8VE1AiW4kyUyQMUA+IxAvQRcHSdQjCaKYBBRnAuLVSPKZTEDDGKEOK2RkZJwAZYMpIP8fkBEBxJuAGMT+BsRg653ADBwE0AYWILYFSQMA6xeauOeqhe8AAAAASUVORK5CYII="
            },
            {
              type: "CIMSolidStroke",
              enable: true,
              width: 8,
              color: color || [151, 151, 151, 255]
            }
          ]
        }
      }
    };
    let startP = {
      type: "point",
      longitude: polyline.paths[0][0],
      latitude: polyline.paths[0][1]
    };
    let startS = {
      type: "picture-marker",
      url: imgObj.imgUrl,
      width: imgObj.width * dpr,
      height: imgObj.height * dpr,
      yoffset: linFlag == "1" ? 0 : imgObj.height * dpr / 1.6 + "px"
    };
    let moveGra = new Graphic({
      geometry: startP,
      symbol: startS
    });
    moveLayer.add(moveGra);
    function move(start, end) {
      let x1 = polyline.paths[start][0];
      let y1 = polyline.paths[start][1];
      let x2 = polyline.paths[end][0];
      let y2 = polyline.paths[end][1];
      let p = (y2 - y1) / (x2 - x1);
      let v = 5e-4 * speed;
      ViewMoving = setInterval(function() {
        let newX;
        let newY;
        if (Math.abs(p) == Number.POSITIVE_INFINITY) {
          if (y2 > y1) {
            newY = moveGra.geometry.y + v;
          } else {
            newY = moveGra.geometry.y - v;
          }
          newX = moveGra.geometry.x;
        } else {
          if (x2 < x1) {
            newX = moveGra.geometry.x - 1 / Math.sqrt(1 + p * p) * v;
            newY = moveGra.geometry.y - p / Math.sqrt(1 + p * p) * v;
            if (linFlag == "1") {
              moveGra.symbol.angle = calcAngle(x1, y1, newX, newY);
            }
          } else {
            newX = moveGra.geometry.x + 1 / Math.sqrt(1 + p * p) * v;
            newY = moveGra.geometry.y + p / Math.sqrt(1 + p * p) * v;
            if (linFlag == "1") {
              moveGra.symbol.angle = calcAngle(x1, y1, newX, newY);
            }
          }
        }
        if (start == 0) {
          addLineSYmboled(0);
        } else {
          addLineSYmboled(end);
        }
        if ((moveGra.geometry.x - x2) * (newX - x2) <= 0 || (moveGra.geometry.y - y2) * (newY - y2) <= 0) {
          moveGra.geometry.x = x2;
          moveGra.geometry.y = y2;
          clearInterval(ViewMoving);
          start++;
          end++;
          if (end < polyline.paths.length) {
            if (lineArrIdFn) {
              lineArrIdFn(lineArrIds[end - 1]);
            }
            move(start, end);
          } else {
            if (lineArrIdFn) {
              lineArrIdFn(lineArrIds[end - 1]);
            }
            $("#Bback").trigger("click");
          }
        } else {
          let people1 = {
            type: "point",
            longitude: newX,
            latitude: newY
          };
          let people = new Point(people1);
          let peopleSimpleMark = {
            url: imgObj.imgUrl,
            width: imgObj.width * dpr,
            height: imgObj.height * dpr,
            yoffset: linFlag == "1" ? 0 : imgObj.height * dpr / 1.6 + "px"
          };
          moveGra = new Graphic({
            geometry: people,
            symbol: new PictureMarkerSymbol(peopleSimpleMark)
          });
          if (linFlag == "1") {
            moveGra.symbol.angle = calcAngle(x1, y1, newX, newY);
          }
          moveLayer.graphics = [moveGra];
        }
        let level = Math.round(view.zoom);
        view.goTo({ target: moveGra, zoom: level });
        moveLayer.add(moveGra);
      }, 50);
    }
    function calcAngle(x1, y1, x2, y2) {
      let tan = Math.atan(Math.abs((y2 - y1) / (x2 - x1))) * 180 / Math.PI + 90;
      if (x2 > x1 && y2 > y1) {
        return -tan + 180;
      } else if (x2 > x1 && y2 < y1) {
        return tan;
      } else if (x2 < x1 && y2 > y1) {
        return tan - 180;
      } else {
        return -tan;
      }
    }
    function addLineSYmboled(end) {
      let path = null;
      if (end == 0) {
        path = polyline.paths.slice(0, 1);
      } else {
        path = polyline.paths.slice(0, end);
      }
      path.push([moveGra.geometry.x, moveGra.geometry.y]);
      let polylined1 = {
        type: "polyline",
        paths: path
      };
      let polylined = new Polyline(polylined1);
      lineLayed.add(
        new Graphic({
          geometry: polylined,
          symbol: lineSymboled
        })
      );
    }
    if (ViewMoving != void 0) {
      clearInterval(ViewMoving);
    }
    if (lineArrIdFn) {
      lineArrIdFn(lineArrIds[0]);
    }
    moveGra.geometry = startP;
    move(0, 1);
  }
  static clearRoundViewMove(mapId, layerId) {
    let moveLayer = window[mapId + "mapObj"][mapId + "map"].findLayerById(layerId);
    let lineLayed = window[mapId + "mapObj"][mapId + "map"].findLayerById(layerId + "1");
    if (ViewMoving != void 0) {
      clearInterval(ViewMoving);
    }
    lineLayed.removeAll();
    moveLayer.removeAll();
    ViewMoving = void 0;
  }
  static setConfig({ assetsPath, fontsUrl }) {
    if (assetsPath)
      config.assetsPath = assetsPath;
    if (fontsUrl)
      config.fontsUrl = fontsUrl;
  }
}

const WMap = function(factory) {
  return factory();
}(function() {
  let ClassF = function() {
    let W = {
      v: "1.0.0"
    };
    W.use = function(obj, callback) {
      W.mapType = obj.mapType || "ARCGIS";
      W.version = obj.version || "4";
      config.assetsPath = obj.url || "/static";
      W.factory = ARCGIS_MAP_4;
      W.set();
      W.factory.requireModules(callback);
    };
    W.set = function() {
      W.Map = W.factory.Map;
      W.Point = W.factory.Point;
      W.TileLayer = W.factory.TileLayer;
      W.Marker = W.factory.Marker;
      W.Text = W.factory.Text;
      W.Polyline = W.factory.Polyline;
      W.Polygon = W.factory.Polygon;
      W.Circle = W.factory.Circle;
      W.GraphicsLayer = W.factory.GraphicsLayer;
      W.Draw = W.factory.Draw;
      W.ClusterLayer = W.factory.ClusterLayer;
      W.OverviewMap = W.factory.OverviewMap;
      W.GeometryEngine = W.factory.GeometryEngine;
      W.Color = W.factory.Color;
    };
    return W;
  }();
  const ARCGIS_MAP_4 = function() {
  };
  ARCGIS_MAP_4.requireModules = function(callback) {
    ARCGIS_MAP_4.modules = {
      Map: Map,
      MapView: MapView,
      Point: Point,
      Polyline: Polyline,
      Polygon: Polygon,
      Circle: Circle,
      Graphic: Graphic,
      GraphicsLayer: GraphicsLayer,
      PictureMarkerSymbol: PictureMarkerSymbol,
      TextSymbol: TextSymbol,
      CartographicLineSymbol: CartographicLineSymbol,
      SimpleFillSymbol: SimpleFillSymbol,
      SimpleLineSymbol: SimpleLineSymbol,
      MapImageLayer: MapImageLayer,
      TintTiledLayer: {},
      TileInfo: TileInfo,
      webMercatorUtils: webMercatorUtils,
      SpatialReference: SpatialReference,
      Extent: Extent,
      Draw: Draw,
      Units: Units,
      Font: Font,
      Color: Color,
      ClusterLayer: ClusterLayer,
      PopupTemplate: PopupTemplate,
      SimpleMarkerSymbol: SimpleMarkerSymbol,
      ClassBreaksRenderer: ClassBreaksRenderer,
      OverviewMap: OverviewMap,
      ScreenPoint: ScreenPoint,
      GeometryEngine: geometryEngine,
      TileLayer: TileLayer,
      urlUtils: urlUtils,
      WebTileLayer: WebTileLayer
    };
    callback && callback();
  };
  ARCGIS_MAP_4.Map = function() {
    function Map(id, opt) {
      let self = this;
      this.config = opt;
      this.tileLayer = [];
      this.overlays = [];
      this.graphicsLayers = [];
      let map = new ARCGIS_MAP_4.modules.Map();
      let view = new ARCGIS_MAP_4.modules.MapView({
        container: id,
        map,
        constraints: {
          maxZoom: opt.maxZoom,
          minZoom: opt.minZoom
        },
        center: opt.center,
        zoom: opt.zoom
      });
      self._map = map;
      self._view = view;
      self._setInfoWindow();
      if (opt.slider === false)
        view.ui.empty("top-left");
      if (opt.proxyConfig) {
        ARCGIS_MAP_4.modules.urlUtils.addProxyRule({
          urlPrefix: opt.proxyConfig.urlPrefix,
          proxyUrl: opt.proxyConfig.proxyUrl
        });
      }
    }
    Map.prototype._setInfoWindow = function() {
      this._infoWindow = this._map.infoWindow;
    };
    Map.prototype.setCenter = function(center) {
      this._view.goTo({ center });
    };
    Map.prototype.centerAndZoom = function(center, zoom) {
      this._view.goTo({ center, zoom });
    };
    Map.prototype.setZoom = function(zoom) {
      this._view.goTo({ zoom });
    };
    Map.prototype.getZoom = function() {
      return this._view.zoom;
    };
    Map.prototype.getCenter = function() {
      let c = this._view.center;
      return [c.longitude, c.latitude];
    };
    Map.prototype.lnglatToPixel = function(lnglat) {
      let p;
      if (lnglat instanceof Array) {
        p = ARCGIS_MAP_4.modules.webMercatorUtils.lngLatToXY(lnglat[0], lnglat[1]);
      } else {
        p = ARCGIS_MAP_4.modules.webMercatorUtils.geographicToWebMercator(lnglat);
      }
      return p;
    };
    Map.prototype.pixelToLngLat = function(pixel) {
      let p;
      if (pixel instanceof Array) {
        p = ARCGIS_MAP_4.modules.webMercatorUtils.xyToLngLat(pixel[0], pixel[1]);
      } else {
        p = ARCGIS_MAP_4.modules.webMercatorUtils.webMercatorToGeographic(pixel);
      }
      return p;
    };
    Map.prototype.getExtend = function() {
      let flag = this._map.spatialReference.isWebMercator();
      let extent;
      if (flag) {
        extent = this._map.geographicExtent;
      } else {
        extent = this._map.extent;
      }
      return extent;
    };
    Map.prototype.setMapCursor = function(cursor) {
      this._map.setMapCursor(cursor);
    };
    Map.prototype.on = function(eventName, handler) {
      if (!eventName || !handler)
        return;
      let self = this;
      return this._map.on(eventName, function(d) {
        handler && handler.call(self, d);
      });
    };
    Map.prototype.off = function(eventObj) {
      if (eventObj)
        eventObj.remove();
    };
    Map.prototype.clearMap = function() {
      this._map.graphics.clear();
      this.overlays = [];
      this.graphicsLayers.forEach(function(g) {
        g.clear();
      });
    };
    Map.prototype.getAllOverlays = function(type) {
      let CLASS_NAME = "";
      switch (type) {
        case "marker":
          CLASS_NAME = "WMap.Marker";
          break;
        case "polyline":
          CLASS_NAME = "WMap.Polyline";
          break;
        case "polygon":
          CLASS_NAME = "WMap.Polygon";
          break;
        case "circle":
          CLASS_NAME = "WMap.Circle";
          break;
        case "text":
          CLASS_NAME = "WMap.Text";
          break;
        default:
          CLASS_NAME = type;
          break;
      }
      let overlays = this.overlays.filter(function(item) {
        if (!CLASS_NAME)
          return true;
        return item.CLASS_NAME === CLASS_NAME;
      });
      return overlays;
    };
    Map.prototype.add = function(overlayers) {
      let self = this;
      if (!(overlayers instanceof Array)) {
        overlayers = [overlayers];
      }
      overlayers.forEach(function(o) {
        if (o instanceof ARCGIS_MAP_4.TileLayer || o instanceof ARCGIS_MAP_4.Marker || o instanceof ARCGIS_MAP_4.Text || o instanceof ARCGIS_MAP_4.Polyline || o instanceof ARCGIS_MAP_4.Polygon || o instanceof ARCGIS_MAP_4.Circle || o instanceof ARCGIS_MAP_4.GraphicsLayer || o instanceof ARCGIS_MAP_4.ClusterLayer) {
          o.setMap(self);
        }
      });
    };
    Map.prototype.remove = function(overlayers) {
      if (!(overlayers instanceof Array)) {
        overlayers = [overlayers];
      }
      overlayers.forEach(function(o) {
        if (o instanceof ARCGIS_MAP_4.TileLayer || o instanceof ARCGIS_MAP_4.Marker || o instanceof ARCGIS_MAP_4.Text || o instanceof ARCGIS_MAP_4.Polyline || o instanceof ARCGIS_MAP_4.Polygon || o instanceof ARCGIS_MAP_4.Circle || o instanceof ARCGIS_MAP_4.GraphicsLayer || o instanceof ARCGIS_MAP_4.ClusterLayer) {
          o.setMap(null);
        }
      });
    };
    Map.prototype.getGraphicsLayer = function(id) {
      let graphicsLayer = this.graphicsLayers.filter(function(g) {
        return g._graphicsLayer.id === id;
      });
      return graphicsLayer[0];
    };
    Map.prototype.getAllGraphicsLayer = function() {
      return this.graphicsLayers;
    };
    Map.prototype.disablePan = function() {
      this._map.disablePan();
    };
    Map.prototype.enablePan = function() {
      this._map.enablePan();
    };
    Map.prototype.destroy = function() {
      this._view.destroy();
    };
    Map.prototype.setVisibility = function(visible) {
      this._map.setVisibility(visible);
    };
    Map.prototype.show = function() {
      this.setVisibility(true);
    };
    Map.prototype.hide = function() {
      this.setVisibility(false);
    };
    return Map;
  }();
  ARCGIS_MAP_4.Point = function() {
    function Point(x, y, spatialReference) {
      if (spatialReference)
        return new ARCGIS_MAP_4.modules.Point(x, y, spatialReference);
      return new ARCGIS_MAP_4.modules.Point(x, y);
    }
    return Point;
  }();
  ARCGIS_MAP_4.TileLayer = function() {
    function TileLayer(obj) {
      this.config = obj;
      this.wmap = null;
      obj.serviceType = obj.serviceType || "ArcGIS REST Tiled";
      let fn;
      let opts = {
        id: obj.id,
        url: obj.tileUrl
      };
      switch (obj.serviceType) {
        case "ArcGIS REST Tiled":
          fn = "TileLayer";
          break;
        case "ArcGIS REST":
          fn = "MapImageLayer";
          break;
        case "WMTS":
          {
            fn = "WebTileLayer";
            let other = {
              id: obj.id,
              urlTemplate: obj.tileUrl + `?SERVICE=WMTS&request=GetTile&version=${obj.info.version}&LAYER=${obj.info.identifier}&tileMatrixSet=${obj.info.tileMatrixSet}&TileMatrix={level}&TileRow={row}&TileCol={col}&style=${obj.info.style}&format=image/${obj.info.format}`,
              spatialReference: new ARCGIS_MAP_4.modules.SpatialReference({
                wkid: obj.info.wkid
              }),
              tileInfo: {
                rows: obj.info.rows,
                cols: obj.info.cols,
                compressionQuality: obj.info.compressionQuality,
                origin: obj.info.origin,
                spatialReference: new ARCGIS_MAP_4.modules.SpatialReference({
                  wkid: obj.info.wkid
                }),
                lods: obj.info.lods
              }
            };
            opts = other;
          }
          break;
        case "Tint Tiled":
          fn = "TintTiledLayer";
          Object.assign(opts, obj.info);
          break;
        case "ArcGISWebTiled":
          fn = "ArcGISWebTiledLayer";
          if (obj.info) {
            let spRef = new ARCGIS_MAP_4.modules.SpatialReference({
              wkid: obj.info.wkid
            });
            let fullExtent = new ARCGIS_MAP_4.modules.Extent(
              obj.info.fullExtent.xmin,
              obj.info.fullExtent.ymin,
              obj.info.fullExtent.xmax,
              obj.info.fullExtent.ymax,
              spRef
            );
            let initialExtent = new ARCGIS_MAP_4.modules.Extent(
              obj.info.initialExtent.xmin,
              obj.info.initialExtent.ymin,
              obj.info.initialExtent.xmax,
              obj.info.initialExtent.ymax,
              spRef
            );
            let tileInfo = new ARCGIS_MAP_4.modules.TileInfo({
              rows: obj.info.rows,
              cols: obj.info.cols,
              compressionQuality: obj.info.compressionQuality || 0,
              origin: obj.info.origin,
              spatialReference: spRef,
              lods: obj.info.lods
            });
            let other = {
              fullExtent,
              initialExtent,
              tileInfo
            };
            Object.assign(opts, other);
          }
          break;
      }
      console.log(222222);
      console.log(opts);
      this._tileLayer = new ARCGIS_MAP_4.modules[fn](opts);
      this._tileLayer.id = obj.id;
      this.visible = this._tileLayer.visible;
      if (obj.visible === false)
        this.hide();
      delete obj.visible;
    }
    TileLayer.prototype.show = function() {
      this.visible = true;
      this._tileLayer.visible = true;
    };
    TileLayer.prototype.hide = function() {
      this.visible = false;
      this._tileLayer.visible = false;
    };
    TileLayer.prototype.setMap = function(wmap) {
      let self = this;
      if (wmap === null) {
        if (!this.wmap)
          return;
        if (this._tileLayer)
          this.wmap._map.removeLayer(this._tileLayer);
        this.wmap.tileLayer = this.wmap.tileLayer.filter(function(item) {
          if (item === self)
            return false;
          return true;
        });
        this.wmap = null;
        return;
      }
      this.wmap = wmap;
      wmap.tileLayer.push(self);
      wmap._map.add(this._tileLayer);
    };
    TileLayer.prototype.getMap = function() {
      return this.wmap;
    };
    return TileLayer;
  }();
  ARCGIS_MAP_4.Marker = function() {
    function Marker(opt) {
      this.CLASS_NAME = "WMap.Marker";
      let obj = {
        attributes: null
      };
      Object.assign(obj, opt);
      this.config = obj;
      this.wmap = null;
      obj.position[0] = Number(obj.position[0]);
      obj.position[1] = Number(obj.position[1]);
      let wkid = obj.wkid || 4326;
      let point = new ARCGIS_MAP_4.modules.Point(
        obj.position[0],
        obj.position[1],
        new ARCGIS_MAP_4.modules.SpatialReference({ wkid })
      );
      let url = obj.icon;
      let width = obj.width || 36;
      let height = obj.height || 36;
      let symbol = new ARCGIS_MAP_4.modules.PictureMarkerSymbol(url, width, height);
      if (obj.angle)
        symbol.angle = obj.angle;
      if (obj.offset) {
        symbol.xoffset = obj.offset.x;
        symbol.yoffset = obj.offset.y;
      }
      this._graphic = new ARCGIS_MAP_4.modules.Graphic(point, symbol);
      if (obj.label)
        this.setLabel(obj.label);
      this.visible = obj.visible;
      if (obj.visible === false)
        this._graphic.visible = obj.visible;
      delete obj.visible;
    }
    Marker.prototype.setLabel = function(labelOpt) {
      let wkid = this.config.wkid || 4326;
      let point = new ARCGIS_MAP_4.modules.Point(
        this.config.position[0],
        this.config.position[1],
        new ARCGIS_MAP_4.modules.SpatialReference({ wkid })
      );
      if (labelOpt && labelOpt.text) {
        let text = new ARCGIS_MAP_4.Text({
          text: labelOpt.text,
          font: labelOpt.font,
          position: this.config.position,
          offset: labelOpt.offset,
          horizontalAlignment: labelOpt.horizontalAlignment,
          verticalAlignment: labelOpt.verticalAlignment
        });
        if (this.labelGraphic && this.labelGraphic._graphic_text) {
          this.labelGraphic._graphic_text.setSymbol(text._graphic.symbol);
        } else {
          if (!this.labelGraphic)
            this.labelGraphic = {};
          this.labelGraphic._graphic_text = text._graphic;
          if (this.visible === false)
            this.labelGraphic._graphic_text.visible = this.visible;
        }
      }
      if (labelOpt && labelOpt.icon) {
        labelOpt.width = labelOpt.width || 36;
        labelOpt.height = labelOpt.height || 36;
        let symboLabel = new ARCGIS_MAP_4.modules.PictureMarkerSymbol(
          labelOpt.icon,
          labelOpt.width,
          labelOpt.height
        );
        if (labelOpt.offset) {
          symboLabel.xoffset = labelOpt.offset.x;
          symboLabel.yoffset = labelOpt.offset.y;
        }
        let graphicLabel = new ARCGIS_MAP_4.modules.Graphic(point, symboLabel);
        if (this.labelGraphic && this.labelGraphic._graphic_icon) {
          this.labelGraphic._graphic_icon.setSymbol(symboLabel);
        } else {
          if (!this.labelGraphic)
            this.labelGraphic = {};
          this.labelGraphic._graphic_icon = graphicLabel;
          if (this.visible === false)
            this.labelGraphic._graphic_icon.visible = this.visible;
        }
      }
      this.config.label = labelOpt;
    };
    Marker.prototype.getLabel = function() {
      return this.config.label;
    };
    Marker.prototype.setIcon = function(url) {
      this._graphic.symbol.setUrl(url);
      this._graphic.setSymbol(this._graphic.symbol);
    };
    Marker.prototype.setMap = function(wmap) {
      let self = this;
      if (wmap === null) {
        if (!this.wmap)
          return;
        if (this._graphic)
          this.wmap._map.graphics.remove(this._graphic);
        if (this.labelGraphic) {
          if (this.labelGraphic._graphic_icon)
            this.wmap._map.graphics.remove(this.labelGraphic._graphic_icon);
          if (this.labelGraphic._graphic_text)
            this.wmap._map.graphics.remove(this.labelGraphic._graphic_text);
        }
        this.wmap.overlays = this.wmap.overlays.filter(function(item) {
          if (item === self)
            return false;
          return true;
        });
        this.wmap = null;
        return;
      }
      this.wmap = wmap;
      if (!this._graphic._graphicsLayer)
        wmap.overlays.push(this);
      wmap._map.graphics.add(this._graphic);
      if (this.labelGraphic) {
        if (this.labelGraphic._graphic_icon)
          wmap._map.graphics.add(this.labelGraphic._graphic_icon);
        if (this.labelGraphic._graphic_text)
          wmap._map.graphics.add(this.labelGraphic._graphic_text);
      }
    };
    Marker.prototype.getMap = function() {
      return this.wmap;
    };
    Marker.prototype.private_getGraphic = function() {
      let labelGraphic = this.labelGraphic;
      return {
        _graphic: this._graphic,
        _graphic_icon: labelGraphic ? this.labelGraphic._graphic_icon : null,
        _graphic_text: labelGraphic ? this.labelGraphic._graphic_text : null
      };
    };
    Marker.prototype.show = function() {
      this._graphic.show();
      this.visible = this._graphic._visible;
      if (this.labelGraphic && this.labelGraphic._graphic_icon)
        this.labelGraphic._graphic_icon.show();
      if (this.labelGraphic && this.labelGraphic._graphic_text)
        this.labelGraphic._graphic_text.show();
    };
    Marker.prototype.hide = function() {
      this._graphic.hide();
      this.visible = this._graphic._visible;
      if (this.labelGraphic && this.labelGraphic._graphic_text)
        this.labelGraphic._graphic_text.hide();
      if (this.labelGraphic && this.labelGraphic._graphic_icon)
        this.labelGraphic._graphic_icon.hide();
    };
    Marker.prototype.getAttributes = function() {
      return this.config.attributes;
    };
    Marker.prototype.setAttributes = function(attributes) {
      let obj = this.config.attributes;
      Object.assign(obj, attributes);
      this.config.attributes = obj;
    };
    Marker.prototype.setGeometry = function(geometry) {
      this._graphic.setGeometry(geometry);
      if (this.labelGraphic && this.labelGraphic._graphic_text)
        this.labelGraphic._graphic_text.setGeometry(geometry);
      if (this.labelGraphic && this.labelGraphic._graphic_icon)
        this.labelGraphic._graphic_icon.setGeometry(geometry);
    };
    Marker.prototype.setPosition = function(pos) {
      let wkid = this.config.wkid || 4326;
      let point = new ARCGIS_MAP_4.modules.Point(
        pos[0],
        pos[1],
        new ARCGIS_MAP_4.modules.SpatialReference({ wkid })
      );
      this.setGeometry(point);
    };
    Marker.prototype.getPosition = function() {
      let lng = this._graphic.geometry.getLongitude();
      let lat = this._graphic.geometry.getLatitude();
      return [lng, lat];
    };
    Marker.prototype.setAngle = function(angle) {
      this._graphic.symbol.setAngle(angle);
    };
    Marker.prototype.setOffset = function(x, y) {
      this._graphic.symbol.setOffset(x, y);
    };
    Marker.prototype.setWidth = function(width) {
      this._graphic.symbol.setWidth(width);
    };
    Marker.prototype.setHeight = function(height) {
      this._graphic.symbol.setHeight(height);
    };
    return Marker;
  }();
  ARCGIS_MAP_4.Text = function() {
    function Text(opt) {
      this.CLASS_NAME = "WMap.Text";
      let obj = {
        attributes: null
      };
      Object.assign(obj, opt);
      this.config = obj;
      this.wmap = null;
      let wkid = obj.wkid || 4326;
      let point = new ARCGIS_MAP_4.modules.Point(
        obj.position[0],
        obj.position[1],
        new ARCGIS_MAP_4.modules.SpatialReference({ wkid })
      );
      let font = obj.font ? new ARCGIS_MAP_4.modules.Font(
        obj.font.size,
        obj.font.style,
        "",
        obj.font.weight,
        obj.font.family
      ) : null;
      let color = obj.font.color ? new ARCGIS_MAP_4.modules.Color(obj.font.color) : null;
      let symbol = new ARCGIS_MAP_4.modules.TextSymbol(obj.text, font, color);
      if (obj.angle)
        symbol.angle = obj.angle;
      if (obj.horizontalAlignment)
        symbol.horizontalAlignment = obj.horizontalAlignment;
      if (obj.verticalAlignment)
        symbol.verticalAlignment = obj.verticalAlignment;
      if (obj.offset) {
        symbol.xoffset = obj.offset.x;
        symbol.yoffset = obj.offset.y;
      }
      this._graphic = new ARCGIS_MAP_4.modules.Graphic(point, symbol);
      this.visible = obj.visible;
      if (obj.visible === false)
        this._graphic.visible = obj.visible;
      delete obj.visible;
    }
    Text.prototype.setAngle = function(angle) {
      this._graphic.symbol.setAngle(angle);
    };
    Text.prototype.setOffset = function(x, y) {
      this._graphic.symbol.setOffset(x, y);
    };
    Text.prototype.setMap = function(wmap) {
      let self = this;
      if (wmap === null) {
        if (!this.wmap)
          return;
        if (this._graphic)
          this.wmap._map.graphics.remove(this._graphic);
        this.wmap.overlays = this.wmap.overlays.filter(function(item) {
          if (item === self)
            return false;
          return true;
        });
        this.wmap = null;
        return;
      }
      this.wmap = wmap;
      if (!this._graphic._graphicsLayer)
        wmap.overlays.push(this);
      wmap._map.graphics.add(this._graphic);
    };
    Text.prototype.getMap = function() {
      return this.wmap;
    };
    Text.prototype.private_getGraphic = function() {
      return {
        _graphic: this._graphic
      };
    };
    Text.prototype.show = function() {
      this._graphic.show();
      this.visible = this._graphic._visible;
    };
    Text.prototype.hide = function() {
      this._graphic.hide();
      this.visible = this._graphic._visible;
    };
    Text.prototype.getAttributes = function() {
      return this.config.attributes;
    };
    Text.prototype.setAttributes = function(attributes) {
      let obj = this.config.attributes;
      Object.assign(obj, attributes);
      this.config.attributes = obj;
    };
    Text.prototype.setGeometry = function(geometry) {
      this._graphic.setGeometry(geometry);
    };
    Text.prototype.setPosition = function(pos) {
      let wkid = this.config.wkid || 4326;
      let point = new ARCGIS_MAP_4.modules.Point(
        pos[0],
        pos[1],
        new ARCGIS_MAP_4.modules.SpatialReference({ wkid })
      );
      this.setGeometry(point);
    };
    Text.prototype.getPosition = function() {
      let lng = this._graphic.geometry.getLongitude();
      let lat = this._graphic.geometry.getLatitude();
      return [lng, lat];
    };
    Text.prototype.setText = function(text) {
      this._graphic.symbol.setText(text);
    };
    return Text;
  }();
  ARCGIS_MAP_4.Polyline = function() {
    function Polyline(opt) {
      this.CLASS_NAME = "WMap.Polyline";
      let obj = {
        attributes: null
      };
      Object.assign(obj, opt);
      this.config = obj;
      this.wmap = null;
      let wkid = obj.wkid || 4326;
      let polyline = new ARCGIS_MAP_4.modules.Polyline({
        paths: [obj.paths],
        spatialReference: new ARCGIS_MAP_4.modules.SpatialReference({ wkid })
      });
      let style = ARCGIS_MAP_4.modules.CartographicLineSymbol[obj.style] || ARCGIS_MAP_4.modules.CartographicLineSymbol["STYLE_SOLID"];
      let color = obj.color ? new ARCGIS_MAP_4.modules.Color(obj.color) : null;
      let width = obj.width || 1;
      let cap = ARCGIS_MAP_4.modules.CartographicLineSymbol[obj.cap] || ARCGIS_MAP_4.modules.CartographicLineSymbol["CAP_BUTT"];
      let join = ARCGIS_MAP_4.modules.CartographicLineSymbol[obj.join] || ARCGIS_MAP_4.modules.CartographicLineSymbol["JOIN_MITER"];
      let miterLimit = obj.miterLimit || 10;
      let symbol = new ARCGIS_MAP_4.modules.CartographicLineSymbol(
        style,
        color,
        width,
        cap,
        join,
        miterLimit
      );
      this._graphic = new ARCGIS_MAP_4.modules.Graphic(polyline, symbol);
      this.visible = obj.visible;
      if (obj.visible === false)
        this._graphic.visible = obj.visible;
      delete obj.visible;
    }
    Polyline.prototype.setMap = function(wmap) {
      let self = this;
      if (wmap === null) {
        if (!this.wmap)
          return;
        if (this._graphic)
          this.wmap._map.graphics.remove(this._graphic);
        this.wmap.overlays = this.wmap.overlays.filter(function(item) {
          if (item === self)
            return false;
          return true;
        });
        this.wmap = null;
        return;
      }
      this.wmap = wmap;
      if (!this._graphic._graphicsLayer)
        wmap.overlays.push(this);
      wmap._map.graphics.add(this._graphic);
    };
    Polyline.prototype.getMap = function() {
      return this.wmap;
    };
    Polyline.prototype.private_getGraphic = function() {
      return {
        _graphic: this._graphic
      };
    };
    Polyline.prototype.show = function() {
      this._graphic.show();
      this.visible = this._graphic._visible;
    };
    Polyline.prototype.hide = function() {
      this._graphic.hide();
      this.visible = this._graphic._visible;
    };
    Polyline.prototype.getAttributes = function() {
      return this.config.attributes;
    };
    Polyline.prototype.setAttributes = function(attributes) {
      let obj = this.config.attributes;
      Object.assign(obj, attributes);
      this.config.attributes = obj;
    };
    Polyline.prototype.setGeometry = function(geometry) {
      this._graphic.setGeometry(geometry);
    };
    Polyline.prototype.setPath = function(paths) {
      let wkid = this.config.wkid || 4326;
      let geometry = new ARCGIS_MAP_4.modules.Polyline({
        paths: [paths],
        spatialReference: new ARCGIS_MAP_4.modules.SpatialReference({ wkid })
      });
      this.setGeometry(geometry);
    };
    Polyline.prototype.getPath = function() {
      let paths = this._graphic.geometry.paths;
      return paths[0];
    };
    return Polyline;
  }();
  ARCGIS_MAP_4.Polygon = function() {
    function Polygon(opt) {
      this.CLASS_NAME = "WMap.Polygon";
      let obj = {
        attributes: null
      };
      Object.assign(obj, opt);
      this.config = obj;
      this.wmap = null;
      let wkid = obj.wkid || 4326;
      let polygon = new ARCGIS_MAP_4.modules.Polygon({
        rings: [obj.paths],
        spatialReference: new ARCGIS_MAP_4.modules.SpatialReference({ wkid })
      });
      let style = ARCGIS_MAP_4.modules.CartographicLineSymbol["STYLE_SOLID"];
      let color = obj.color ? obj.color._color ? obj.color._color : new ARCGIS_MAP_4.modules.Color(obj.color) : null;
      let outlineStyle = obj.outline && obj.outline.style ? ARCGIS_MAP_4.modules.CartographicLineSymbol[obj.outline.style] : ARCGIS_MAP_4.modules.CartographicLineSymbol["STYLE_SOLID"];
      let outline = obj.outline ? new ARCGIS_MAP_4.modules.SimpleLineSymbol(
        outlineStyle,
        obj.outline.color,
        obj.outline.width
      ) : null;
      let symbol = new ARCGIS_MAP_4.modules.SimpleFillSymbol(style, outline, color);
      this._graphic = new ARCGIS_MAP_4.modules.Graphic(polygon, symbol);
      this.visible = obj.visible;
      if (obj.visible === false)
        this._graphic.visible = obj.visible;
      delete obj.visible;
    }
    Polygon.prototype.setMap = function(wmap) {
      let self = this;
      if (wmap === null) {
        if (!this.wmap)
          return;
        if (this._graphic)
          this.wmap._map.graphics.remove(this._graphic);
        this.wmap.overlays = this.wmap.overlays.filter(function(item) {
          if (item === self)
            return false;
          return true;
        });
        this.wmap = null;
        return;
      }
      this.wmap = wmap;
      if (!this._graphic._graphicsLayer)
        wmap.overlays.push(this);
      wmap._map.graphics.add(this._graphic);
    };
    Polygon.prototype.getMap = function() {
      return this.wmap;
    };
    Polygon.prototype.private_getGraphic = function() {
      return {
        _graphic: this._graphic
      };
    };
    Polygon.prototype.show = function() {
      this._graphic.show();
      this.visible = this._graphic._visible;
    };
    Polygon.prototype.hide = function() {
      this._graphic.hide();
      this.visible = this._graphic._visible;
    };
    Polygon.prototype.getAttributes = function() {
      return this.config.attributes;
    };
    Polygon.prototype.setAttributes = function(attributes) {
      let obj = this.config.attributes;
      Object.assign(obj, attributes);
      this.config.attributes = obj;
    };
    Polygon.prototype.setGeometry = function(geometry) {
      this._graphic.setGeometry(geometry);
    };
    Polygon.prototype.setPath = function(paths) {
      let wkid = this.config.wkid || 4326;
      let geometry = new ARCGIS_MAP_4.modules.Polygon({
        rings: [paths],
        spatialReference: new ARCGIS_MAP_4.modules.SpatialReference({ wkid })
      });
      this.setGeometry(geometry);
    };
    Polygon.prototype.getPath = function() {
      let rings = this._graphic.geometry.rings;
      return rings[0];
    };
    return Polygon;
  }();
  ARCGIS_MAP_4.Circle = function() {
    function Circle(opt) {
      this.CLASS_NAME = "WMap.Circle";
      let obj = {
        attributes: null
      };
      Object.assign(obj, opt);
      this.config = obj;
      this.wmap = null;
      let circle = new ARCGIS_MAP_4.modules.Circle(obj.center, {
        radius: obj.radius,
        geodesic: obj.geodesic === true ? true : false
      });
      let style = ARCGIS_MAP_4.modules.CartographicLineSymbol["STYLE_SOLID"];
      let color = obj.color ? new ARCGIS_MAP_4.modules.Color(obj.color) : null;
      let outlineStyle = obj.outline && obj.outline.style ? ARCGIS_MAP_4.modules.CartographicLineSymbol[obj.outline.style] : ARCGIS_MAP_4.modules.CartographicLineSymbol["STYLE_SOLID"];
      let outline = obj.outline ? new ARCGIS_MAP_4.modules.SimpleLineSymbol(
        outlineStyle,
        obj.outline.color,
        obj.outline.width
      ) : null;
      let symbol = new ARCGIS_MAP_4.modules.SimpleFillSymbol(style, outline, color);
      this._graphic = new ARCGIS_MAP_4.modules.Graphic(circle, symbol);
      this.visible = obj.visible;
      if (obj.visible === false)
        this._graphic.visible = obj.visible;
      delete obj.visible;
    }
    Circle.prototype.setMap = function(wmap) {
      let self = this;
      if (wmap === null) {
        if (!this.wmap)
          return;
        if (this._graphic)
          this.wmap._map.graphics.remove(this._graphic);
        this.wmap.overlays = this.wmap.overlays.filter(function(item) {
          if (item === self)
            return false;
          return true;
        });
        this.wmap = null;
        return;
      }
      this.wmap = wmap;
      if (!this._graphic._graphicsLayer)
        wmap.overlays.push(this);
      wmap._map.graphics.add(this._graphic);
    };
    Circle.prototype.getMap = function() {
      return this.wmap;
    };
    Circle.prototype.private_getGraphic = function() {
      return {
        _graphic: this._graphic
      };
    };
    Circle.prototype.show = function() {
      this._graphic.show();
      this.visible = this._graphic._visible;
    };
    Circle.prototype.hide = function() {
      this._graphic.hide();
      this.visible = this._graphic._visible;
    };
    Circle.prototype.getAttributes = function() {
      return this.config.attributes;
    };
    Circle.prototype.setAttributes = function(attributes) {
      let obj = this.config.attributes;
      Object.assign(obj, attributes);
      this.config.attributes = obj;
    };
    Circle.prototype.setGeometry = function(geometry) {
      this._graphic.setGeometry(geometry);
    };
    Circle.prototype.setCenter = function(center) {
      let geometry = new ARCGIS_MAP_4.modules.Circle(center, {
        radius: this.config.radius,
        geodesic: this.config.geodesic === false ? false : true
      });
      this.setGeometry(geometry);
    };
    Circle.prototype.setRadius = function(radius) {
      let geometry = new ARCGIS_MAP_4.modules.Circle(this.config.center, {
        radius,
        geodesic: this.config.geodesic === false ? false : true
      });
      this.setGeometry(geometry);
    };
    Circle.prototype.getCenter = function() {
      let center = this._graphic.geometry.center;
      let lng = center.getLongitude();
      let lat = center.getLatitude();
      return [lng, lat];
    };
    Circle.prototype.getRadius = function() {
      let radius = this._graphic.geometry.radius;
      return radius;
    };
    return Circle;
  }();
  ARCGIS_MAP_4.GraphicsLayer = function() {
    function GraphicsLayer(opt) {
      let obj = {
        attributes: null
      };
      Object.assign(obj, opt);
      this.overlays = [];
      this.config = obj;
      this.wmap = null;
      let graphicsLayer = new ARCGIS_MAP_4.modules.GraphicsLayer({
        id: opt.id,
        dataAttributes: opt.dataAttributes,
        className: opt.className
      });
      this._graphicsLayer = graphicsLayer;
      this.visible = obj.visible;
      if (obj.visible === false)
        this._graphicsLayer.visible = obj.visible;
      delete obj.visible;
    }
    GraphicsLayer.prototype.add = function(overlayers) {
      let self = this;
      if (!(overlayers instanceof Array)) {
        overlayers = [overlayers];
      }
      overlayers.forEach(function(o) {
        if (!o._graphic._graphicsLayer)
          self.overlays.push(o);
        let graphicObj = o.private_getGraphic();
        if (graphicObj._graphic)
          self._graphicsLayer.add(graphicObj._graphic);
        if (graphicObj._graphic_icon)
          self._graphicsLayer.add(graphicObj._graphic_icon);
        if (graphicObj._graphic_text)
          self._graphicsLayer.add(graphicObj._graphic_text);
      });
    };
    GraphicsLayer.prototype.remove = function(overlayers) {
      let self = this;
      if (!(overlayers instanceof Array)) {
        overlayers = [overlayers];
      }
      overlayers.forEach(function(o) {
        self.overlays = self.overlays.filter(function(item) {
          if (item === o)
            return false;
          return true;
        });
        let graphicObj = o.private_getGraphic();
        if (graphicObj._graphic)
          self._graphicsLayer.remove(graphicObj._graphic);
        if (graphicObj._graphic_icon)
          self._graphicsLayer.remove(graphicObj._graphic_icon);
        if (graphicObj._graphic_text)
          self._graphicsLayer.remove(graphicObj._graphic_text);
      });
    };
    GraphicsLayer.prototype.getAllOverlays = function(type) {
      let CLASS_NAME = "";
      switch (type) {
        case "marker":
          CLASS_NAME = "WMap.Marker";
          break;
        case "polyline":
          CLASS_NAME = "WMap.Polyline";
          break;
        case "polygon":
          CLASS_NAME = "WMap.Polygon";
          break;
        case "circle":
          CLASS_NAME = "WMap.Circle";
          break;
        case "text":
          CLASS_NAME = "WMap.Text";
          break;
        default:
          CLASS_NAME = type;
          break;
      }
      let overlays = this.overlays.filter(function(item) {
        if (!CLASS_NAME)
          return true;
        return item.CLASS_NAME === CLASS_NAME;
      });
      return overlays;
    };
    GraphicsLayer.prototype.clear = function() {
      this._graphicsLayer.clear();
      this.overlays = [];
    };
    GraphicsLayer.prototype.setMap = function(wmap) {
      let self = this;
      if (wmap === null) {
        if (!this.wmap)
          return;
        this.wmap._map.removeLayer(self._graphicsLayer);
        this.wmap.graphicsLayers = this.wmap.graphicsLayers.filter(function(item) {
          if (item === self)
            return false;
          return true;
        });
        this.wmap = null;
        return;
      }
      this.wmap = wmap;
      if (!this._graphicsLayer._map)
        wmap.graphicsLayers.push(this);
      this.wmap._map.addLayer(self._graphicsLayer);
    };
    GraphicsLayer.prototype.getMap = function() {
      return this.wmap;
    };
    GraphicsLayer.prototype.show = function() {
      this._graphicsLayer.show();
      this.visible = this._graphicsLayer.visible;
    };
    GraphicsLayer.prototype.hide = function() {
      this._graphicsLayer.hide();
      this.visible = this._graphicsLayer.visible;
    };
    GraphicsLayer.prototype.getAttributes = function() {
      return this.config.attributes;
    };
    GraphicsLayer.prototype.setAttributes = function(attributes) {
      let obj = this.config.attributes;
      Object.assign(obj, attributes);
      this.config.attributes = obj;
    };
    GraphicsLayer.prototype.on = function(eventName, handler) {
      if (!eventName || !handler)
        return;
      let self = this;
      return this._graphicsLayer.on(eventName, function(d) {
        let overlays = self.overlays.filter(function(o) {
          return o._graphic === d.graphic;
        });
        d.overlay = overlays[0];
        handler && handler.call(self, d);
      });
    };
    GraphicsLayer.prototype.off = function(eventObj) {
      if (eventObj)
        eventObj.remove();
    };
    GraphicsLayer.prototype.setVisibility = function(visible) {
      this.visible = visible;
      this._graphicsLayer.setVisibility(visible);
    };
    return GraphicsLayer;
  }();
  ARCGIS_MAP_4.Draw = function() {
    function Draw(wmap, opt) {
      let obj = {};
      Object.assign(obj, opt);
      this.config = obj;
      this._draw = new ARCGIS_MAP_4.modules.Draw(wmap._map);
      if (obj.fillSymbol) {
        let style = ARCGIS_MAP_4.modules.CartographicLineSymbol["STYLE_SOLID"];
        let color = obj.fillSymbol.color ? new ARCGIS_MAP_4.modules.Color(obj.fillSymbol.color) : null;
        let outlineStyle = obj.fillSymbol.outline && obj.fillSymbol.outline.style ? ARCGIS_MAP_4.modules.CartographicLineSymbol[obj.fillSymbol.outline.style] : ARCGIS_MAP_4.modules.CartographicLineSymbol["STYLE_SOLID"];
        let outline = obj.fillSymbol.outline ? new ARCGIS_MAP_4.modules.SimpleLineSymbol(
          outlineStyle,
          obj.fillSymbol.outline.color,
          obj.fillSymbol.outline.width
        ) : null;
        let symbol = new ARCGIS_MAP_4.modules.SimpleFillSymbol(style, outline, color);
        this._draw.setFillSymbol(symbol);
      }
      this.wmap = wmap;
    }
    Draw.prototype.on = function(eventName, handler) {
      if (!eventName || !handler)
        return;
      let self = this;
      return this._draw.on(eventName, function(d) {
        handler && handler.call(self, d);
      });
    };
    Draw.prototype.activate = function(type) {
      this._draw.activate(type);
    };
    Draw.prototype.deactivate = function() {
      this._draw.deactivate();
    };
    return Draw;
  }();
  ARCGIS_MAP_4.Color = function() {
    function Color(color) {
      this.config = color;
      this._color = new ARCGIS_MAP_4.modules.Color(color);
    }
    return Color;
  }();
  console.log(ARCGIS_MAP_4.Color);
  ARCGIS_MAP_4.ClusterLayer = function() {
    function ClusterLayer(opt) {
      let obj = {
        attributes: null
      };
      Object.assign(obj, opt);
      this.config = obj;
      this.wmap = null;
      let data = this._getData(obj.markers);
      delete this.config.data;
      this._clusterLayer = new ARCGIS_MAP_4.modules.ClusterLayer({
        data,
        distance: obj.distance,
        id: obj.id,
        labelColor: obj.styles.labelColor,
        labelOffset: obj.styles.labelOffset,
        spatialReference: obj.map._map.spatialReference,
        fontSize: obj.styles.fontSize
      });
      this.overlays = obj.markers;
      delete this.config.markers;
      let defaultSym = new ARCGIS_MAP_4.modules.SimpleMarkerSymbol().setSize(1);
      let renderer = this.renderer = new ARCGIS_MAP_4.modules.ClassBreaksRenderer(
        defaultSym,
        "clusterCount"
      );
      let pictureMarkerSymbol = this._pictureMarkerSymbol = new ARCGIS_MAP_4.modules.PictureMarkerSymbol(
        obj.styles.icon,
        obj.styles.size.width,
        obj.styles.size.height
      );
      if (obj.styles && obj.styles.offset)
        pictureMarkerSymbol.setOffset(obj.styles.offset.x, obj.styles.offset.y);
      renderer.addBreak(2, data.length, pictureMarkerSymbol);
      renderer.addBreak(0, 1, this.overlays[0]._graphic.symbol);
      this._clusterLayer.setRenderer(renderer);
      if (obj.map) {
        this.setMap(obj.map);
      }
      this.visible = obj.visible;
      if (this.visible === false)
        this.setVisibility(false);
      delete obj.visible;
    }
    ClusterLayer.prototype.setMap = function(wmap) {
      let self = this;
      if (wmap === null) {
        if (!this.wmap)
          return;
        this.wmap._map.removeLayer(self._clusterLayer);
        this.wmap = null;
        return;
      }
      this.wmap = wmap;
      this.wmap._map.addLayer(self._clusterLayer);
    };
    ClusterLayer.prototype._getData = function(markers) {
      let self = this;
      return markers.map(function(marker) {
        let position = marker.getPosition();
        let x = position[0];
        let y = position[1];
        if (x != 0 && y != 0) {
          if (self.config.map._map.spatialReference.isWebMercator()) {
            let p = ARCGIS_MAP_4.modules.webMercatorUtils.geographicToWebMercator(
              new ARCGIS_MAP_4.modules.Point(x, y, self.config.map._map.spatialReference)
            );
            x = p.x;
            y = p.y;
          }
        }
        let attributes = marker.getAttributes();
        return {
          x,
          y,
          attributes
        };
      });
    };
    ClusterLayer.prototype.getAttributes = function() {
      return this.config.attributes;
    };
    ClusterLayer.prototype.setAttributes = function(attributes) {
      let obj = this.config.attributes;
      Object.assign(obj, attributes);
      this.config.attributes = obj;
    };
    ClusterLayer.prototype.setVisibility = function(visible) {
      visible === false ? this.hide() : this.show();
    };
    ClusterLayer.prototype.show = function() {
      this.visible = true;
      this._clusterLayer.show();
    };
    ClusterLayer.prototype.hide = function() {
      this.visible = false;
      this._clusterLayer.hide();
    };
    ClusterLayer.prototype.addMarker = function(markers) {
      if (!(markers instanceof Array)) {
        markers = [markers];
      }
      this.overlays = this.overlays.concat(markers);
      let data1 = this._getData(markers);
      let renderer = this._clusterLayer.renderer;
      renderer.removeBreak(2, this._clusterLayer._clusterData.length);
      renderer.addBreak(2, this._clusterLayer._clusterData.length + 1, this._pictureMarkerSymbol);
      this._clusterLayer._addData(data1);
    };
    ClusterLayer.prototype.removeMarker = function(index) {
      let overlay = this.overlays.splice(index, 1);
      let renderer = this._clusterLayer.renderer;
      renderer.removeBreak(2, this._clusterLayer._clusterData.length);
      renderer.addBreak(2, this._clusterLayer._clusterData.length - 1, this._pictureMarkerSymbol);
      this._clusterLayer._removeData(index);
      return overlay;
    };
    ClusterLayer.prototype.getAllMarkers = function() {
      return this.overlays;
    };
    ClusterLayer.prototype.on = function(eventName, handler) {
      if (!eventName || !handler)
        return;
      let self = this;
      return this._clusterLayer.on(eventName, function(d) {
        handler && handler.call(self, d);
      });
    };
    ClusterLayer.prototype.showInfowindow = function(opt) {
      this.wmap._infoWindow.setTitle(opt.title);
      this.wmap._infoWindow.setContent(opt.content);
      this.wmap._infoWindow.show(opt.point);
    };
    return ClusterLayer;
  }();
  ARCGIS_MAP_4.OverviewMap = function() {
    function OverviewMap(opt, srcNodeRef) {
      this.config = opt;
      this.wmap = opt.map;
      opt.map = opt.map._map;
      this.visible = opt.visible && opt.visible === true ? opt.visible : false;
      if (opt.type && opt.type == "custom") {
        this.config.attachTo = this.config.attachTo ? this.config.attachTo : "top-right";
        this.config.expandFactor = this.config.expandFactor ? this.config.expandFactor : 2;
      } else {
        this._overviewMap = new ARCGIS_MAP_4.modules.OverviewMap(opt, srcNodeRef);
      }
      delete opt.visible;
    }
    OverviewMap.prototype.startup = function() {
      if (this.config.type && this.config.type == "custom") {
        let display1 = "block";
        if (this.visible === false)
          display1 = "none";
        let el = document.createElement("div");
        let classN = function(attachTo) {
          let c = "esriOverviewMap ovwTR";
          switch (attachTo) {
            case "bottom-right":
              c = "esriOverviewMap ovwBR";
              break;
            case "bottom-left":
              c = "esriOverviewMap ovwBL";
              break;
            case "top-left":
              c = "esriOverviewMap ovwTL";
              break;
          }
          return c;
        }(this.config.attachTo);
        el.className = classN;
        el.id = this.config.id;
        el.style.userSelect = "none";
        this.config.map.container.append(el);
        let ovwContainer_w = this.config.map.width / 4;
        let ovwContainer_h = this.config.map.height / 4;
        let ovwHighlight_w = ovwContainer_w / this.config.expandFactor;
        let ovwHighlight_h = ovwContainer_h / this.config.expandFactor;
        let ovwHighlight_l = (ovwContainer_w - ovwHighlight_w) / 2;
        let ovwHighlight_t = (ovwContainer_h - ovwHighlight_h) / 2;
        let opacity = this.config.opacity || 0.5;
        let color = this.config.color || "#000000";
        let html = '<div class="ovwContainer" style="display:' + display1 + "; width: " + ovwContainer_w + "px; height: " + ovwContainer_h + 'px; ">    <div id="' + this.config.id + '-map" style="width: 100%; height: 100%;" class="map">      <div class="ovwHighlight" title="\u62D6\u52A8\u4EE5\u66F4\u6539\u5730\u56FE\u8303\u56F4" style="border: 1px solid rgb(255, 255, 255); background-color: ' + color + "; opacity: " + opacity + "; display: block; left: " + ovwHighlight_l + "px; top: " + ovwHighlight_t + "px; width: " + ovwHighlight_w + "px; height: " + ovwHighlight_h + 'px;"></div>    </div>  </div>';
        el.innerHTML = html;
        let obj = {};
        obj = Object.assign({}, this.wmap.config);
        delete obj.maxZoom;
        delete obj.minZoom;
        obj.zoom = Math.ceil(obj.zoom * 0.75);
        let wmap = new ARCGIS_MAP_4.Map(this.config.id + "-map", obj);
        wmap.on("load", function() {
          wmap._map.disableDoubleClickZoom();
          wmap._map.disableKeyboardNavigation();
          wmap._map.disablePan();
          wmap._map.disableScrollWheelZoom();
        });
        this.overviewMap = wmap;
        let t_obj = this.config.tileLayer.config, tileLayer_obj;
        tileLayer_obj = Object.assign({}, t_obj);
        tileLayer_obj.id = tileLayer_obj.id + "_tileLayer";
        let tileLayer = new ARCGIS_MAP_4.TileLayer(tileLayer_obj);
        let layers = [];
        layers.push(tileLayer);
        wmap.add(layers);
        this.wmap.on("extent-change", function(evt) {
          try {
            let zoom = this.getZoom();
            let center = this.getCenter();
            wmap.centerAndZoom(center, Math.ceil(zoom * 0.75));
          } catch (e) {
          }
        });
        let ovwHighlight = this.config.map.container.querySelector(".ovwHighlight");
        let self = this;
        drawImg(this.config.map.container.querySelector(".ovwHighlight"), function() {
          let top = parseInt(ovwHighlight.style.top);
          let left = parseInt(ovwHighlight.style.left);
          let width = ovwHighlight.offsetWidth;
          let height = ovwHighlight.offsetHeight;
          let point = wmap._map.toMap(
            ARCGIS_MAP_4.modules.ScreenPoint(left + width / 2, top + height / 2)
          );
          let lngLatPoint = wmap.pixelToLngLat(point);
          let lngLat = [lngLatPoint.x, lngLatPoint.y];
          wmap.setCenter(lngLat);
          self.wmap.setCenter(lngLat);
          ovwHighlight.style.top = ovwHighlight_t + "px";
          ovwHighlight.style.left = ovwHighlight_l + "px";
        });
      } else {
        this._overviewMap.startup();
      }
    };
    OverviewMap.prototype.hide = function() {
      this.visible = false;
      if (this.config.type && this.config.type == "custom") {
        let ovwContainer = this.config.map.container.querySelector(".ovwContainer");
        ovwContainer.style.display = "none";
      } else {
        this._overviewMap.hide();
      }
    };
    OverviewMap.prototype.destroy = function() {
      if (this.config.type && this.config.type == "custom") {
        this.config.map.container.querySelector(".esriOverviewMap").remove();
        this.overviewMap._map.destroy();
      } else {
        this._overviewMap.destroy();
      }
    };
    OverviewMap.prototype.resize = function(size) {
      if (this.config.type && this.config.type == "custom") ; else {
        this._overviewMap.resize(size);
      }
    };
    OverviewMap.prototype.show = function() {
      this.visible = true;
      if (this.config.type && this.config.type == "custom") {
        let ovwContainer = this.config.map.container.querySelector(".ovwContainer");
        ovwContainer.style.display = "block";
      } else {
        this._overviewMap.show();
      }
    };
    return OverviewMap;
  }();
  ARCGIS_MAP_4.GeometryEngine = function() {
    function GeometryEngine() {
      this._geometryEngine = ARCGIS_MAP_4.modules.GeometryEngine;
    }
    GeometryEngine.prototype.buffer = function(overlayers, distances, unit, unionResults) {
      if (!(overlayers instanceof Array)) {
        overlayers = [overlayers];
      }
      if (!(distances instanceof Array)) {
        distances = [distances];
      }
      let geometry = overlayers.map(function(overlayer) {
        return overlayer._graphic.geometry;
      });
      return this._geometryEngine.buffer(geometry, distances, unit, unionResults);
    };
    GeometryEngine.prototype.geodesicBuffer = function(overlayers, distances, unit, unionResults) {
      if (!(overlayers instanceof Array)) {
        overlayers = [overlayers];
      }
      if (!(distances instanceof Array)) {
        distances = [distances];
      }
      let geometry = overlayers.map(function(overlayer) {
        return overlayer._graphic.geometry;
      });
      return this._geometryEngine.geodesicBuffer(geometry, distances, unit, unionResults);
    };
    return GeometryEngine;
  }();
  return ClassF;
});
function drawImg(div, onmouseupCallback) {
  let x = 0;
  let y = 0;
  let l = 0;
  let t = 0;
  let isDown = false;
  div.onmousedown = function(e) {
    x = e.clientX;
    y = e.clientY;
    l = div.offsetLeft;
    t = div.offsetTop;
    isDown = true;
    div.style.cursor = "move";
  };
  window.onmousemove = function(e) {
    if (isDown == false) {
      return;
    }
    let nx = e.clientX;
    let ny = e.clientY;
    let nl = nx - (x - l);
    let nt = ny - (y - t);
    div.style.left = nl + "px";
    div.style.top = nt + "px";
  };
  div.onmouseup = function() {
    isDown = false;
    div.style.cursor = "default";
    onmouseupCallback && onmouseupCallback();
  };
}

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result)
    __defProp(target, key, result);
  return result;
};
let Gis$1 = class Gis extends Vue {
  constructor() {
    super(...arguments);
    this.WMap = WMap;
    this.mapTypeFlag = false;
    this.overviewFlag = false;
    this.mapbtnBoxFlag = false;
    this.moveControlFlag = false;
    this.moveControlPlayFlag = "1";
    this.pointRoundBoxFlag = false;
    this.options = [
      {
        value: "0.5",
        label: "1/2x"
      },
      {
        value: "1",
        label: "1x"
      },
      {
        value: "2",
        label: "2x"
      },
      {
        value: "3",
        label: "3x"
      }
    ];
    this.value = "1";
    this.checked1 = true;
    this.checked2 = false;
    this.minWidth = 0;
    this.lineArr = [];
    this.lineArrIds = [];
    this.imgObj = {};
    this.color = [];
    this.linFlag = "";
    this.roundCircleExtent = "A";
    this.roundCircleFn = "A";
    this.roundCircleP = "A";
    this.roundCircleM = 1e3;
    this.roundCircleColorObj = "A";
  }
  mounted() {
  }
  setMinWidth(val) {
    this.minWidth = val.srcElement.clientWidth;
  }
  roundCircle(point, m, colorObj, fn) {
    let self;
    self = this;
    self.pointRoundBoxFlag = true;
    setTimeout(() => {
      self.roundCircleFn = fn;
      self.roundCircleM = m;
      self.roundCircleP = point;
      self.roundCircleColorObj = colorObj;
      if (self.roundCircleM >= 5e3) {
        WvMessage({
          message: "\u5F53\u524D\u8303\u56F4\u5DF2\u8FBE\u4E0A\u96505000m!",
          type: "error",
          duration: "1000"
        });
        return;
      }
      if (self.roundCircleM <= 100) {
        WvMessage({
          message: "\u5F53\u524D\u8303\u56F4\u5DF2\u8FBE\u4E0B\u9650100m!",
          type: "error",
          duration: "1000"
        });
        return;
      }
      let aa = arcgisObj.roundCircle(
        self.mapprams.mapId,
        point,
        "fixedBillboardLayer",
        m,
        colorObj,
        self.roundCircleAdd,
        self.roundCircleSub,
        self.roundCircleFn
      );
      self.roundCircleExtent = aa;
      console.log(aa);
    }, 10);
  }
  roundCircleAdd() {
    let self;
    self = this;
    if (self.roundCircleM >= 5e3) {
      WvMessage({
        message: "\u5F53\u524D\u8303\u56F4\u5DF2\u8FBE\u4E0A\u96505000m!",
        type: "error",
        duration: "1000"
      });
      return;
    }
    self.roundCircleM += 100;
    let aa = arcgisObj.roundCircle(
      self.mapprams.mapId,
      self.roundCircleP,
      "fixedBillboardLayer",
      self.roundCircleM,
      self.roundCircleColorObj,
      self.roundCircleAdd,
      self.roundCircleSub,
      self.roundCircleFn
    );
    self.roundCircleExtent = aa;
    console.log(aa);
  }
  roundCircleSub() {
    let self;
    self = this;
    if (self.roundCircleM <= 100) {
      WvMessage({
        message: "\u5F53\u524D\u8303\u56F4\u5DF2\u8FBE\u4E0B\u9650100m!",
        type: "error",
        duration: "1000"
      });
      return;
    }
    self.roundCircleM -= 100;
    let aa = arcgisObj.roundCircle(
      self.mapprams.mapId,
      self.roundCircleP,
      "fixedBillboardLayer",
      self.roundCircleM,
      self.roundCircleColorObj,
      self.roundCircleAdd,
      self.roundCircleSub,
      self.roundCircleFn
    );
    self.roundCircleExtent = aa;
    console.log(aa);
  }
  addFootholdPonits(data, imgArr, titleImg) {
    let self;
    self = this;
    let b = data.filter((item) => {
      return item.x && item.y;
    });
    console.log(b.length);
    if (b.length < 2) {
      return;
    }
    arcgisObj.addFootholdPonits(self.mapprams.mapId, "fixedBillboardLayer", b, imgArr, titleImg);
  }
  getCenterAndZoom() {
    let self;
    self = this;
    let level = Math.round(
      window[self.mapprams.mapId + "mapObj"][self.mapprams.mapId + "view"].zoom
    );
    let center = [
      window[self.mapprams.mapId + "mapObj"][self.mapprams.mapId + "view"].center.longitude,
      window[self.mapprams.mapId + "mapObj"][self.mapprams.mapId + "view"].center.latitude
    ];
    return { level, center };
  }
  getPolygonCenter(pointArr) {
    let centerObj = arcgisObj.getPolygonCenter(pointArr);
    return centerObj;
  }
  getExtentNum(fn) {
    let self;
    self = this;
    arcgisObj.getExtentNum(self.mapprams.mapId, fn);
  }
  layerVisible(name, flag) {
    let self;
    self = this;
    arcgisObj.layerVisible(self.mapprams.mapId, name, flag);
  }
  layerClear(name) {
    let self;
    self = this;
    arcgisObj.layerClear(self.mapprams.mapId, name);
  }
  getPointOn(mapLyerName, pointIcon, Fn, Fn2) {
    let self;
    self = this;
    arcgisObj.getPointOn(self.mapprams.mapId, mapLyerName, pointIcon, Fn, Fn2);
  }
  getPointOff() {
    arcgisObj.getPointOff();
  }
  getMoveOn(mapLyerName, text) {
    let self;
    self = this;
    arcgisObj.getMoveOn(self.mapprams.mapId, mapLyerName, text);
  }
  eventPointMark(mapLyerName, pointIcon, point, html, dragFn) {
    let self;
    self = this;
    arcgisObj.eventPointMark(self.mapprams.mapId, mapLyerName, pointIcon, point, html, dragFn);
  }
  getMoveOff() {
    arcgisObj.getMoveOff();
  }
  delMaplayer(name) {
    let self;
    self = this;
    arcgisObj.delMaplayer(self.mapprams.mapId, name);
  }
  destroyMaplayer(name) {
    let self;
    self = this;
    arcgisObj.destroyMaplayer(self.mapprams.mapId, name);
  }
  getMapLayerName() {
    let self;
    self = this;
    let arr = [];
    let map = window[self.mapprams.mapId + "mapObj"][self.mapprams.mapId + "map"];
    map.allLayers.find(function(layer) {
      arr.push(layer.id);
    });
    return arr;
  }
  setLayerIndex(layerName, index) {
    let self;
    self = this;
    let graphicsLayer = window[self.mapprams.mapId + "mapObj"][self.mapprams.mapId + "map"].findLayerById(layerName);
    if (graphicsLayer) {
      window[self.mapprams.mapId + "mapObj"][self.mapprams.mapId + "map"].reorder(
        graphicsLayer,
        index
      );
    } else {
      WvMessage({
        message: "\u8BF7\u8F93\u5165\u6B63\u786E\u56FE\u5C42\u540D\u79F0!",
        type: "error",
        duration: "1000"
      });
    }
  }
  getMap() {
    let self;
    self = this;
    let map = window[self.mapprams.mapId + "mapObj"][self.mapprams.mapId + "map"];
    return map;
  }
  getMapView() {
    let self;
    self = this;
    let map = window[self.mapprams.mapId + "mapObj"][self.mapprams.mapId + "view"];
    return map;
  }
  singleP(imgObj, point, html1) {
    let self;
    self = this;
    if (html1) {
      if (html1 == "1") {
        let html = `
          <div class="InfoMessage">
              <p class="color1">${point.poiName ? point.poiName : "-"}</p>
              <p>\u901A\u884C\u65F6\u95F4: <span class="color2">${point.time ? point.time : "-"}</span></p>
          </div>`;
        setTimeout(() => {
          arcgisObj.pointIconCenter(
            imgObj,
            point,
            "fixedBillboardLayer",
            self.mapprams.mapId,
            html
          );
        }, 500);
      } else {
        setTimeout(() => {
          arcgisObj.pointIconCenter(
            imgObj,
            point,
            "fixedBillboardLayer",
            self.mapprams.mapId,
            html1
          );
        }, 500);
      }
    } else {
      setTimeout(() => {
        arcgisObj.pointIconCenter(imgObj, point, "fixedBillboardLayer", self.mapprams.mapId);
      }, 500);
    }
  }
  singlePS(imgObj, point) {
    let self;
    self = this;
    let a = 1;
    let b = setInterval(() => {
      arcgisObj.layerClear(self.mapprams.mapId, "fixedBillboardLayerPC");
      if (a == 5) {
        clearInterval(b);
        return;
      }
      arcgisObj.pointIconCenterS(imgObj, point, "fixedBillboardLayerPC", self.mapprams.mapId);
      a += 1;
    }, 500);
  }
  pPopup(point, html, title, flag) {
    let self;
    self = this;
    setTimeout(() => {
      arcgisObj.pPopup(point, self.mapprams.mapId, html, title, flag);
    }, 500);
  }
  centerP(centerObj) {
    let self;
    self = this;
    setTimeout(() => {
      arcgisObj.centerP(self.mapprams.mapId, centerObj);
    }, 500);
  }
  goCenter() {
    let self;
    self = this;
    arcgisObj.goCenter(self.mapprams.mapId);
  }
  addMapLevel() {
    let self;
    self = this;
    let level = Math.round(
      window[self.mapprams.mapId + "mapObj"][self.mapprams.mapId + "view"].zoom
    );
    if (level + 1 > window[self.mapprams.mapId + "mapObj"][self.mapprams.mapId + "mapconfig"].maxlevel) {
      WvMessage({
        message: "\u5DF2\u8FBE\u5230\u6700\u5927\u5C42\u7EA7!",
        type: "error",
        duration: "1000"
      });
      return;
    } else {
      arcgisObj.addMapLevel(self.mapprams.mapId);
    }
  }
  subMapLevel() {
    let self;
    self = this;
    let level = Math.round(
      window[self.mapprams.mapId + "mapObj"][self.mapprams.mapId + "view"].zoom
    );
    if (level - 1 < window[self.mapprams.mapId + "mapObj"][self.mapprams.mapId + "mapconfig"].minlevel) {
      WvMessage({
        message: "\u5DF2\u8FBE\u5230\u6700\u5C0F\u5C42\u7EA7!",
        type: "error",
        duration: "1000"
      });
      return;
    } else {
      arcgisObj.subMapLevel(self.mapprams.mapId);
    }
  }
  mapTcheck(flag) {
    if (flag == 1) {
      WvMessage({
        message: "\u76EE\u524D\u53EA\u652F\u6301arcgis!",
        type: "error",
        duration: "1000"
      });
    }
  }
  overview() {
    let self;
    self = this;
    if (self.overviewFlag) {
      $("#" + self.mapprams.overmapDom).empty();
      self.overviewFlag = false;
    } else {
      self.overviewFlag = true;
      arcgisObj.initOverViewMap(self.mapprams.overmapDom, self.mapprams.mapId);
      if (self.mapTypeFlag) {
        self.mapTypeFlag = false;
      }
    }
  }
  markPointNoClear(data, mapLyerName, imgObj, markPointFn, fontColor) {
    let self;
    self = this;
    arcgisObj.markPointNoClear(
      data,
      self.mapprams.mapId,
      mapLyerName,
      imgObj,
      markPointFn,
      fontColor
    );
  }
  markPoint(data, mapLyerName, imgObj, markPointFn, fontColor) {
    let self;
    self = this;
    arcgisObj.markPoint(data, self.mapprams.mapId, mapLyerName, imgObj, markPointFn, fontColor);
  }
  markVideoPoint(data, mapLyerName, imgObj, markPointFn, fontColor) {
    let self;
    self = this;
    arcgisObj.markVideoPoint(
      data,
      self.mapprams.mapId,
      mapLyerName,
      imgObj,
      markPointFn,
      fontColor
    );
  }
  markPoint1(data, mapLyerName, imgObj, markPointFn, fontColor) {
    let self;
    self = this;
    arcgisObj.markPoint1(data, self.mapprams.mapId, mapLyerName, imgObj, markPointFn, fontColor);
  }
  extentViewPoints(data, mapLyerName, imgObj, markPointFn, fontColor) {
    let self;
    self = this;
    arcgisObj.extentViewPoints(
      data,
      self.mapprams.mapId,
      mapLyerName,
      imgObj,
      markPointFn,
      fontColor
    );
  }
  addAlarmPoints(data, mapLyerName, imgObj, markPointFn, fontColor) {
    let self;
    self = this;
    let b = data.filter((item) => {
      return item.x && item.y;
    });
    arcgisObj.addAlarmPoints(b, self.mapprams.mapId, mapLyerName, imgObj, markPointFn, fontColor);
  }
  addTextPoints(data, mapLyerName, imgObj, markPointFn, fontColor) {
    let self;
    self = this;
    let b = data.filter((item) => {
      return item.x && item.y;
    });
    arcgisObj.addTextPoints(b, self.mapprams.mapId, mapLyerName, imgObj, markPointFn, fontColor);
  }
  addTextPoint(data, mapLyerName, imgObj, markPointFn, fontColor) {
    let self;
    self = this;
    arcgisObj.addTextPoint(data, self.mapprams.mapId, mapLyerName, imgObj, markPointFn, fontColor);
  }
  markPoint2(data, mapLyerName, markPointFn) {
    let self;
    self = this;
    arcgisObj.markPoint2(data, self.mapprams.mapId, mapLyerName, markPointFn);
  }
  mapTypeFn() {
    let self;
    self = this;
    self.mapTypeFlag = !self.mapTypeFlag;
    if (self.overviewFlag) {
      $("#" + self.mapprams.overmapDom).empty();
      self.overviewFlag = false;
    }
  }
  createMap(callback, config, getExtentData, popCloseFn) {
    let self;
    self = this;
    GisBase.initMap(
      self.mapprams.mapDom,
      self.mapprams.mapType,
      self.mapprams.mapId,
      callback,
      config,
      getExtentData,
      popCloseFn
    );
  }
  setConfig(config) {
    if (config)
      arcgisObj.setConfig(config);
  }
  initSketch(position, fn1, colorObj) {
    let fn = "2";
    let self;
    self = this;
    if (fn) {
      fn = fn1;
    }
    arcgisObj.initSketch("DrawCircle", self.mapprams.mapId, position, fn, colorObj);
  }
  initSketch1(position, fn1, colorObj) {
    let fn = "2";
    let self;
    self = this;
    if (fn) {
      fn = fn1;
    }
    arcgisObj.initSketch1("DrawCircle", self.mapprams.mapId, position, fn, colorObj);
  }
  initSketchFn(fnName, fn1, colorObj) {
    let fn = "2";
    let self;
    self = this;
    if (fn) {
      fn = fn1;
    }
    arcgisObj.initSketchfn("DrawCircle", self.mapprams.mapId, fnName, fn, colorObj);
  }
  initSketchFn1(fnName, fn1, colorObj) {
    let fn = "2";
    let self;
    self = this;
    if (fn) {
      fn = fn1;
    }
    arcgisObj.initSketchfn1("DrawCircle", self.mapprams.mapId, fnName, fn, colorObj);
  }
  initSketchFn2(fn1, colorObj) {
    let fn = "2";
    let self;
    self = this;
    if (fn) {
      fn = fn1;
    }
    arcgisObj.initSketchfn2("TDrawCircle", self.mapprams.mapId, "polyline", fn, colorObj);
  }
  initMapbtnBox() {
    this.mapbtnBoxFlag = true;
  }
  destroyMap() {
    let self;
    self = this;
    $("#" + self.mapprams.overmapDom).empty();
    $("#" + self.mapprams.mapDom).empty();
    self.mapTypeFlag = false;
    self.overviewFlag = false;
    self.mapbtnBoxFlag = false;
    self.moveControlFlag = false;
    self.pointRoundBoxFlag = false;
    window[self.mapprams.mapId + "mapObj"] = {};
  }
  roundHeatMap(layerName, data) {
    let self;
    self = this;
    arcgisObj.roundHeatMap(data, self.mapprams.mapId, layerName);
  }
  htmlBoxScreen(data, html, title) {
    let self;
    self = this;
    arcgisObj.htmlBoxScreen(data, self.mapprams.mapId, html, title);
  }
  htmlBoxScreen1(data, html, title) {
    let self;
    self = this;
    arcgisObj.htmlBoxScreen1(data, self.mapprams.mapId, html, title);
  }
  addTrackLineCheckP(obj, color) {
    if (!obj.position[0] || !obj.position[1]) {
      return;
    }
    arcgisObj.addTrackLineCheckP(this.mapprams.mapId, obj.position, obj.index, obj.text, color);
  }
  delTrackLineCheckP() {
    let pointLayer1 = window[this.mapprams.mapId + "mapObj"][this.mapprams.mapId + "map"].findLayerById(
      "MoveLayerText1"
    );
    pointLayer1.removeAll();
  }
  clearPop() {
    let self;
    self = this;
    window[self.mapprams.mapId + "mapObj"][self.mapprams.mapId + "view"].popup.close();
  }
  sectorGeo(point, km) {
    let self;
    self = this;
    let cameraDirArr = {
      "1": 0,
      "5": 45,
      "2": 90,
      "6": 135,
      "3": 180,
      "7": 225,
      "4": 270,
      "8": 315
    };
    let p1Arr = arcgisObj.sectorGeo(
      self.mapprams.mapId,
      point,
      cameraDirArr["1"],
      "fixedBillboardLayer",
      km
    );
    let p2Arr = arcgisObj.sectorGeo(
      self.mapprams.mapId,
      point,
      cameraDirArr["5"],
      "fixedBillboardLayer",
      km
    );
    let p3Arr = arcgisObj.sectorGeo(
      self.mapprams.mapId,
      point,
      cameraDirArr["2"],
      "fixedBillboardLayer",
      km
    );
    let p4Arr = arcgisObj.sectorGeo(
      self.mapprams.mapId,
      point,
      cameraDirArr["6"],
      "fixedBillboardLayer",
      km
    );
    let p5Arr = arcgisObj.sectorGeo(
      self.mapprams.mapId,
      point,
      cameraDirArr["3"],
      "fixedBillboardLayer",
      km
    );
    let p6Arr = arcgisObj.sectorGeo(
      self.mapprams.mapId,
      point,
      cameraDirArr["7"],
      "fixedBillboardLayer",
      km
    );
    let p7Arr = arcgisObj.sectorGeo(
      self.mapprams.mapId,
      point,
      cameraDirArr["4"],
      "fixedBillboardLayer",
      km
    );
    let p8Arr = arcgisObj.sectorGeo(
      self.mapprams.mapId,
      point,
      cameraDirArr["8"],
      "fixedBillboardLayer",
      km
    );
    let objArr = [
      {
        geometry: p1Arr,
        key: "up"
      },
      {
        geometry: p2Arr,
        key: "rightUp"
      },
      {
        geometry: p3Arr,
        key: "right"
      },
      {
        geometry: p4Arr,
        key: "rightDown"
      },
      {
        geometry: p5Arr,
        key: "down"
      },
      {
        geometry: p6Arr,
        key: "leftDown"
      },
      {
        geometry: p7Arr,
        key: "left"
      },
      {
        geometry: p8Arr,
        key: "leftUp"
      }
    ];
    return objArr;
  }
  delSingleP(layerName, data) {
    let self;
    self = this;
    arcgisObj.delSingleP(self.mapprams.mapId, layerName, data);
  }
  addSingleP(data, mapLyerName, imgObj, markPointFn, fontColor) {
    let self;
    self = this;
    arcgisObj.addSingleP(data, self.mapprams.mapId, mapLyerName, imgObj, markPointFn, fontColor);
  }
  addTrackLine(lineArr, lineColor, textFlag) {
    let self;
    self = this;
    arcgisObj.addTrackLine(
      self.mapprams.mapId,
      "fixedBillboardLayer",
      lineArr,
      lineColor,
      textFlag
    );
  }
  addTrackLine1(lineArr, textFlag, lineArrIds, lineArrIdFn) {
    let self;
    self = this;
    arcgisObj.addTrackLine1(
      self.mapprams.mapId,
      "fixedBillboardLayer",
      lineArr,
      textFlag,
      lineArrIds,
      lineArrIdFn
    );
  }
  addOnlyTrackLine(lineArr, lineArrIds, lineArrIdFn) {
    let self;
    self = this;
    arcgisObj.addOnlyTrackLine(
      self.mapprams.mapId,
      "fixedBillboardLayer",
      lineArr,
      lineArrIds,
      lineArrIdFn
    );
  }
  addTrackLine3(lineArr, textFlag, lineArrIds, lineArrIdFn) {
    let self;
    self = this;
    arcgisObj.addTrackLine3(
      self.mapprams.mapId,
      "fixedBillboardLayer",
      lineArr,
      textFlag,
      lineArrIds,
      lineArrIdFn
    );
  }
  addTrackLine4(lineArr, data, lineArrIdFn) {
    let self;
    self = this;
    let b = lineArr.filter((item, index) => {
      return item[0] && item[1];
    });
    arcgisObj.addTrackLine4(self.mapprams.mapId, "fixedBillboardLayer", b, data, lineArrIdFn);
  }
  addTrackLine2(lineArr, textFlag, lineArrIds, lineArrIdFn) {
    let self;
    self = this;
    arcgisObj.addTrackLine2(
      self.mapprams.mapId,
      "fixedBillboardLayer",
      lineArr,
      textFlag,
      lineArrIds,
      lineArrIdFn
    );
  }
  addTrackLine2CloseTime() {
    arcgisObj.addTrackLineCloseTime();
  }
  arctiveCloseFlag() {
    arcgisObj.arctiveCloseFlag();
  }
  delTrackLine1(lineName) {
    let self;
    self = this;
    arcgisObj.delTrackLine1(self.mapprams.mapId, "fixedBillboardLayer", lineName);
  }
  addPolygon(lineArr, lineColor, layerName, fnObj) {
    let self;
    self = this;
    arcgisObj.addPolygon(self.mapprams.mapId, layerName, lineArr, lineColor, fnObj);
  }
  addPolygonP(data, position, fn1, colorObj) {
    let self;
    self = this;
    arcgisObj.addPolygonP(data, "DrawCircle", self.mapprams.mapId, position, fn1, colorObj);
  }
  addBufferZone(lineArr, lineColor, layerName, meters) {
    let self;
    self = this;
    arcgisObj.addBufferZone(self.mapprams.mapId, layerName, lineArr, lineColor, meters);
  }
  addBufferLine(lineArr, lineColor, layerName, meters, fn) {
    let self;
    self = this;
    arcgisObj.addBufferLine(self.mapprams.mapId, layerName, lineArr, lineColor, meters, fn);
  }
  sketchView(dir) {
    let self;
    self = this;
    let map = window[self.mapprams.mapId + "mapObj"][self.mapprams.mapId + "view"];
    map.ui.empty(dir);
  }
  roundViewMove(lineArr, imgObj, lineArrIds, lineArrIdFn, color, linFlag, oldArr) {
    let self;
    self = this;
    let b = lineArr.filter((item, index) => {
      if (!item[0] || !item[1]) {
        lineArrIds.splice(index, 1);
      }
      return item[0] && item[1];
    });
    console.log(b);
    setTimeout(() => {
      arcgisObj.roundViewMove(
        self.mapprams.mapId,
        "MoveLayer",
        lineArr,
        imgObj,
        "1",
        lineArrIds,
        color,
        linFlag,
        lineArrIdFn,
        oldArr
      );
    }, 10);
  }
  clearRoundViewMove() {
    let self;
    self = this;
    arcgisObj.clearRoundViewMove(self.mapprams.mapId, "MoveLayer");
  }
  iconMove(lineArr, imgObj, lineArrIds, lineArrIdFn, color, linFlag) {
    let self;
    self = this;
    self.moveControlFlag = true;
    let b = lineArr.filter((item, index) => {
      if (!item[0] || !item[1]) {
        lineArrIds.splice(index, 1);
      }
      return item[0] && item[1];
    });
    console.log(b);
    setTimeout(() => {
      self.moveControlPlayFlag = "1";
      self.value = "1";
      self.checked1 = true;
      self.lineArr = b;
      self.imgObj = imgObj;
      self.lineArrIds = lineArrIds;
      self.lineArrIdFn = lineArrIdFn;
      self.color = color;
      self.linFlag = linFlag;
      if (self.checked1) {
        arcgisObj.iconMove(
          self.mapprams.mapId,
          "MoveLayer",
          self.lineArr,
          imgObj,
          self.value,
          self.lineArrIds,
          self.color,
          self.linFlag,
          self.lineArrIdFn
        );
      } else {
        arcgisObj.iconMove(
          self.mapprams.mapId,
          "MoveLayer",
          self.lineArr,
          imgObj,
          self.value,
          self.lineArrIds,
          self.color,
          self.linFlag
        );
      }
    }, 10);
  }
  iconMove1() {
    let self;
    self = this;
    this.moveControlPlayFlag = "1";
    $("#Bback").trigger("click");
    if (self.checked1) {
      arcgisObj.iconMove(
        self.mapprams.mapId,
        "MoveLayer",
        self.lineArr,
        self.imgObj,
        self.value,
        self.lineArrIds,
        self.color,
        self.linFlag,
        self.lineArrIdFn
      );
    } else {
      arcgisObj.iconMove(
        self.mapprams.mapId,
        "MoveLayer",
        self.lineArr,
        self.imgObj,
        self.value,
        self.lineArrIds,
        self.color,
        self.linFlag
      );
    }
  }
  iconMoveDel() {
    let self;
    self = this;
    $("#Bback").trigger("click");
    this.moveControlPlayFlag = "1";
    this.value = "1";
    this.moveControlFlag = false;
    this.checked1 = true;
    self.lineArr = [];
    self.imgObj = {};
    self.lineArrIds = [];
    self.color = [];
    self.lineArrIdFn = {};
    let moveLayer = window[self.mapprams.mapId + "mapObj"][self.mapprams.mapId + "map"].findLayerById(
      "MoveLayer"
    );
    let lineLayed = window[self.mapprams.mapId + "mapObj"][self.mapprams.mapId + "map"].findLayerById("MoveLayer1");
    lineLayed.removeAll();
    moveLayer.removeAll();
  }
  iconMovePause(flag) {
    if (flag == 1) {
      $("#Bpause").trigger("click");
    } else if (flag == 2) {
      $("#Bback").trigger("click");
    }
  }
};
__decorateClass([
  Prop({ type: String, default: "" })
], Gis$1.prototype, "whitePHead", 2);
__decorateClass([
  Prop({
    default: {
      mapId: "contantMap",
      mapDom: "mapContainer",
      overmapDom: "overviewDiv",
      mapType: "ARCGIS"
    }
  })
], Gis$1.prototype, "mapprams", 2);
Gis$1 = __decorateClass([
  Options({
    components: {
      WvOption,
      WvCheckbox,
      WvSelect
    }
  })
], Gis$1);

const _hoisted_1 = { class: "gisMap" };
const _hoisted_2 = ["id"];
const _hoisted_3 = ["id"];
const _hoisted_4 = /* @__PURE__ */ createElementVNode("div", { class: "hoverBgStyle" }, null, -1);
const _hoisted_5 = /* @__PURE__ */ createElementVNode("div", { class: "hoverVideoBgStyle" }, null, -1);
const _hoisted_6 = /* @__PURE__ */ createElementVNode("div", { class: "MapmessageBox" }, null, -1);
const _hoisted_7 = {
  key: 0,
  class: "mapbtnBox"
};
const _hoisted_8 = /* @__PURE__ */ createElementVNode("div", { class: "img img1" }, null, -1);
const _hoisted_9 = [
  _hoisted_8
];
const _hoisted_10 = /* @__PURE__ */ createElementVNode("div", { class: "img img2" }, null, -1);
const _hoisted_11 = [
  _hoisted_10
];
const _hoisted_12 = /* @__PURE__ */ createElementVNode("div", { class: "img img3" }, null, -1);
const _hoisted_13 = [
  _hoisted_12
];
const _hoisted_14 = /* @__PURE__ */ createElementVNode("div", { class: "img img5" }, null, -1);
const _hoisted_15 = [
  _hoisted_14
];
const _hoisted_16 = {
  key: 1,
  class: "moveControlBox"
};
const _hoisted_17 = { class: "moveControl" };
const _hoisted_18 = { class: "moveControlSpeed marginL10" };
const _hoisted_19 = /* @__PURE__ */ createElementVNode("span", null, "\u64AD\u653E\u901F\u5EA6", -1);
const _hoisted_20 = { class: "selBox" };
const _hoisted_21 = { class: "moveControlSnap marginL10" };
const _hoisted_23 = {
  key: 2,
  class: "pointRoundBox"
};
const _hoisted_24 = /* @__PURE__ */ createElementVNode("div", {
  class: "pointRoundAdd",
  title: "\u589E\u52A0"
}, "+", -1);
const _hoisted_25 = /* @__PURE__ */ createElementVNode("div", {
  class: "pointRoundSub",
  title: "\u51CF\u5C0F"
}, "-", -1);
const _hoisted_26 = /* @__PURE__ */ createElementVNode("div", {
  class: "pointRoundY",
  title: "\u786E\u5B9A"
}, "\u221A", -1);
const _hoisted_27 = /* @__PURE__ */ createElementVNode("div", {
  class: "pointRoundN",
  title: "\u53D6\u6D88"
}, "x", -1);
const _hoisted_28 = [
  _hoisted_24,
  _hoisted_25,
  _hoisted_26,
  _hoisted_27
];
function render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_wv_option = resolveComponent("wv-option");
  const _component_wv_select = resolveComponent("wv-select");
  const _component_wv_checkbox = resolveComponent("wv-checkbox");
  return openBlock(), createElementBlock("div", _hoisted_1, [
    createElementVNode("div", {
      id: _ctx.mapprams.mapDom,
      class: normalizeClass([_ctx.whitePHead, "full_screen mapContainer"])
    }, null, 10, _hoisted_2),
    withDirectives(createElementVNode("div", {
      id: _ctx.mapprams.overmapDom,
      class: "overviewDiv"
    }, null, 8, _hoisted_3), [
      [vShow, _ctx.overviewFlag]
    ]),
    createCommentVNode(` <div class="mapTypeDiv" v-show="mapTypeFlag">\r
      <div\r
        @click="mapTcheck(1)"\r
        class="mapTypeDivItem"\r
        title="\u536B\u661F\u5730\u56FE"\r
        :class="{ mapTypeDivItemC: mapprams.mapType == 'WMTS' }"\r
      >\r
        <div class="mapTypeDivItemImg mapTypeDivItemImg1"></div>\r
      </div>\r
      <div\r
        @click="mapTcheck(2)"\r
        class="mapTypeDivItem"\r
        title="\u5E73\u9762\u5730\u56FE"\r
        :class="{ mapTypeDivItemC: mapprams.mapType == 'ARCGIS' }"\r
      >\r
        <div class="mapTypeDivItemImg mapTypeDivItemImg2"></div>\r
      </div>\r
    </div> `),
    _hoisted_4,
    _hoisted_5,
    _hoisted_6,
    _ctx.mapbtnBoxFlag ? (openBlock(), createElementBlock("div", _hoisted_7, [
      createElementVNode("div", {
        class: "setCenter mapbtn",
        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.goCenter && _ctx.goCenter(...args)),
        title: "\u56DE\u5230\u4E2D\u5FC3\u70B9"
      }, _hoisted_9),
      createElementVNode("div", {
        class: "addMapLevel mapbtn",
        onClick: _cache[1] || (_cache[1] = (...args) => _ctx.addMapLevel && _ctx.addMapLevel(...args)),
        title: "\u653E\u5927\u4E00\u4E2A\u56FE\u5C42"
      }, _hoisted_11),
      createElementVNode("div", {
        class: "subMapLevel mapbtn",
        onClick: _cache[2] || (_cache[2] = (...args) => _ctx.subMapLevel && _ctx.subMapLevel(...args)),
        title: "\u7F29\u5C0F\u4E00\u4E2A\u56FE\u5C42"
      }, _hoisted_13),
      createCommentVNode(' <div class="mapType mapbtn" @click="mapTypeFn" title="\u9009\u62E9\u5730\u56FE\u7C7B\u578B">\r\n        <div class="img img4"></div>\r\n      </div> '),
      createElementVNode("div", {
        class: "overview mapbtn",
        onClick: _cache[3] || (_cache[3] = (...args) => _ctx.overview && _ctx.overview(...args)),
        title: "\u5F00\u542F\u9E70\u773C\u5730\u56FE"
      }, _hoisted_15)
    ])) : createCommentVNode("v-if", true),
    _ctx.moveControlFlag ? (openBlock(), createElementBlock("div", _hoisted_16, [
      createElementVNode("div", _hoisted_17, [
        withDirectives(createElementVNode("div", {
          class: "moveControlPlay moveControlBtn",
          id: "Bstart",
          title: "\u64AD\u653E",
          onClick: _cache[4] || (_cache[4] = ($event) => _ctx.moveControlPlayFlag = "2")
        }, null, 512), [
          [vShow, _ctx.moveControlPlayFlag == "1"]
        ]),
        withDirectives(createElementVNode("div", {
          class: "moveControlPlay moveControlBtn moveControlPlay1",
          id: "Bpause",
          title: "\u6682\u505C",
          onClick: _cache[5] || (_cache[5] = ($event) => _ctx.moveControlPlayFlag = "3")
        }, null, 512), [
          [vShow, _ctx.moveControlPlayFlag == "2"]
        ]),
        withDirectives(createElementVNode("div", {
          class: "moveControlPlay moveControlBtn",
          id: "Bcontinue",
          title: "\u64AD\u653E",
          onClick: _cache[6] || (_cache[6] = ($event) => _ctx.moveControlPlayFlag = "2")
        }, null, 512), [
          [vShow, _ctx.moveControlPlayFlag == "3"]
        ]),
        createElementVNode("div", {
          class: "moveControlReset moveControlBtn",
          id: "Bback",
          title: "\u91CD\u7F6E",
          onClick: _cache[7] || (_cache[7] = ($event) => _ctx.moveControlPlayFlag = "1")
        }),
        createElementVNode("div", _hoisted_18, [
          _hoisted_19,
          createElementVNode("span", _hoisted_20, [
            createVNode(_component_wv_select, {
              "fit-input-width": "",
              style: { "width": "100%" },
              onFocus: _ctx.setMinWidth,
              size: "small",
              modelValue: _ctx.value,
              "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => _ctx.value = $event),
              placeholder: "\u8BF7\u9009\u62E9",
              onChange: _ctx.iconMove1
            }, {
              default: withCtx(() => [
                (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (item) => {
                  return openBlock(), createBlock(_component_wv_option, {
                    style: normalizeStyle({
                      "min-width": _ctx.minWidth - 14 + "px",
                      width: _ctx.minWidth - 14 + "px"
                    }),
                    key: item.value,
                    label: item.label,
                    value: item.value
                  }, null, 8, ["style", "label", "value"]);
                }), 128))
              ]),
              _: 1
            }, 8, ["onFocus", "modelValue", "onChange"])
          ])
        ]),
        createElementVNode("div", _hoisted_21, [
          createVNode(_component_wv_checkbox, {
            onChange: _ctx.iconMove1,
            modelValue: _ctx.checked1,
            "onUpdate:modelValue": _cache[9] || (_cache[9] = ($event) => _ctx.checked1 = $event),
            label: "\u6293\u62CD\u56FE\u7247"
          }, null, 8, ["onChange", "modelValue"])
        ]),
        createCommentVNode("v-if", true)
      ])
    ])) : createCommentVNode("v-if", true),
    _ctx.pointRoundBoxFlag ? (openBlock(), createElementBlock("div", _hoisted_23, _hoisted_28)) : createCommentVNode("v-if", true)
  ]);
}

Gis$1.render = render;
Gis$1.__file = "src/components/Gis/src/Gis.vue";
var Gis = Gis$1;

export { Gis };
