通过给地图绑定缩放,单击和平移命令,实现在地图附加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-10-06 21:41:21