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 = "";
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 }
京公网安备 11010802041100号