SuperMap 二维地图和三维场景弹窗窗口大小控制
2024-10-16 09:20:59
注：此处所说的弹窗窗口，主要指的是那些弹窗窗口中嵌入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即可。而不用去查找调用弹窗的代码。修改信息，本身就在信息页面操作，操作完毕后，顺手改了宽度和高度即可。
缺点：每次弹窗弹出来的时候，会有一个弹窗由小变大的一个效果。
最新文章
- Winform窗体事件发生顺序
- coreData旧版本增加字段,新版本是否可以继续使用旧版本内容的测试(MagicalRecord的使用)
- wordpress可视化编辑器的开启/关闭
- GCD - Extreme (II)
- shell 中最常使用的 FD (file descriptor)
- [转载] Linux的Top命令解析
- px-rem自适应转换
- [国嵌攻略][182][Sqlite嵌入式数据库移植]
- BZOJ 1485: [HNOI2009]有趣的数列 [Catalan数 质因子分解]
- $.ajax居然触发popstate事件?
- apt-get install 出问题怎么办？
- Entity Framework Code First 学习日记（1）精
- windows下多tomcat部署
- requirejs模块路径配置问题
- pycharm如何解决新建的文件没有后缀的问题
- 误删除innodb ibdata数据文件 文件句柄 文件描述符 proc fd
- 继承映射中的java.lang.IllegalArgumentException: org.hibernate.hql.internal.ast.QuerySyntaxException: person is not mapped [FROM person]
- 轻量级分布式文件系统FastDFS使用安装说明手册（新手入门级）
- 对微服务API服务网关的理解
- java的锁机制，synchronize与Lock比较