通过div实现arcgis自定义infowindow

Posted 2020-09-30 扰扰

通过给地图绑定缩放，单击和平移命令，实现在地图附加div标签，实现infowindow效果；

  1 /*
  2 *作者 扰扰
  3 *自定义esri弹窗
  4 *paramter Map地图对象
  5 *paramter x
  6 *paramter y
  7 *paramter title标题
  8 *paramter html展示内容html字符串
  9 *paramter height弹窗高度默认为300
 10 *paramter width弹窗宽度默认为200
 11 */
 12 RaoRao.esriDivPanel = function (Map, x, y, title, html, height, width) {
 13     //加载时地图坐标
 14     var X = x, Y = y, map = Map;
 15     //弹窗宽度
 16     var Heigth = 300;
 17     if (height) { Height = height }
 18     //弹窗高度
 19     var Width = 400;
 20     if (width) { Width = width }
 21     //弹窗位置
 22     var top = 0;
 23     //弹窗位置
 24     var left = 0;
 25     //弹窗对象
 26     var Div = null;
 27     //移动量
 28     var movX = 0, movY = 0;
 29     //变化量
 30     var tempX = 0, tempY = 0;
 31     //地图拖拽事件
 32     this._panEvt = null;
 33     this._panEndEvt = null;
 34     //地图所缩放事件
 35     this._zoomStartEvt = null;
 36     this._zoomEndEvt = null;
 37     //弹窗DIV
 38     this.div = document.createElement("div");
 39     Div = this.div;
 40     this.div.className = "esriDivPanel";
 41     var divcss = ‘width:‘ + Width + ‘px;height:‘ + Heigth + ‘px;‘;
 42     this.div.style.cssText = divcss;
 43 
 44     this.title = document.createElement("div");
 45     this.title.className = "esriDivPanel_title";
 46     var close = document.createElement("div");
 47     close.className = "esriDivPanel_titleClose";
 48     close.innerHTML = "<span></span>";
 49 
 50     var titletext = document.createElement("div");
 51     titletext.className = "esriDivPanel_titleTxt";
 52     titletext.innerHTML = title;
 53 
 54     this.content = document.createElement("div");
 55     this.content.className = "esriDivPanel_content";
 56     this.content.innerHTML = html;
 57     this.content.style.cssText = "height:" + (Heigth - 32) + "px;";
 58 
 59     this.triangle = document.createElement("div");
 60     this.triangle.className = "esriDivPanel_triangle";
 61 
 62     this.title.appendChild(close);
 63     this.title.appendChild(titletext);
 64 
 65     this.div.appendChild(this.title);
 66     this.div.appendChild(this.content);
 67     this.div.appendChild(this.triangle);
 68 
 69     var point = new esri.geometry.Point(x, y, map.spatialReference);
 70     var p = map.toScreen(point);
 71     top = p.y - Heigth-36;
 72     left = p.x - Width / 2;
 73     this.div.style.top = top + "px";
 74     this.div.style.left = left + "px";
 75     document.getElementById(map.id).appendChild(this.div);
 76     //定义地图缩放事件
 77     this._zoomStartEvt = map.on("zoom-start", function (evt) {
 78         //Div.style.display = "none";
 79         var point = new esri.geometry.Point(X, Y, map.spatialReference);
 80         var p = map.toScreen(point);
 81         top = p.y - Heigth - 36;
 82         left = p.x - Width / 2;
 83         Div.style.top = top + "px";
 84         Div.style.left = left + "px";
 85     });
 86     this._zoomEndEvt = map.on("zoom-end", function (evt) {
 87         //Div.style.display = "block";
 88         var point = new esri.geometry.Point(X, Y, map.spatialReference);
 89         var p = map.toScreen(point);
 90         top = p.y - Heigth - 36;
 91         left = p.x - Width / 2;;
 92         Div.style.top = top + "px";
 93         Div.style.left = left + "px";
 94     });
 95     //定义地图拖拽事件
 96     this._panEvt = map.on("pan", function (evt) {
 97         var point = evt.delta;
 98         movX = point.x - tempX;
 99         movY = point.y - tempY;
100         tempX = point.x; tempY = point.y;
101         top = top + movY;
102         left = left + movX;
103         Div.style.top = top + "px";
104         Div.style.left = left + "px";
105     });
106     this._panEndEvt = map.on("pan-end", function (evt) {
107         tempX = 0;
108         tempY = 0;
109     });
110     //定义关闭事件
111     close.onclick = function () {
112         if (this._panEndEvt) {
113             this._panEndEvt.remove();
114         }
115         if (this._panEvt) {
116             this._panEvt.remove();
117         }
118         if (this._zoomEndEvt) {
119             this._zoomEndEvt.remove();
120         }
121         if (this._zoomStartEvt) {
122             this._zoomStartEvt.remove();
123         }
124         this._panEndEvt = null;
125         this._panEvt = null;
126         this._zoomEndEvt = null;
127         this._zoomStartEvt = null;
128         document.getElementById(map.id).removeChild(Div);
129     }
130 }

View Code

 1 .esriDivPanel {
 2     position: absolute;
 3     z-index: 100;
 4 }
 5 
 6 .esriDivPanel_title {
 7     border: 2px solid #333;
 8     height: 32px;
 9     width: 100%;
10     background-color: #333;
11     border-radius: 5px 5px 0px 0px;
12 }
13 
14 .esriDivPanel_titleClose {
15     float: right;
16     width: 24px;
17     height: 24px;
18     margin: 5px;
19 }
20 
21     .esriDivPanel_titleClose span {
22         display: inline-block;
23         width: 100%;
24         height: 100%;
25         text-align: center;
26         overflow: hidden;
27         position: relative;
28     }
29 
30         .esriDivPanel_titleClose span:hover {
31             background-color: slategrey;
32         }
33 
34         .esriDivPanel_titleClose span::before, .esriDivPanel_titleClose span::after {
35             position: absolute;
36             content: ‘‘;
37             top: 50%;
38             left: 0;
39             margin-top: -1px;
40             background-color: #fff;
41             width: 100%;
42             height: 3px;
43         }
44 
45         .esriDivPanel_titleClose span::before {
46             -webkit-transform: rotate(45deg);
47             -moz-transform: rotate(45deg);
48         }
49 
50         .esriDivPanel_titleClose span::after {
51             -webkit-transform: rotate(-45deg);
52             -moz-transform: rotate(-45deg);
53         }
54 
55 .esriDivPanel_titleTxt {
56     overflow: hidden;
57     width: 75%;
58     height: 32px;
59     line-height: 32px;
60     margin-left: 5px;
61     color: white;
62 }
63 
64 .esriDivPanel_content {
65     width: 100%;
66     border: 2px solid #8c9794;
67     background-color: #f8f8f8;
68     overflow: hidden;
69 }
70 
71 .esriDivPanel_triangle {
72     width: 0px;
73     height: 0px;
74     margin-left: 50%;
75     /* background-color: #8c9794; */
76     border-top: 20px solid #333;
77     /* border-bottom: 20px solid rgba(140, 151, 148, 0.57); */
78     border-right: 40px solid rgba(140, 151, 148, 0);
79     border-left: 0px solid rgba(140, 151, 148, 0.26);
80 }

View Code

再系统中引用代码就可以直接调用