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

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

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

二维的处理方式

 //初始化Anchored类
 　　　　　　popup = new SuperMap.Popup.Anchored(
                     "chicken",
                     marker.getLonLat(),
                     new SuperMap.Size(220,140),
                     "<iframe frameborder=no border=0  src='http://www.baidu.com' style='width:100%;height:100%;border:none;' border='0'></iframe>",
                     icon,
                     true,
                     null
             );

             infowin = popup;
             //添加弹窗到map图层
             map.addPopup(popup);

二维弹窗处理方式

三维的处理方式

 function createBubble(pos){
         try{
                 bubble = new SuperMap.Web.Realspace.Bubble();
                 bubble.set_pointer(pos);

                 //设置气泡标题内容
                 var title = document.getElementById("TitleName").value;
                 if (title != null) {
                     bubble.set_title(title);
                 }

                 var textStyle3D = new SuperMap.Web.Core.TextStyle3D();

                 //设置气泡标题对齐方式
                 var textAligns = document.getElementById("TextAlign");
                 for(var i=0;i<textAligns.length;i++)
                 {
                      if (textAligns[i].selected) {
                         textStyle3D.set_alignment(textAligns[i].value);
                     }
                 }
                 //设置标题文本字体
                 var fontNames = document.getElementById("FontName");
                 for(var i=0;i<fontNames.length;i++){
                     if (fontNames[i].selected) {
                         var selectValue = fontNames[i].value;
                         if (selectValue == 1) {
                             textStyle3D.set_fontName("微软雅黑");
                         }
                         else if (selectValue == 2) {
                             textStyle3D.set_fontName("宋体");
                         }
                         else if (selectValue == 3) {
                            textStyle3D.set_fontName("隶书");
                         }
                     }
                 } 

                 //设置标题字体颜色
                 var fontColors = document.getElementById("FontColor");
                 for(var i = 0;i<fontColors.length;i++){
                     if (fontColors[i].selected) {
                         var selectColor = fontColors[i].value;
                         switch(selectColor) {
                         case "Red":
                             textStyle3D.set_foreColor(new SuperMap.Web.Core.Color(255,0,0,100));
                             break;
                         case "Green":
                             textStyle3D.set_foreColor(new SuperMap.Web.Core.Color(0,255,0,100));
                             break;
                         case "Blue":
                             textStyle3D.set_foreColor(new SuperMap.Web.Core.Color(0,0,255,100));
                             break;
                         default:
                             bubble.set_backColor(new SuperMap.Web.Core.Color(0,0,0,255));
                             break;
                         }
                     }
                 } 

                 bubble.set_titleTextStyle3D(textStyle3D);                      

                 //设置气泡边框宽度
                 var frameWidth = document.getElementById("FrameWidth").value;
                 if (frameWidth != null) {
                     bubble.set_frameWidth(frameWidth);
                 }

                 //设置气泡圆角程度
                 var roundQuality = document.getElementById("RoundQuality").value;
                 if (roundQuality != null) {
                     bubble.set_roundQuality(roundQuality);
                 }

                 //设置边框颜色
                 var frameColors = document.getElementById("FrameColor");
                 for(var i = 0;i<frameColors.length;i++){
                     if (frameColors[i].selected) {
                         var selectColor = frameColors[i].value;
                         switch(selectColor) {
                         case "Red":
                             bubble.set_backColor(new SuperMap.Web.Core.Color(255,0,0,100));
                             break;
                         case "Green":
                             bubble.set_backColor(new SuperMap.Web.Core.Color(0,255,0,100));
                             break;
                         case "Blue":
                             bubble.set_backColor(new SuperMap.Web.Core.Color(0,0,255,100));
                             break;
                         default:
                             bubble.set_backColor(new SuperMap.Web.Core.Color(255,255,255,255));
                             break;
                         }
                     }
                 }
                 bubble.set_frameColor(new SuperMap.Web.Core.Color(255,255,255,255));    

                 bubble.set_height(400);
                 bubble.set_width(500);

                 sceneControl.get_bubbles().removeAll();
                 sceneControl.get_bubbles().add(bubble);
             }
         catch(e){
             alert("创建气泡失败");
         }
     }

     function bubbleInitialize(bubble){
         try
         {
             var frameInfo = document.getElementById("infoWindow");
             frameInfo.style.display = "block";
             frameInfo.src = infoPage;            

             frameInfo.frameborder = 0;
             frameInfo.style.marginwidth = 0;
             frameInfo.style.marginheight = 0;

             frameInfo.style.width = bubble.get_clientWidth()+"px";
             frameInfo.style.height = bubble.get_clientHeight()+"px";
             frameInfo.style.left = bubble.get_clientLeft() + sceneControl.get_controlOffsetX()+"px";
             frameInfo.style.top = bubble.get_clientTop() + sceneControl.get_controlOffsetY()+"px";
         }
         catch(e){
             alert("Faile to initialize bubble");
         }
     }

     function bubbleResize(bubble){
         try
         {
             var frameInfo = document.getElementById("infoWindow");
             frameInfo.style.display = "block";
             frameInfo.src = infoPage;

             frameInfo.style.width = bubble.get_clientWidth()+"px";
             frameInfo.style.height = bubble.get_clientHeight()+"px";
             frameInfo.style.left = bubble.get_clientLeft() + sceneControl.get_controlOffsetX()+"px";
             frameInfo.style.top = bubble.get_clientTop() + sceneControl.get_controlOffsetY()+"px";
         }
         catch(e)
         {
             alert("Failed to resize bubble");
         }
     }

     //关闭气泡
     function bubbleClose(bubble){
         try
         {
             var frameInfo = document.getElementById("infoWindow");
             frameInfo.style.display = "none";

             var selection3Ds = scene.findSelection3Ds(true);
             if (selection3Ds.length > 0) {
                 for(var i = 0; i <= selection3Ds.length - 1; i++){
                     selection3Ds[i].removeAll();
                 }
             }
         }
         catch(e){
             alert("Failed to close bubble");
         }
     }

