任务新增导出

zhongrj

2023-06-27 d74b495736f0c04522ec54274b70fed0ded2878d

 public/map/widgets/detailMap/DetailMap.js

New file
@@ -0,0 +1,357 @@
/*
 * @Description:
 * @Version: 1.0
 * @Author: yangsx
 * @Date: 2019-12-09 19:01:40
 * @LastEditors: yangsx
 * @LastEditTime: 2019-12-14 14:44:57
 */
define([
  "dojo",
  "dojo/_base/declare",
  "dojo/_base/lang",
  "base/BaseWidget",
  "dojo/text!widgets/detailMap/template.html",
  "base/AppEvent",
  "base/ConfigData",
  "widgets/detailMap/config",
  "dojo/dom",
  "dojo/dom-construct",
  "dojo/dom-attr",
  "dojo/dom-style",
  "dojo/on",
  "esri/layers/ArcGISDynamicMapServiceLayer",
  "esri/layers/ArcGISTiledMapServiceLayer",
  "esri/layers/FeatureLayer",
  "controls/tab/TabControl",
  "esri/dijit/SymbolStyler",
  "esri/styles/basic",
  "dojo/_base/array",
  "esri/InfoTemplate",
  "esri/tasks/query",
  "esri/tasks/QueryTask",
  "esri/Color",
  "esri/toolbars/edit",
  "esri/graphic",
  "esri/geometry/Point",
  "esri/geometry/Polyline",
  "esri/geometry/Polygon",
  "esri/geometry/Extent",
  "esri/tasks/FeatureSet",
  "esri/renderers/HeatmapRenderer",
  "esri/symbols/SimpleLineSymbol",
  "esri/symbols/SimpleFillSymbol",
  "esri/symbols/PictureMarkerSymbol",
  "esri/symbols/SimpleMarkerSymbol",
  "esri/SpatialReference",
  "esri/tasks/GeometryService",
  "esri/tasks/ProjectParameters",
  "esri/layers/GraphicsLayer",
  "esri/layers/LabelLayer",
  "esri/symbols/TextSymbol",
  "esri/renderers/SimpleRenderer",
  "esri/renderers/ClassBreaksRenderer",
  "esri/tasks/Geoprocessor",
  "esri/tasks/DataFile",
  "esri/geometry/webMercatorUtils",
  "esri/symbols/Font",
  "esri/geometry/ScreenPoint",
  "esri/layers/ImageParameters",
  "esri/geometry/geometryEngine",
  "esri/dijit/PopupTemplate",
  "widgets/detailMap/FlareClusterLayer_v3",
  "dojo/domReady!"
], function (
  dojo,
  declare,
  lang,
  BaseWidget,
  template,
  AppEvent,
  ConfigData,
  config,
  dom,
  domConstruct,
  domAttr,
  domStyle,
  on,
  ArcGISDynamicMapServiceLayer,
  ArcGISTiledMapServiceLayer,
  FeatureLayer,
  TabControl,
  SymbolStyler,
  basic,
  arrayUtils,
  InfoTemplate,
  Query,
  QueryTask,
  Color,
  Edit,
  Graphic,
  Point,
  Polyline,
  Polygon,
  Extent,
  FeatureSet,
  HeatmapRenderer,
  SimpleLineSymbol,
  SimpleFillSymbol,
  PictureMarkerSymbol,
  SimpleMarkerSymbol,
  SpatialReference,
  GeometryService,
  ProjectParameters,
  GraphicsLayer,
  LabelLayer,
  TextSymbol,
  SimpleRenderer,
  ClassBreaksRenderer,
  Geoprocessor,
  DataFile,
  webMercatorUtils,
  Font,
  ScreenPoint,
  ImageParameters,
  geometryEngine,
  PopupTemplate,
  FlareClusterLayer
) {
  var Widget = declare([BaseWidget], {
    widgetName: "DetailMap",
    label: "卡片模式详情",
    templateString: template,
    _map: null,
    objThis: null,
    _siteLayer: new GraphicsLayer(),
    layuiLayer: null,
    layuiLadate: null,
    tabIndex: 0,

    // 保留添加实体图层的变量
    addEntitys: null,
    entitysData: [],

    // 巡逻区域或者巡逻路线的描述
    routeOrRegionDescribe: null,

    // 用来记录巡逻区域或者巡逻路线的下标的
    patrolIndex: 0,

    // 拖拽
    isDown: false,
    x: 0,
    y: 0,
    offset: null,
    moveThis: null,
    // 电子围栏需要新增的Id
    newElectronicFenceId: null,

    // 新增路线时，派发人员，人员名称，以及人员id
    peopleRealName: null,
    pepleRealId: null,

    //存放聚合实体
    clusterLayer: null,
    constructor: function (options, srcRefNode) {
      this._map = options.map;
      objThis = this;

      this.addEntitys = new GraphicsLayer({
        id: 'addEntitys'
      });

      // 添加点面线的图层
      this.addPolygonEntitys = new GraphicsLayer({
        id: 'addPolygonEntitys'
      });
      // 添加所有图层的地方
      this.entityPolygonAll = new GraphicsLayer({
        id: 'entityPolygonAll'
      });


      this._map.addLayer(this.addEntitys);


      this._map.addLayer(this.addPolygonEntitys);
      this._map.addLayer(this.entityPolygonAll);

    },

    startup: function () {

      objThis._map.addLayer(objThis._siteLayer);

    },

    getQueryStringByKey: function (key) {
      return (document.location.search.match(new RegExp("(?:^\\?|&)" + key + "=(.*?)(?=&|$)")) || ['', null])[1];
    },

    open: function () {

      var that = this;
      var lgtd = that.getQueryStringByKey('jd');
      var lttd = that.getQueryStringByKey('wd');

      that.addPoint(that.addEntitys, lgtd, lttd, './images/jingbaored.png');
    },
    close: function () {

    },
    // 获取当前时间，以及昨天现在的时间
    getTime: function getTime() {
      var timestamp = Date.parse(new Date());

      // 当前时间
      var currentTime = new Date(timestamp);
      // 年
      var currentY = currentTime.getFullYear();
      // 月
      var currentM = currentTime.getMonth() + 1 < 10 ? '0' + (currentTime.getMonth() + 1) : currentTime.getMonth() + 1;
      // 日
      var currentD = currentTime.getDate() < 10 ? '0' + currentTime.getDate() : currentTime.getDate();
      // 时
      var currentH = currentTime.getHours() < 10 ? '0' + currentTime.getHours() : currentTime.getHours();
      // 分
      var currentDd = currentTime.getMinutes() < 10 ? '0' + currentTime.getMinutes() : currentTime.getMinutes();
      // 明天
      var tomorrowTime = new Date(timestamp - 60 * 60 * 24 * 1000);
      // 年
      var tomorrowY = tomorrowTime.getFullYear();
      // 月
      var tomorrowM = tomorrowTime.getMonth() + 1 < 10 ? '0' + (tomorrowTime.getMonth() + 1) : tomorrowTime.getMonth() + 1;
      // 日
      var tomorrowD = tomorrowTime.getDate() < 10 ? '0' + tomorrowTime.getDate() : tomorrowTime.getDate();
      // 时
      var tomorrowH = tomorrowTime.getHours() < 10 ? '0' + tomorrowTime.getHours() : tomorrowTime.getHours();
      // 分
      var tomorrowDd = tomorrowTime.getMinutes() < 10 ? '0' + tomorrowTime.getMinutes() : tomorrowTime.getMinutes();
      return {
        current: currentY + '-' + currentM + '-' + currentD + ' ' + currentH + ':' + currentDd,
        tomorrow: tomorrowY + '-' + tomorrowM + '-' + tomorrowD + ' ' + tomorrowH + ':' + tomorrowDd,
        month: currentM + currentD
      };
    },

    // 创建实体图层
    createEntitys: function (entitys, entityContent, name, item, lgtd, lttd, outlineColors) {

      var symbol = new esri.symbol.PictureMarkerSymbol(outlineColors, 33, 48);
      symbol.name = name;
      var pt = new Point(lgtd, lttd, new esri.SpatialReference({
        wkid: 4326
      }));
      pt.entityData = item;
      var graphic = new esri.Graphic(pt, symbol);
      entitys.add(graphic);


      entityContent.push(item);
    },

    addPoint: function (entitys, lgtd, lttd, img) {
      var symbol = new esri.symbol.PictureMarkerSymbol(img, 33, 48);
      var pt = new Point(lgtd, lttd, new SpatialReference({
        wkid: 4326
      }));
      var graphic = new esri.Graphic(pt, symbol);
      entitys.add(graphic);
    },

    addPoints: function (entitys, lgtd, lttd, img) {
      var symbol = new esri.symbol.PictureMarkerSymbol(img, 33, 48);
      var pt = new Point(lgtd, lttd, new SpatialReference({
        wkid: 4326
      }));
      var graphic = new esri.Graphic(pt, symbol);
      entitys.add(graphic);
    },

    //聚合图层事件
    flareClusterLayer: function (datas) {

      console.log(1);

      var that = this;

      var preClustered = false;
      var displaySingleFlaresAtCount = 10;
      var areaDisplayMode = "";
      // var allData = JSON.parse(DATA);
      // DataManager.setData(allData);

      //init the layer, more options are available and explained in the cluster layer constructor
      that.clusterLayer = new FlareClusterLayer({
        id: "flare-cluster-layer",
        spatialReference: new esri.SpatialReference({
          "wkid": 4326
        }),
        subTypeFlareProperty: "facilityType",
        singleFlareTooltipProperty: "name",
        displaySubTypeFlares: true,
        displaySingleFlaresAtCount: displaySingleFlaresAtCount,
        flareShowMode: "mouse",
        preClustered: preClustered,
        clusterRatio: 75,
        clusterAreaDisplay: areaDisplayMode,
        clusteringBegin: function (e) {
          console.log(e, "clustering begin");
        },
        clusteringComplete: function () {
          console.log("clustering complete");
        }
      });

      //set up a class breaks renderer to render different symbols based on the cluster count. Use the required clusterCount property to break on.
      var defaultSym = new PictureMarkerSymbol("./images/jingbaored.png", 33, 48).setOffset(0, 15);
      var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");
      var xlSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 32, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([200, 52, 59, 0.8]), 1), new dojo.Color([250, 65, 74, 0.8]));
      var lgSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 28, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([41, 163, 41, 0.8]), 1), new dojo.Color([51, 204, 51, 0.8]));
      var mdSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 24, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([82, 163, 204, 0.8]), 1), new dojo.Color([102, 204, 255, 0.8]));
      var smSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 52, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([230, 184, 92, 0.8]), 1), new dojo.Color([255, 204, 102, 0.8]));
      renderer.addBreak(0, 19, smSymbol);
      renderer.addBreak(20, 150, mdSymbol);
      renderer.addBreak(151, 1000, lgSymbol);
      renderer.addBreak(1001, Infinity, xlSymbol);

      that.clusterLayer.setRenderer(renderer); //use standard setRenderer.

      //set up a popup template
      var template = new PopupTemplate({
        title: "{name}",
        fieldInfos: [{
          fieldName: "facilityType",
          label: "Facility Type",
          visible: true
        },
        {
          fieldName: "postcode",
          label: "Post Code",
          visible: true
        },
        {
          fieldName: "isOpen",
          label: "Opening Hours",
          visible: true
        }
        ]
      });

      //clusterLayer.infoTemplate = template;
      that._map.infoWindow.titleInBody = false;

      that._map.addLayer(that.clusterLayer);

      //var data = DataManager.getData();
      that.clusterLayer.addData(datas);

    },
    clearLayer: function () {
      var that = this;
      that._map.removeLayer(that.clusterLayer);
      that.clusterLayer = null;
    }
  });
  return Widget;
});