SuperMap 二维地图和三维场景弹窗窗口大小控制

最新推荐文章于 2023-09-18 09:56:49 发布

weixin_30361753

最新推荐文章于 2023-09-18 09:56:49 发布

阅读量397

点赞数

原文链接：http://www.cnblogs.com/sunflowerGIS/p/5718803.html

版权

注：此处所说的弹窗窗口，主要指的是那些弹窗窗口中嵌入iframe，包含信息页面的窗口大小控制。

1、首先来了解下 SuperMap 示例中的处理方案

二维的处理方式

 1 //初始化Anchored类
 2 　　　　　　popup = new SuperMap.Popup.Anchored(
 3                     "chicken",
 4                     marker.getLonLat(),
 5                     new SuperMap.Size(220,140),
 6                     "<iframe frameborder=no border=0  src='http://www.baidu.com' style='width:100%;height:100%;border:none;' border='0'></iframe>",
 7                     icon,
 8                     true,
 9                     null
10             );
11 
12             infowin = popup;
13             //添加弹窗到map图层
14             map.addPopup(popup);

二维弹窗处理方式

三维的处理方式

  1 function createBubble(pos){
  2         try{
  3                 bubble = new SuperMap.Web.Realspace.Bubble();
  4                 bubble.set_pointer(pos);
  5                 
  6                 //设置气泡标题内容
  7                 var title = document.getElementById("TitleName").value;
  8                 if (title != null) {
  9                     bubble.set_title(title);
 10                 }
 11                   
 12                 var textStyle3D = new SuperMap.Web.Core.TextStyle3D();
 13                 
 14                 //设置气泡标题对齐方式
 15                 var textAligns = document.getElementById("TextAlign");
 16                 for(var i=0;i<textAligns.length;i++)
 17                 {
 18                      if (textAligns[i].selected) {
 19                         textStyle3D.set_alignment(textAligns[i].value);
 20                     }
 21                 }        
 22                 //设置标题文本字体   
 23                 var fontNames = document.getElementById("FontName");    
 24                 for(var i=0;i<fontNames.length;i++){
 25                     if (fontNames[i].selected) {
 26                         var selectValue = fontNames[i].value;
 27                         if (selectValue == 1) {
 28                             textStyle3D.set_fontName("微软雅黑");
 29                         }
 30                         else if (selectValue == 2) {
 31                             textStyle3D.set_fontName("宋体");
 32                         }
 33                         else if (selectValue == 3) {
 34                            textStyle3D.set_fontName("隶书");
 35                         }
 36                     }
 37                 } 
 38                 
 39                 //设置标题字体颜色
 40                 var fontColors = document.getElementById("FontColor");
 41                 for(var i = 0;i<fontColors.length;i++){
 42                     if (fontColors[i].selected) {
 43                         var selectColor = fontColors[i].value;
 44                         switch(selectColor) {
 45                         case "Red":
 46                             textStyle3D.set_foreColor(new SuperMap.Web.Core.Color(255,0,0,100));
 47                             break;
 48                         case "Green":
 49                             textStyle3D.set_foreColor(new SuperMap.Web.Core.Color(0,255,0,100));
 50                             break;
 51                         case "Blue":
 52                             textStyle3D.set_foreColor(new SuperMap.Web.Core.Color(0,0,255,100));
 53                             break;
 54                         default:
 55                             bubble.set_backColor(new SuperMap.Web.Core.Color(0,0,0,255));
 56                             break;
 57                         }
 58                     }
 59                 } 
 60                 
 61                 bubble.set_titleTextStyle3D(textStyle3D);                      
 62                 
 63                 //设置气泡边框宽度
 64                 var frameWidth = document.getElementById("FrameWidth").value;
 65                 if (frameWidth != null) {
 66                     bubble.set_frameWidth(frameWidth);
 67                 }
 68                 
 69                 //设置气泡圆角程度
 70                 var roundQuality = document.getElementById("RoundQuality").value;
 71                 if (roundQuality != null) {
 72                     bubble.set_roundQuality(roundQuality);
 73                 }
 74                 
 75                 //设置边框颜色
 76                 var frameColors = document.getElementById("FrameColor");
 77                 for(var i = 0;i<frameColors.length;i++){
 78                     if (frameColors[i].selected) {
 79                         var selectColor = frameColors[i].value;
 80                         switch(selectColor) {
 81                         case "Red":
 82                             bubble.set_backColor(new SuperMap.Web.Core.Color(255,0,0,100));
 83                             break;
 84                         case "Green":
 85                             bubble.set_backColor(new SuperMap.Web.Core.Color(0,255,0,100));
 86                             break;
 87                         case "Blue":
 88                             bubble.set_backColor(new SuperMap.Web.Core.Color(0,0,255,100));
 89                             break;
 90                         default:
 91                             bubble.set_backColor(new SuperMap.Web.Core.Color(255,255,255,255));
 92                             break;
 93                         }
 94                     }
 95                 }            
 96                 bubble.set_frameColor(new SuperMap.Web.Core.Color(255,255,255,255));    
 97                  
 98                 bubble.set_height(400);
 99                 bubble.set_width(500);
100         
101                 sceneControl.get_bubbles().removeAll();
102                 sceneControl.get_bubbles().add(bubble);
103             } 
104         catch(e){
105             alert("创建气泡失败");
106         }   
107     }
108     
109     function bubbleInitialize(bubble){
110         try
111         {
112             var frameInfo = document.getElementById("infoWindow");
113             frameInfo.style.display = "block";
114             frameInfo.src = infoPage;            
115             
116             frameInfo.frameborder = 0;
117             frameInfo.style.marginwidth = 0;
118             frameInfo.style.marginheight = 0;
119             
120             frameInfo.style.width = bubble.get_clientWidth()+"px";
121             frameInfo.style.height = bubble.get_clientHeight()+"px";
122             frameInfo.style.left = bubble.get_clientLeft() + sceneControl.get_controlOffsetX()+"px";
123             frameInfo.style.top = bubble.get_clientTop() + sceneControl.get_controlOffsetY()+"px";
124         }
125         catch(e){
126             alert("Faile to initialize bubble");
127         }
128     }
129     
130     function bubbleResize(bubble){
131         try
132         {
133             var frameInfo = document.getElementById("infoWindow");
134             frameInfo.style.display = "block";
135             frameInfo.src = infoPage;
136                     
137             frameInfo.style.width = bubble.get_clientWidth()+"px";
138             frameInfo.style.height = bubble.get_clientHeight()+"px";
139             frameInfo.style.left = bubble.get_clientLeft() + sceneControl.get_controlOffsetX()+"px";
140             frameInfo.style.top = bubble.get_clientTop() + sceneControl.get_controlOffsetY()+"px";
141         }
142         catch(e)
143         {
144             alert("Failed to resize bubble");
145         }
146     }
147     
148     //关闭气泡
149     function bubbleClose(bubble){
150         try
151         {
152             var frameInfo = document.getElementById("infoWindow");
153             frameInfo.style.display = "none";
154             
155             var selection3Ds = scene.findSelection3Ds(true);
156             if (selection3Ds.length > 0) {
157                 for(var i = 0; i <= selection3Ds.length - 1; i++){
158                     selection3Ds[i].removeAll();
159                 }
160             }
161         }
162         catch(e){
163             alert("Failed to close bubble");
164         }
165     }

