通过div实现arcgis自定义infowindow

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

通过div实现arcgis自定义infowindow的相关文章

arcgis自定义infowindow

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 "

lzugis——Arcgis Server for JavaScript API之自定义InfoWindow(续)

同样的标题后面加了一个括弧,不是为了增减博文数量,而确实是上个功能的完善,标注为续,意思是继续上次的内容,来说说如何自定义InfoWindow. 在上一讲中,实现了InfoWindow的显示,但是并没有实现地图拖动地图InfoWindow随着联动,以及缩放地图InfoWindow随着联动的问题,在本文章中,就上述两个问题提供一个解决思路. 首先,说说拖动地图InfoWindow的联动.拖动地图时,地图并未做缩放,所以只是做一个位置的偏移,因此,定义一个公共变量,记录InfoWindow出来时候的

lzugis——Arcgis Server for JavaScript API之自定义InfoWindow

用过Arcgis Server for JavaScript API肯定知道InfoWIndow,你在用InfoWindow的时候会发现各种问题,例如不能完全显示的问题,遮盖对象的问题等等,所以呢我在实现这个功能的时候动了下脑子,想自己用div+css弄一个,倒腾了半天,弄出来了一个如下所示的: 做的比较丑陋,样式方面还得好好下下功夫,东西是差不多实现了,下面说说思路: 首先,DIV定义,这个样式,我定义了5个div,分别是infowin,title,colse,content,arrow,其中

DIV模拟的自定义滚动条

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>div模拟的自定义滚动条</title><style type="text/css">* { margin: 0; padding: 0;} p { heigh

ARCGIS自定义下拉列表

1  创建一个geodatabase数据库 2 点击属性--->Domain-->>输入名称,在下面的属性设置中选择coded value 3  在下面的列表中输入下拉列表中可供选择的值,例如 1  通达   2 通乡  3  其他等等. 4 打开要素类的属性,在Fields下选择要给哪个字段提供下拉列表,并且这个字段的类型必须和你所建立的domain的类型是相同的,然后在该字段的domain下选择刚刚建立的domain名即可. 5 在ArcMap中打开该文件的属性表,在设置了下拉列表的

div层次整理 / 自定义pycharm补全 / 注释 /keymap /tab

div css 结构,div套div层次过多.漏个div多个div什么的,加上结束标记就好排查多了. 在django template里自定义补全 原文地址:http://blog.51cto.com/13606158/2079720

项目实战之玩转div+css制作自定义形状

项目需求: 要求制作上图所示的效果,能达到灵活可配的效果.我想初步想法是用div+css来制作. 抽象模型: 面对复杂的问题,要学会抽象当前的问题.下面的这个模型是我抽象出来的一个简单的解决方案. 这样我们就可以用各种css效果来组合出我们需要的效果,放到网站中可以灵活配置图形的各种样式. 技术难点: 1.如何做到让div旋转? -moz-transform: rotate(90deg); 如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转 2.如何设置div的层次关系? z

ArcGIS自定义工具箱-清空工作空间

联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 目的:删除工作空间里的要素类,栅格和独立表 使用方法: 例如"C:\Users\think\Documents\ArcGIS\Default.gdb" 结果: 原文地址:https://www.cnblogs.com/xiexiaokui/p/10339940.html

ArcGIS自定义工具箱-判断字段值是否相等

联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 目的:判断两个字段值是否相等 使用方法: 结果: 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 原文地址:https://www.cnblogs.com/xiexiaokui/p/10337410.html