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即可。而不用去查找调用弹窗的代码。修改信息,本身就在信息页面操作,操作完毕后,顺手改了宽度和高度即可。
缺点:每次弹窗弹出来的时候,会有一个弹窗由小变大的一个效果。
SuperMap 二维地图和三维场景弹窗窗口大小控制的更多相关文章
- 寻路优化(一)——二维地图上A*启发函数的设计探索
工作中需要优化A*算法,研究了一天,最后取得了不错的效果.看网上的朋友还没有相关的研究,特此记录一下.有错误欢迎大家批评指正.如需转载请注明出处,http://www.cnblogs.com/Leon ...
- TurboCAD Pro for Mac(二维绘图和三维建模工具)破解版安装
1.软件简介 TurboCAD Pro 是 macOS 系统上一款二维绘图和三维建模工具,具备强大的绘图和设计特性,加上强大的创建复杂的三维模型的工具,三维 OpenGL 的渲染,和超过 11, ...
- php基础------将二维数组转三维数组
将二维数组转为三维数组 /** * 二维数组转三维数组(指定键为三维数组的键名) * @param [type] $arr [要排序的数组] * @param [type] $key [指定的键] * ...
- openGL实现二维图形和三维图形
openGL是一个强大的底层图形库,其命令最初的时候使用C语言实现的.openGL定义了一个图形程序接口,常用于制作处理三维图像,功能强大,调用方便,在图像处理十分受欢迎. 实现图形主要使用的是ope ...
- UWP开发-二维变换以及三维变换
在开发中,由于某些需求,我们可能需要做一些平移,缩放,旋转甚至三维变换,所以我来讲讲在UWP中这些变换的实现方法. 一. 二维变换: UIElement.RenderTransform a.Trans ...
- 寻路优化(二)——二维地图上theta*算法的设计探索
这篇文章是基于上一篇文章的研究上进行的,使得路径更加的平滑和自然,特此记录.有错误欢迎大家批评指正.如需转载请注明出处,http://www.cnblogs.com/Leonhard-/p/68660 ...
- matlab 画二维图与三维图
二维图 ezplot('sin(x)');%默认范围 ezplot('sin(x)',[-4 4]);%自己设定范围 三维图 ezmesh('x*x+y*y');%默认范围
- 卷积神经网络(CNN)之一维卷积、二维卷积、三维卷积详解
作者:szx_spark 由于计算机视觉的大红大紫,二维卷积的用处范围最广.因此本文首先介绍二维卷积,之后再介绍一维卷积与三维卷积的具体流程,并描述其各自的具体应用. 1. 二维卷积 图中的输入的数据 ...
- 数组(Array),二维数组,三维数组
数组(Array):相同类型数据的集合就叫做数组. (一)定义数组的方法: A) type[] 变量名 = new type[数组中元素的个数] 例如: int[] a = new int[10] ; ...
随机推荐
- Java中的Volatile和synchronized的区别
Synchronized和Volatile四个不同点: 1.粒度不同,前者锁对象和类 ,后者针对变量2.syn阻塞,volatile线程不阻塞3.syn保证三大特性,volatile不保证原子性4.s ...
- centos/rhel 7 几个最重要变化(systemd,firewalld,networkmanager,文件系统)
详细参考:https://access.redhat.com/documentation/en-US/Red_Hat_Enterprise_Linux/7/html/System_Administra ...
- Spring是如何处理注解的
如果你看到了注解,那么一定有什么代码在什么地方处理了它. Alan Hohn 我教Java课程时强调的一点是注解是惰性的.换句话说,它们只是标记,可能具有某些属性,但没有自己的行为.因此,每当你在一段 ...
- linux 压缩工具
gzip gunzip zcat bzip2 bunzip2 bzcat xz unxz xzcat a: gzip 用法 # gzip file 压缩文件 不会保留源文件 直接生成 file.g ...
- Ant build.xml详解
Ant的概念 可能有些读者并不连接什么是Ant以及入可使用它,但只要使用通过Linux系统得读者,应该知道make这个命令.当编译Linux内核及一些软件的源程序时,经常要用这个命令.Make命令其实 ...
- topcoder srm 475 div1
problem1 link 暴力枚举$r$只兔子的初始位置,然后模拟即可. problem2 link 假设刚生下来的兔子是1岁,那么能够生小兔子的兔子的年龄是至少3岁. 那么所有的兔子按照年龄可以分 ...
- topcoder srm 425 div1
problem1 link 暴力搜索即可. problem2 link 可以将每次所有的piece的位置看作一个状态,由于$C_{25}^{5}=53130$,所以最多有这么多状态.这里可以加一些优化 ...
- windows进程中的几个杂项-hpguard 进程终止
打印机后台进程 c:\windows\system32\spool printers,servers, tool等, 清空printers中的内容就可以正常打印; 锐爽的后视镜跟其他的车型的后视镜不一 ...
- Java中 System.arraycopy() 和 Arrays.copyOf()方法
System.arraycopy() 和 Arrays.copyOf()方法 阅读源码的话,我们就会发现 ArrayList 中大量调用了这两个方法.比如:我们上面讲的扩容操作以及add(int in ...
- How can I move a MySQL database from one server to another?
My favorite way is to pipe a sqldump command to a sql command. You can do all databases or a specifi ...