任务新增导出

zhongrj

2023-06-27 d74b495736f0c04522ec54274b70fed0ded2878d

 public/map/controls/overview/OverviewControl.js

New file
@@ -0,0 +1,357 @@
/**
 * 鹰眼视图widget
 * @author Liuyl
 * @date 2015/10/9
 */
define([
   "dojo/_base/declare",
   "base/BaseControl",
   "dojo/_base/array",
   "dojo/_base/lang",
   "dojo/dom",
   "dojo/dom-class",
   "dojo/dom-style",
   "dojo/topic",
   "dojo/aspect",
   "dojo/on",
   "dojo/text!controls/overview/OverviewControl.html",
   "esri/map",
   "esri/graphic",
   "esri/Color",
   "esri/geometry/Polygon",
   "esri/symbols/SimpleFillSymbol",
   "esri/symbols/SimpleLineSymbol",
   "esri/layers/GraphicsLayer",
   "esri/toolbars/edit",
   "esri/graphicsUtils",
   "utils/LayerUtil",
   "controls/overview/config",
   "base/AppEvent"
], function(
   declare,
   BaseControl,
   arrayUtil,
   lang,
   dom,
   domClass,
   domStyle,
   topic,
   aspect,
   on,
   template,
   Map,
   Graphic,
   Color,
   Polygon,
   SimpleFillSymbol,
   SimpleLineSymbol,
   GraphicsLayer,
   Edit,
   graphicsUtils,
   LayerUtil,
   config,
   AppEvent) {
   var Widget = declare([BaseControl], {

      templateString: template,
      defaultOptions: {
         rate: 2.5,
         base_class: "overview-default-base-class",
         fill_color: [135, 206, 250, 0.3],
         border_color: [135, 206, 250, 1]
      },
      /**
       * GroupLayers的配置
       */
      grouplayersConfig: null,
      /**
       * 当前显示的GroupLayer的Id
       */
      visibleGroupLayerId: "",

      /**
       * 根据图层配置信息转换成实例化后的图层结果对象
       */
      _parseResult: null,

      /**
       * options
       */
      constructor: function(options) {
         /**
          * 确保实例化时传入图层组配置参数和该鹰眼初始显示的图层组Id
          */
         if (!options || !options.grouplayersConfig || !options.visibleGroupLayerId) {
            throw {
               message: "初始化参数不完整，应指定grouplayersConfig和visibleGroupLayerId参数"
            };
         }
         declare.safeMixin(this, options);
         //$.extend(true, config, this.defaultOptions, options);
         //this.map = config.basemap;
         //         dojo.create("link", {
         //               href: require.toUrl("widgets/overview/") + 'OverviewWidget.css',
         //               type: 'text/css',
         //               rel: 'stylesheet'
         //            },
         //            document.getElementsByTagName('head')[0]);
         //this.MAP_DOM_ID = srcRefNode + this.MAP_DOM_ID;
         this.base_class = "overview-default-base-class";
         //this.map = config.basemap;
         this._myMap = null;
         this._layer1 = null;
         this._layer2 = null;
         this._graphic1 = null;
         this._graphic2 = null;
      },
      startup: function() {
         this.inherited(arguments);
         this._init();
         AppEvent.addAppEventListener(AppEvent.SWITCH_BASEMAP, lang.hitch(this, this.onSwitchBaseMap));
      },
      postCreate: function() {
         this.inherited(arguments);
      },
      _init: function() {
         if (this.myMapNode.id == "") {
            this.myMapNode.id = uuid();
         }

         //初始化自己的地图
         this._myMap = new Map(this.myMapNode.id, {
            logo: false,
            slider: false
         });
         //this._myMap = map;
         //禁用鹰眼地图的所有用户导航方式
         this._myMap.on("load", lang.hitch(this, function(map) {
            this._myMap.disableMapNavigation();
            this._myMap.hideZoomSlider();
         }));

         //var _cs = domStyle.getComputedStyle(this.mapNode);
         //根据配置添加图层
         this._addLayer();
         this._initGraphic();
         var resizeTimer;
         clearTimeout(resizeTimer);
         resizeTimer = setTimeout(lang.hitch(this, function() {
            this._myMap.resize();
            this._myMap.reposition();

         }), 500);
      },
      _addLayer: function() {
         //仅显示baselayer即可，去掉baselayer的displaylevel限制，让其在所有显示级别都可以显示
         this._parseResult = LayerUtil.parseGroups(this.grouplayersConfig);
         var groups = this._parseResult.groups;
         for (var key in groups) {
            var layer;
            var visible = (key == this.visibleGroupLayerId);
            if(visible == false){
               continue;
            }
            if(groups[key].baselayers==null){
               groups[key].baselayers=LayerUtil.parseLayers(groups[key].baselayersConfig);
            }
            for (var i = 0; i < groups[key].baselayers.length; i++) {
               layer = groups[key].baselayers[i];
               layer.visible = visible;
               if (layer.setDisplayLevels) {
                  layer.setDisplayLevels(null);
               }
               this._myMap.addLayer(layer);
            }
         }
      },
      onSwitchBaseMap: function(evt) {
         if (evt.hockId != this.hockId || !evt.grouplayer)
            return;
         if (this.visibleGroupLayerId == evt.grouplayer) {
            return;
         } else {
            //先隐藏原来的图层
            var grouplayer = this._parseResult.groups[this.visibleGroupLayerId];
            for (var key in grouplayer.baselayers) {
               var layer = grouplayer.baselayers[key];
               //layer.setVisibility(false);
               this._myMap.removeLayer(layer);
            }

            //再显示需要展示的图层
            var grouplayer = null;
            for (var key in this._parseResult.groups) {
               if (key == evt.grouplayer) {
                  var grouplayer = this._parseResult.groups[key];
                  if(grouplayer.baselayers == null){
                     grouplayer.baselayers=LayerUtil.parseLayers(grouplayer.baselayersConfig);
                  }
                  for (var index in grouplayer.baselayers) {
                     var layer = grouplayer.baselayers[index];
                     //layer.setVisibility(true);
                     this._myMap.addLayer(layer);
                  }
               }
            }
            this.visibleGroupLayerId = evt.grouplayer;
         }
      },
      _initGraphic: function() {
         var _symbol = new SimpleFillSymbol()
            .setStyle(SimpleFillSymbol.STYLE_SOLID)
            .setColor(new Color(config.fill_color))
            .setOutline(new SimpleLineSymbol().setColor(new Color(config.border_color)).setWidth(0.5));
         this._layer1 = new GraphicsLayer({
            id: "rect1"
         });
         this._layer2 = new GraphicsLayer({
            id: "rect2"
         });
         this._myMap.addLayer(this._layer1);
         this._myMap.addLayer(this._layer2);
         this._graphic1 = new Graphic(Polygon.fromExtent(this.map.extent), _symbol);
         this._graphic2 = new Graphic(Polygon.fromExtent(this.map.extent), _symbol);
         this._layer1.add(this._graphic1);
         this._layer2.add(this._graphic2);
         var _startMapPoint = null;
         var _basemapExtent = null;


         this.map.on("mouse-drag-start", lang.hitch(this, function(evt) {
            _startMapPoint = evt.mapPoint;
            _basemapExtent = this.map.extent;
         }));
         this.map.on("mouse-drag", lang.hitch(this, function(evt) {
            var _curMapPoint = evt.mapPoint;

            var _deltaX = _curMapPoint.x - _startMapPoint.x;
            var _deltaY = _curMapPoint.y - _startMapPoint.y;
            var _basemapCenter = _basemapExtent.getCenter();
            _basemapCenter.x -= _deltaX;
            _basemapCenter.y -= _deltaY;
            _newExtent = _basemapExtent.centerAt(_basemapCenter);
            var _newPolygon = Polygon.fromExtent(_newExtent);
            this._graphic2.setGeometry(_newPolygon);
            this._layer2.redraw();
         }));

         this.map.on("extent-change", lang.hitch(this, function(evt) {
            var _newPolygon = Polygon.fromExtent(evt.extent);
            var _extent = new esri.geometry.Extent(evt.extent);
            var _deltaX = (_extent.xmax - _extent.xmin) / 2.0 * (config.rate - 1);
            var _deltaY = (_extent.ymax - _extent.ymin) / 2.0 * (config.rate - 1);
            _extent.xmin -= _deltaX;
            _extent.xmax += _deltaX;
            _extent.ymin -= _deltaY;
            _extent.ymax += _deltaY;
            this._myMap.setExtent(_extent).then(lang.hitch(this, function() {
               this._redrawRect(_newPolygon);
            }));
            //主地图缩放时让矩形框具有动态效果
            this.map.on("zoom", lang.hitch(this, function(evt) {
               try {
                  var _curZoomLevel = evt.level;
                  var _newPolygon = Polygon.fromExtent(evt.extent);
                  this._redrawRect(_newPolygon);
               } catch (err) {
                  console.log(err);
               }

            }));
         }));
         this._initEditing();

      },
      _redrawRect: function(polygon) {
         this._graphic2.setGeometry(polygon);
         this._layer2.redraw();
         this._graphic1.setGeometry(polygon);
         this._layer1.redraw();
      },
      _initEditing: function() {
         var editToolBar = new Edit(this._myMap);
         editToolBar.activate(Edit.MOVE, this._graphic2);
         editToolBar.on("graphic-move-stop", lang.hitch(this, function(g, t) {
            var _newCenter = graphicsUtils.graphicsExtent([g.graphic]).getCenter();
            this.map.centerAt(_newCenter);
         }));
      },
      _toggle: function() {
         require(["dojo/_base/fx", "dojo/dom", "dojo/domReady!"], lang.hitch(this, function(baseFx, dom) {
            var _prop = null;
            //            var _cs = domStyle.getComputedStyle(this.mapNode);
            //            var _width = -parseInt(_cs.width.substr(0, _cs.width.length - 2));
            //            var _height = -parseInt(_cs.height.substr(0, _cs.height.length - 2));
            if (domClass.contains(this.toggleNode, "overview-toggle-show")) {
               //由于控件初始化后无法设置成正确的显示范围
               //故在显示鹰眼前手动触发一次basemap的extent-change事件以重新设置鹰眼地图的显示范围
               domStyle.set(this._myMap.container, "height", domStyle.get(this.mapNode, "height") + "px");
               this._myMap.resize();
               this.map.centerAt(this.map.extent.getCenter());
               domStyle.set(this.mapNode, "display", "block");
               _prop = {
                  //                  right: {
                  //                     start: _width,
                  //                     end: '0',
                  //                     units: 'px'
                  //                  },
                  //                  bottom: {
                  //                     start: _height,
                  //                     end: '0',
                  //                     units: 'px'
                  //                  },
                  opacity: {
                     start: 0,
                     end: 1
                  }
               }
               baseFx.animateProperty({
                  node: this.mapNode,
                  properties: _prop,
                  duration: 1000
               }).play();
               domClass.remove(this.toggleNode, "overview-toggle-show");
               domClass.add(this.toggleNode, "overview-toggle-hide");
            } else {

               _prop = {
                  //                  right: {
                  //                     end: _width,
                  //                     units: 'px'
                  //                  },
                  //                  bottom: {
                  //                     end: _height,
                  //                     units: 'px'
                  //                  },
                  opacity: {
                     start: 1,
                     end: 0
                  }
               }

               var anim = baseFx.animateProperty({
                  node: this.mapNode,
                  properties: _prop,
                  duration: 1000
               });
               aspect.after(anim, "onEnd", lang.hitch(this, function() {
                  domStyle.set(this.mapNode, "display", "none");
               }, true));
               anim.play();
               domClass.remove(this.toggleNode, "overview-toggle-hide");
               domClass.add(this.toggleNode, "overview-toggle-show");
            }

         }));
      },
      destroy: function() {
         this.inherited(arguments);
         var layerIds = this._myMap.layerIds;
         for (var index in layerIds) {
            this._myMap.removeLayer(this._myMap.getLayer(layerIds[index]));
         }
      }

   });
   return Widget;
});