wv-business-components-demo/index.d.ts

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 || "#51464