2.19 网页窗口类（Window）

当用户需要在三维地图上进行弹窗展示，就需要用到网页窗口类。

网页窗口类是为了解决开发者自身网页元素，如div标签，不能覆盖在三维场景之上的问题所采用的技术手段，使用了IE内核的和Chromium内核的微型浏览器窗口，来加载开发者的网页，该窗口能时刻保持覆盖三维场景，因此可以实现开发者想要的效果。

网页窗口显示的内容，是url所指向的网页，如下图，创建了一个StaticWindow类型的窗口，设置其width及height值为“100%”，表示该窗口大小与地球窗口大小位置一致，实现了悬浮透明效果（透明效果是在url所指向的网页的样式中设置的）：

网页窗口类分为静态窗口（StaticPopWindow）及动态窗口（DynamicPopWindow）。

静态窗口在创建时就固定了其显示的位置，不随着三维地图场景内容变化而变化，一般适用于充当前端UI界面或者固定屏幕位置的信息展示。

动态窗口则由创建时的 position 属性确定其在三维场景中绑定的位置，当场景发生变化时，窗口也会发生移动。

注意：不推荐动态窗口和静态窗口同时使用，会发生UI遮盖现象，影响使用感官。如果想在创建静态弹窗的同时，实现动态气泡的效果，请参考下文中的第四小节，通过静态弹窗实现动态跟随标签效果。

浏览器内核

动态窗口仅支持IE内核模式，静态窗口可支持IE内核与Chromium内核模式。

browserType 属性可以指定使用何种浏览器内核来加载你的网页，因此你需要确保你的网页的兼容性，能正常运行在你所设置的浏览器内核中。

这里需要注意的是，使用IE内核窗口的情况下，通过 ieAlpha 属性来控制，对其设置半透明效果，是对网页整体元素生效的,如图：

对于这种效果不满意的开发者，可使用Chromium内核窗口，当使用这种方式时，ieAlpha 属性将失效，开发者只需通过css样式的透明属性来实现相应网页效果即可，无需关注窗口本身透明参数，如图：

网页窗口类具有添加、删除、更新的过程，可参考2.8 对象基本操作、2.9 空间分析绘制类（Analysis）。

注意：url属性不可更新，如需新的url地址，请删除窗口后再重新创建具有新url的网页窗口。

父子窗口交互

用户通过该功能将网页弹出在三维地图指定位置，通常来说，还需要两者进行交互，才能实现完整的弹窗功能。

在这里，为了方便说明，我们将弹窗窗口称之为子窗口，三维场景所在窗口为父窗口。

1.父窗口发送消息至子窗口

父窗口发送消息较为简单，通过如下代码：

window.update({
    //子窗口待触发的函数名
    trigger: "Test",
    //子窗口待触发的函数参数，如Test(1234)
    triggerParam: "1234"
});

在子窗口处理消息页面上，需指定响应的函数：

function Test(id) {
    console.log("你调用了Test: " + id);
}

你可以在Test函数中，通过id的区别，来实现不同的代码调用。

2.子窗口发送消息至父窗口

在创建子窗口时，需注意在建立父子窗口消息的绑定关系，如：

var window = new CooSDK.DynamicPopWindow({
    url: gPopHtmlUrl,
    position: new CooSDK.PositionObj(120.21874782, 30.2098158, 15),
    customCallback: {
         //123为子窗口待发送的消息id；getResult123为父窗口响应id为123的回调函数
         123: getResult123,
         //456为子窗口待发送的消息id；getResult456为父窗口响应id为456的回调函数
         456: getResult456
    }
});

父窗口的消息响应函数可以这么写，param为从子窗口传递过来的参数值：

 function getResult123(param){
     console.log("响应id为123，接受参数为：" + param);
 }

根据子窗口浏览器内核的不同，消息的触发方式也存在区别：

IE内核:

var id = "123";
var param = "something else";
window.external.PushData(id + "@" + param);

Chromium内核:

var id = 123;
var param = "something else";
window.PushData(id + "@" + param);

这里用‘@’符号进行响应id与参数的区分，如果没有传递参数，可以直接这么写：

var id = 123;

window.PushData(id);
//or
window.external.PushData(id);

只要父子窗口建立起上文的对应关系，就能进行交互。

3.子窗口内网页的调试

这一节至关重要，关系到子窗口内网页的调试，请仔细阅读。

目前仅支持Chromium内核的静态窗口调试。

首先，等待子窗口网页正常加载。

然后，打开Chrome浏览器，在地址栏输入http://localhost:18322，不出意外的话，会出现类似如下内容：

点击相关网址，会跳转到调试工具窗口，如图所示：

此时，原本弹窗上的UI已被远程调试窗口截获，其不具备响应能力，我们只需在远程调试窗口左侧页面上操作，就能正常调试子窗口的网页了。

4.通过静态弹窗实现动态跟随标签效果

目前仅支持Chromium内核的静态窗口。

在某些应用场景下，用户需要为场景的某些标志物绑定特定的标签或者窗口，该标签或窗口可跟着绑定的物体进行跟随移动。这里就介绍下具体的代码实现流程。

首先，我们需要创建一个ConversionObj对象，设置如下参数：

idArray：参数对应存有需要绑定的标签的标识id的数组，该标识id为用户自定义。

posArray：参数对应需要绑定的标签的经纬度位置的数组。

bRealtime：参数设置为true，则地图会按照一定的频率将传入的经纬度位置转换为屏幕坐标位置；设置为false，则不会触发计算及回调事件。

bKeepTrigger：参数设置为false，则在地图视点变化时触发回调事件；如设置为true，则每一帧都触发回调事件，考虑到实际使用情况，建议设置为false，减少资源占用。

callback：参数绑定回调事件，该事件会接收到地图按照一定频率返回的信息。 第二个参数为传回的屏幕坐标信息，字符串格式为"id:屏幕坐标x,屏幕坐标y;"，如："xxx:102,53;zzz:43,88;......"。用户可解析此信息，来指定div标签的位置。

接着，设置好如上参数后，每当事件触发，用户需要根据返回的屏幕参数，自行组织逻辑，根据业务需要展示动态标签。