三维弹窗处理方式

示例处理方式评价：

优点：使用示例中的处理方式，简单方便，在初始化弹窗的时候，即设置好了弹窗窗口的大小，这样在弹窗弹出的时候，窗口大小就已经固定，不会出现弹窗大小变动的现象，用户体验好。

缺点：在后期如果需要补充信息页面数据，窗口大小需要根据页面显示范围调整大小。此时就需要找到弹出窗口的代码，修改弹窗初设宽度和高度。如果只是几个页面，这么操作还好，如果需要修改的弹窗很多，修改很频繁，那么这么设置的弊病就出来了。需要花费很多功夫。

2、为了有效解决这个问题，于是下面的方案就出来了。

操作步骤如下：

1、在二维和三维初始化弹窗的时候，随意设置一个宽度和高度，建议设置成小尺寸即可。

1 popup = new SuperMap.Popup.Anchored(
2                      "chicken",
3                       marker.getLonLat(),
4                       new SuperMap.Size(10,10),
5                       "<iframe frameborder=no border=0  src='http://www.baidu.com' style='width:100%;height:100%;border:none;' border='0'></iframe>",
6                       icon,
7                       true,
8                       null
9              );

二维操作

1 bubble.set_height(10);
2 bubble.set_width(10);

三维操作

2、设置弹窗中显示页面的body的style，设置width和height，根据页面内容多少对应设置对应width和height。