三维弹窗处理方式

示例处理方式评价：

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

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

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

操作步骤如下：

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

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

二维操作

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

三维操作

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

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

页面代码示例

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

 /**
  * 本js用于地图或者场景弹窗中嵌入iframe页面后，弹窗根据iframe内容自动缩放大小。
  * 注意：嵌入页面需要设置body的width,并且嵌入页面需要引入本js
  */
 function resizePop(){
     /// 查找对应的iframe
     var _iframe;
     var _frames=parent.$("iframe");
     for(var i=0;i<_frames.length;i++){
         if(_frames[0].src.match(location.herf)){
             _frame=_frames[i];
         }
     }

     if(parent["_map"]){// map对象存在

         var _popArray=parent._map.popups;
         for(var i=0;i<_popArray.length;i++){
             var _pop=_popArray[i];

             /// 判断寻找对应的pop
             if($(_frame).parent().attr("id").split("_")[0]===_pop.id){
                  _pop.setSize(new parent.SuperMap.Size($(document.body).outerWidth(),$(document.body).outerHeight()));
             }
         }
     }else if(parent.window["sceneControl"]){// 3d不存在
         var _bubble=parent.bubble;
         var _padding_L=Number($(document.body).css("padding-left").replace("px",""));
         var _padding_R=Number($(document.body).css("padding-right").replace("px",""));
         var _padding_B=Number($(document.body).css("padding-bottom").replace("px",""));
         var _padding_T=Number($(document.body).css("padding-top").replace("px",""));

         _bubble.set_clientWidth($(document.body).width()+12+_padding_L+_padding_R);
         _bubble.set_clientHeight($(document.body).height()+12+_padding_B+_padding_T);
     }
 }

 $(document).ready(function(){
     resizePop();
 });

示例代码

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

此种方案处理评价：

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

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