任务新增导出

zhongrj

2023-06-27 d74b495736f0c04522ec54274b70fed0ded2878d

 public/map/controls/Queryinfowindow/InfoWindow.js

New file
@@ -0,0 +1,451 @@
define([
      "dojo/Evented",
      "dojo/on",
      "dojo/dom",
      "dojo/_base/declare",
      "dojo/dom-construct",
      "dojo/dom-style",
      "dojo/_base/lang",
      "dojo/dom-class",
      "esri/domUtils",
      "esri/InfoWindowBase",
      "base/utils/GeometryUtil",
      "controls/Queryinfowindow/InfoTemplate"
   ],
   function(
      Evented,
      on,
      dom,
      declare,
      domConstruct,
      domStyle,
      lang,
      domClass,
      domUtils,
      InfoWindowBase,
      GeometryUtil,
      InfoTemplate
   ) {
      return declare([InfoWindowBase, Evented], {

         isContentShowing: false,
         _location: null,
         _pointerDiv: null,
         _items: [],
         _nextButton: null,
         _preButton: null,
         _countSpan: null,
         titleField: "title",
         contentField: "content",
         _currentGraphic: null,
         _currentIndex: 0,
         _correctButton: null,
         width: 355,
         height: 210,
         infoTemplate: null,
         constructor: function(parameters) {
            var csspath = require.toUrl("controls/Queryinfowindow/InfoWindow.css");
            dojo.create("link", {
                  href: csspath,
                  type: 'text/css',
                  rel: 'stylesheet'
               },
               document.getElementsByTagName('head')[0]);
            lang.mixin(this, parameters);

            this.offsetX = 0;
            this.offsetX = 0;

            domClass.add(this.domNode, "custom-infoWindow");
            this._controlbar = domConstruct.create("div", {
               "class": "custom-infoWindow-controlbar"
            }, this.domNode);
            this._title = domConstruct.create("span", {
               "class": "custom-infoWindow-title"
            }, this._controlbar);
            this._closeButton = domConstruct.create("span", {
               "class": "custom-infoWindow-closebutton",
               "title": "关闭"
            }, this._controlbar);
            domConstruct.create("span", {
               "class": "custom-infoWindow-split"
            }, this._controlbar);
            this._correctButton = domConstruct.create("span", {
               "class": "custom-infoWindow-correctbutton",
               "title": "纠错"
            }, this._controlbar);
            this._content = domConstruct.create("div", {
               "class": "custom-infoWindow-content"
            }, this.domNode);
            this._pointerDiv = domConstruct.create("div", {
               "class": "custom-infoWindow-pointer"
            }, this.domNode);
            this._nextButton = domConstruct.create("span", {
               "class": "custom-infoWindow-nextbutton",
               "title": "下一条"
            }, this._controlbar);
            this._countSpan = domConstruct.create("span", {
               "class": "custom-infoWindow-count",
               "innerHTML": "1/20"
            }, this._controlbar);
            this._preButton = domConstruct.create("span", {
               "class": "custom-infoWindow-prebutton",
               "title": "上一条"
            }, this._controlbar);
            on(this._closeButton, "click", lang.hitch(this, function() {
               this.hide();
            }));
            on(this._preButton, "click", lang.hitch(this, function() {
               if (this._currentIndex > 0) {
                  this._currentIndex--;
                  this.showItem(this._items[this._currentIndex]);
                  this._countSpan.innerHTML = (this._currentIndex + 1) + "/" + this._items.length;
               }
            }));
            on(this._nextButton, "click", lang.hitch(this, function() {
               if (this._currentIndex < this._items.length - 1) {
                  this._currentIndex++;
                  this.showItem(this._items[this._currentIndex]);
                  this._countSpan.innerHTML = (this._currentIndex + 1) + "/" + this._items.length;
               }
            }));
            domUtils.hide(this.domNode);
            this.isShowing = false;
            this.setItems([]);
            this.resize(this.width, this.height);
         },
         setMap: function(map) {
            this.inherited(arguments);
            if (!this.domNode.parentNode) {
               domConstruct.place(this.domNode, dom.byId(map.id));
            }
            this.infoTemplate = new InfoTemplate();
            domConstruct.place(this.infoTemplate.domNode, this._content);
            this.infoTemplate.startup();
            map.on("pan-start", lang.hitch(this, function() {
               //this.hide();
            }));
            map.on("zoom-start", lang.hitch(this, function() {
               //this.hide();
            }));
            map.on("pan", lang.hitch(this, function(evt) {
               if (this.isShowing) {
                  this._show(this._location, evt.delta.x, evt.delta.y);
               }
            }));
            map.on("pan-end", lang.hitch(this, function() {
               if (this.isShowing) {
                  this._show(this._location);
               }

            }));
            map.on("zoom-end", lang.hitch(this, function() {
               if (this.isShowing) {
                  this._show(this._location);
               }
            }));

         },
         setTitle: function(title) {
            var thisWidth = domStyle.get(this.domNode, "width");
            domStyle.set(this._title, "maxWidth", (thisWidth - 40).toString() + "px");
            this.place(title, this._title);

         },
         setContent: function(content, width, height) {
            this.infoTemplate.reset();
            this.infoTemplate.setContent(content);
            if (width !== undefined && height !== undefined) {
               this.resize(width, height);
            } else {
               this.resize(355, 210);
            }
         },
         setTitleAndContent: function(title, content, showTab, width, height) {
            //this.place(content, this._content);

            this.setContent(content, width, height);
            this.setTitle(title);
            if (showTab !== undefined) {
               if (!showTab) {
                  this.infoTemplate.hideTab();
               }
            }
         },
         setTab: function(type) {
            this.infoTemplate.switchTab(type);
         },
         setGraphic: function(graphic) {
            this.infoTemplate.setGraphic(graphic);
         },
         getGraphic: function(graphic) {
            return this.infoTemplate.getGraphic();
         },
         show: function(location, offsexX, offsetY) {
            if (offsexX)
               this.offsetX = offsexX;
            else
               this.offsetX = 0;
            if (offsetY)
               this.offsetY = offsetY;
            else
               this.offsetY = 0;
            this._show(location);
         },
         _show: function(location, dx, dy) {
            if (!location) {
               return;
            }
            if (location.type && location.type != "point") {
               location = GeometryUtil.getCenter(location);
            }
            this._location = location;
            if (location.spatialReference) {
               location = this.map.toScreen(location);
            }
            var position = this._getPosition(location.x, location.y)
            if (dx) {
               location.x = location.x + dx;
            }
            if (dy) {
               location.y = location.y + dy
            }
            location.x += this.offsetX;
            location.y += this.offsetY;
            this._positionWindow(position, location)
               //display the info window
            domUtils.show(this.domNode);
            this.isShowing = true;
            this.onShow();
         },
         hide: function() {
            domUtils.hide(this.domNode);
            this.isShowing = false;
            this.onHide();

         },
         resize: function(width, height) {
            this.width = width;
            this.height = height;
            if (!this.domNode) {
               return;
            }
            //          domStyle.set(this._content,{
            //            "width": width + "px"
            //          });
            //          domStyle.set(this._controlbar,{
            //            "width": width + "px"
            //          });
            domStyle.set(this.domNode, {
               "width": width + "px",
               "height": (height + 30).toString() + "px"
            });
            if (this.isShowing) {
               this._show(this._location);
            }

         },
         destroy: function() {
            domConstruct.destroy(this.domNode);
            this._closeButton = this._title = this._content = null;
         },

         _positionWindow: function(arg, location) {
            var thisWidth = domStyle.get(this.domNode, "width");
            var thisHeight = domStyle.get(this.domNode, "height");
            domClass.remove(this._pointerDiv);
            domClass.add(this._pointerDiv, "custom-infoWindow-pointer");
            switch (arg) {
               case "topLeft":
                  domStyle.set(this.domNode, {
                     "left": (location.x - 12) + "px",
                     "top": location.y + 10 + "px"
                  });
                  domClass.add(this._pointerDiv, "pointer-top");
                  domStyle.set(this._pointerDiv, {
                     "left": "3px",
                     "top": "-9px"
                  });
                  break;
               case "topRight":
                  domStyle.set(this.domNode, {
                     "left": (location.x - thisWidth + 11) + "px",
                     "top": location.y + 10 + "px"
                  });
                  domClass.add(this._pointerDiv, "pointer-top");
                  domStyle.set(this._pointerDiv, {
                     "left": (thisWidth - 19) + "px",
                     "top": "-9px"
                  });
                  break;
               case "top":
                  domStyle.set(this.domNode, {
                     "left": (location.x - thisWidth / 2) + "px",
                     "top": location.y + 10 + "px"
                  });
                  domClass.add(this._pointerDiv, "pointer-top");
                  domStyle.set(this._pointerDiv, {
                     "left": (thisWidth / 2 - 8) + "px",
                     "top": "-9px"
                  });
                  break;
               case "left":
                  domStyle.set(this.domNode, {
                     "left": location.x + 12 + "px",
                     "top": (location.y - thisHeight / 2 - 15) + "px"
                  });
                  domClass.add(this._pointerDiv, "pointer-left");
                  domStyle.set(this._pointerDiv, {
                     "left": "-10px",
                     "top": (thisHeight / 2 + 5) + "px"
                  });
                  break;
               case "right":
                  domStyle.set(this.domNode, {
                     "left": (location.x - (thisWidth + 12)) + "px",
                     "top": (location.y - thisHeight / 2 - 15) + "px"
                  });
                  domClass.add(this._pointerDiv, "pointer-right");
                  domStyle.set(this._pointerDiv, {
                     "left": (thisWidth - 8) + "px",
                     "top": (thisHeight / 2 + 5) + "px"
                  });
                  break;
               case "bottomLeft":
                  domStyle.set(this.domNode, {
                     "left": (location.x - 12) + "px",
                     "top": (location.y - thisHeight - 12) + "px"
                  });
                  domClass.add(this._pointerDiv, "pointer-bottom");
                  domStyle.set(this._pointerDiv, {
                     "left": "3px",
                     "top": (thisHeight - 8) + "px"
                  });
                  break;
               case "bottomRight":
                  domStyle.set(this.domNode, {
                     "left": (location.x - thisWidth + 11) + "px",
                     "top": (location.y - thisHeight - 12) + "px"
                  });
                  domClass.add(this._pointerDiv, "pointer-bottom");
                  domStyle.set(this._pointerDiv, {
                     "left": (thisWidth - 20) + "px",
                     "top": (thisHeight - 8) + "px"
                  });
                  break;
                  //              case "bottom":
                  //                 break;
               default:
                  //默认pointer显示在下面
                  domStyle.set(this.domNode, {
                     "left": (location.x - thisWidth / 2) + "px",
                     "top": (location.y - thisHeight - 12) + "px"
                  });
                  domClass.add(this._pointerDiv, "pointer-bottom");
                  domStyle.set(this._pointerDiv, {
                     "left": (thisWidth / 2 - 10) + "px",
                     "top": (thisHeight - 8) + "px"
                  });
                  break;
            }
         },

         /**
          * 计算pointer处于的方位，左上、上、右上、左、默认、右、左下、下、右下
          * @param x 
          * @param y
          */
         _getPosition: function(x, y) {

            var widthPer = this.map.width / 4
            var heightPer = this.map.height / 4
            if (y < heightPer) {
               if (x < widthPer) {
                  return "topLeft";
               } else if (x > widthPer * 3) {
                  return "topRight";
               } else {
                  return "top";
               }
            }
            if (y >= heightPer && y < heightPer * 3) {
               if (x < widthPer) {
                  return "left";
               } else if (x > widthPer * 3) {
                  return "right";
               } else {
                  return "default";
               }
            }
            if (y > heightPer * 3) {
               if (x < widthPer) {
                  return "bottomLeft";
               } else if (x > widthPer * 3) {
                  return "bottomRight";
               } else {
                  return "bottom";
               }
            } else {
               return "default";
            }
         },
         setItems: function(items) {
            this._items = items;
            if (!this.domNode)
               return;
            var thisWidth = domStyle.get(this.domNode, "width");
            if (!items || items.length <= 1) {
               //domStyle.set(this._content,"bottom","20px");
               //domStyle.set(this._pageDiv,"display","none");
               domStyle.set(this._title, "maxWidth", (thisWidth - 40).toString() + "px");
               domStyle.set(this._nextButton, "display", "none");
               domStyle.set(this._countSpan, "display", "none");
               domStyle.set(this._preButton, "display", "none");
               _currentIndex = 0;
            } else {
               //有多个graphics
               domStyle.set(this._title, "maxWidth", (thisWidth - 135).toString() + "px");
               this.showItem(items[0]);
               domStyle.set(this._nextButton, "display", "inline-block");
               domStyle.set(this._countSpan, "display", "inline-block");
               domStyle.set(this._preButton, "display", "inline-block");
               this._countSpan.innerHTML = "1/" + this._items.length;
               _currentIndex = 0;
               return;
            }
            if (items.length == 1) {
               //如果只有一个graphic
               this.showItem(items[_currentIndex]);
            }
         },
         showItem: function(item) {
            if (item) {
               if (item[this.titleField]) {
                  this._title.innerHTML = item[this.titleField];
               } else {
                  this._title.innerHTML = "无标题";
               }
               if (item[this.contentField]) {
                  this.setContent(item[this.contentField]);
               } else {
                  this.setContent("");
               }
            }
            this._location = item.geometry;
            if (this.isShowing) {
               this._show(this._location);
            }
            //           var maxWidth = domStyle.get(this._title,"maxWidth");
            //           if(maxWidth<this._title.offsetWidth)
            //          {
            //              this._title.title = graphic.attributes[this.titleField];
            //          }
            //           else
            //          {
            //              this._title.title = "";
            //          }
         }

      });

   });