arcgis自定义infowindow

Posted 2020-08-14

  1 define([
  2         "dojo/Evented",
  3         "dojo/on",
  4         "dojo/query",
  5         "dojo/_base/declare",
  6         "dojo/dom-construct",
  7         "dojo/dom-attr",
  8         "dojo/_base/array",
  9         "dojo/dom-style",
 10         "dojo/_base/lang", 
 11         "dojo/dom-class",
 12         "dijit/_TemplatedMixin",/*为了使用我在第一步拷贝下来的html模板*/
 13         "esri/domUtils",
 14         "esri/InfoWindowBase",
 15         "esri/geometry/ScreenPoint",
 16         "esri/geometry/screenUtils",/*为了实现地理坐标和屏幕坐标的准确转换*/
 17         "esri/geometry/webMercatorUtils",
 18         "dojo/text!./htmlTemplate/BubblePopup.html"
 19     ],
 20     function (Evented,
 21               on,
 22               query,
 23               declare,
 24               domConstruct,
 25               domAttr,
 26               array,
 27               domStyle,
 28               lang,
 29               domClass,
 30               _TemplatedMixin,
 31               domUtils,
 32               InfoWindowBase, ScreenPoint, screenUtils, webMercatorUtils, template) {
 33         var showMapPoint = null; /*是一个全局的变量，用来记录popup的地理坐标位置*/
 34         return declare([InfoWindowBase, Evented, _TemplatedMixin], {
 35 
 36             templateString: template, /*_TemplateMixin模块的一个属性，用来保存HTML模板*/
 37             _events: [],  /*是一个数组，用来存储相关的事件，在popup被释放时释放注册的事件*/
 38             constructor: function (parameters) {
 39                 lang.mixin(this, parameters);
 40             },
 41             _createInfoWindowInstance: function (map) {
 42                 this.domNode = domConstruct.create("div", { id: ‘infoPanel‘ }, map.id + "_root");
 43                 this.domNode.innerHTML = ‘<div id="infoHeader"></div><div id="infoContent"><table></table></div>‘;
 44                 //this.domNode.innerHTML = this.templateString;
 45                 this._content = query("#infoPanel #infoContent");
 46                 this._title = query("#infoPanel #infoHeader");
 47                 this._flash = query("#infoPanel .flash");
 48                 //hide initial display
 49                 domUtils.hide(this.domNode);                
 50                 this.isShowing = false;
 51             },
 52             setMap: function (map) {
 53                 this.inherited(arguments);//会调用父类(基类)中的同名方法
 54                 this._events = [];
 55                 this._createInfoWindowInstance(map);
 56 
 57                 this._events.push(map.on("pan", lang.hitch(this, function (evt) {
 58                     if (this.isShowing) {
 59                         this._showInfoWindow(evt.extent);
 60                     }
 61                 })));
 62 
 63                 this._events.push(map.on("zoom-start", lang.hitch(this, function (evt) {
 64                     this.hide();
 65                 })));
 66 
 67                 this._events.push(map.on("zoom-end", lang.hitch(this, function (evt) {
 68                     if (this.isShowing) {
 69                         this._showInfoWindow(evt.extent);
 70                     }
 71                 })));
 72             },
 73             unsetMap: function (map) {
 74                 this.inherited(arguments);
 75                 array.forEach(this._events, function (event) {
 76                     event.remove();
 77                 });
 78             },
 79             setTitle: function (title, className) {
 80                 this._title.forEach(function (node){
 81                   node.innerHTML = title;
 82                   domClass.remove(node);
 83                   domClass.add(node, className);
 84                 });
 85             },
 86             setContent: function (content) {                
 87                 this._content.forEach(function (node) {
 88                     node.innerHTML = content;
 89                 });
 90             },
 91             _showInfoWindow: function (extent) {
 92                 if (showMapPoint == null)return;
 93                 var showScreenPoint = screenUtils.toScreenGeometry(extent, this.map.width, this.map.height, showMapPoint);
 94                 domStyle.set(this.domNode, {
 95                     "left": (showScreenPoint.x) + 7 + "px",
 96                     "top": (showScreenPoint.y) + 7 +"px" 
 97                 });
 98 
 99                 domUtils.show(this.domNode);
100                 this.isShowing = true;
101                 this.onShow();
102             },
103             show: function (location) {
104                 showMapPoint = location;
105                 if (webMercatorUtils.canProject(location, this.map)) {
106                     showMapPoint = webMercatorUtils.project(location, this.map);
107                 }
108                 if (showMapPoint.spatialReference) {
109                     var screenPoint = this.map.toScreen(showMapPoint);
110                     domStyle.set(this.domNode, {
111                         "left": (screenPoint.x)+ 7 + "px",
112                         "top": (screenPoint.y) + 7 + "px"
113                     });
114                 }
115                 //display the info window
116                 domUtils.show(this.domNode);
117                 this.isShowing = true;
118                 this.onShow();
119             },
120             hide: function () {
121                 if (this.isShowing) {
122                     domUtils.hide(this.domNode);
123                     this.isShowing = false;
124                     this.onHide();
125                 }
126             },
127             resize: function (width, height) {
128                 domStyle.set(this._content, {
129                     "width": width + "px",
130                     "height": height + "px"
131                 });
132             },
133             remove: function () {
134                 this.hide();
135                 showMapPoint = null;
136             },
137             destroy: function () {
138                 domConstruct.destroy(this.domNode);
139             }
140         });
141     });