通过给地图绑定缩放，单击和平移命令，实现在地图附加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 }
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 }
再系统中引用代码就可以直接调用
时间： 2024-12-13 12:21:33