1 <body style="padding:15px;width:320px;height:380px;">

页面代码示例

3、在弹窗中显示页面加载之后，调用地图和三维场景的弹窗对象，重新设置弹窗的width和height。

 1 /**
 2  * 本js用于地图或者场景弹窗中嵌入iframe页面后，弹窗根据iframe内容自动缩放大小。
 3  * 注意：嵌入页面需要设置body的width,并且嵌入页面需要引入本js
 4  */
 5 function resizePop(){
 6     /// 查找对应的iframe
 7     var _iframe;
 8     var _frames=parent.$("iframe");
 9     for(var i=0;i<_frames.length;i++){
10         if(_frames[0].src.match(location.herf)){
11             _frame=_frames[i];
12         }
13     }
14     
15     if(parent["_map"]){// map对象存在
16         
17         var _popArray=parent._map.popups;
18         for(var i=0;i<_popArray.length;i++){
19             var _pop=_popArray[i];
20             
21             /// 判断寻找对应的pop
22             if($(_frame).parent().attr("id").split("_")[0]===_pop.id){
23                  _pop.setSize(new parent.SuperMap.Size($(document.body).outerWidth(),$(document.body).outerHeight()));
24             }
25         }
26     }else if(parent.window["sceneControl"]){// 3d不存在
27         var _bubble=parent.bubble;
28         var _padding_L=Number($(document.body).css("padding-left").replace("px",""));
29         var _padding_R=Number($(document.body).css("padding-right").replace("px",""));
30         var _padding_B=Number($(document.body).css("padding-bottom").replace("px",""));
31         var _padding_T=Number($(document.body).css("padding-top").replace("px",""));
32         
33         _bubble.set_clientWidth($(document.body).width()+12+_padding_L+_padding_R);
34         _bubble.set_clientHeight($(document.body).height()+12+_padding_B+_padding_T);
35     }
36 }
37 
38 $(document).ready(function(){
39     resizePop();
40 });

示例代码

注：代码为开发环境配置，未做处理，不一定适合测试，仅供参考

此种方案处理评价：

优点：每次修改弹窗信息页面显示内容的时候，不论增加还是减少内容，修改完毕后，对应修改页面body的style即可。而不用去查找调用弹窗的代码。修改信息，本身就在信息页面操作，操作完毕后，顺手改了宽度和高度即可。

缺点：每次弹窗弹出来的时候，会有一个弹窗由小变大的一个效果。

转载于:https://www.cnblogs.com/sunflowerGIS/p/5718803.html

weixin_30361753

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
SuperMap 二维地图和三维场景弹窗窗口大小控制

注：此处所说的弹窗窗口，主要指的是那些弹窗窗口中嵌入iframe，包含信息页面的窗口大小控制。1、首先来了解下 SuperMap 示例中的处理方案二维的处理方式 1 //初始化Anchored类 2 　　　　　　popup = new SuperMap.Popup.Anchored( 3 "chicken", 4 ...
复制链接

扫一扫