概述
在上一节的内容中,我们实现了加载默认的场景。但是对于实际应用而言这是远远不够的,我们还需加载实际的数据。
客户端的数据主要来源于服务器,因此在本节内容中,我们以从服务器端获取所需要的场景为例说明如何加载场景及场景所有的图层,在下一节的内容中示范如何打开场景中的指定图层。
在三维系统中,场景就相当于二维系统的地图,而场景中的图层也就相当于二维系统中地图的图层。 三维场景类(Scene)的主要任务就是装载二维和三维地图数据。利用三维场景类(Scene)能够加载三维图层(Layer3D)和地形图层(TerrainLayer)。在一个三维场景对象中可以包含多个 Layer3D 类型的图层和地形图层 TerrainLayer,它们分别由三维图层集合 Layer3Ds 和地形图层集合 TerrainLayers 管理。
在本节中我们介绍如何利用三维场景类(Scene)加载服务器端的场景服务。
Scene 三维场景结构图
Scene 常用属性
|
接口 |
说明 |
|
camera |
获取或设置当前场景的相机对象,相机相当于视点。 |
|
currentScale |
获取当前场景的比例尺。 |
|
flyingOperator |
获取当前场景的飞行操作对象。该属性主要用于设置场景的飞行状态,指定飞向下一个场景的方位、控制飞行方式以及飞行动画。 |
|
layer3Ds |
获取三维图层集合对象。 |
|
name |
获取或设置场景的名称。 |
|
sceneOption |
获取场景中各种界面元素的可见性的集合,如经纬网、大气层等界面元素的可见性。 |
|
screenLayer3D |
获取场景中的屏幕图层。 |
|
terrainExaggeration |
获取或设置地形夸大的比例。地形夸大是将地形的高按一定比例进行拉伸。 |
|
terrainLayers |
获取三维场景中的地形图层集合。 |
|
trackingLayer3D |
获取场景中的跟踪图层。 |
Scene 常用方法
|
接口 |
说明 |
|
close |
关闭三维场景中加载的当前场景的所有图层。 |
|
findSelection3Ds |
查找当前三维场景中图层的选择集。该方法返回的是 Selection3D 类对象的数组,每一个 Selection3D 类对象对应三维场景中一个图层中所有处于选中状态的对象集合,若没有对象处于选中状态,则数组为空。 |
|
getAverageFPS |
获取渲染当前场景的平均帧数。 |
|
open |
打开指定场景及场景中的所有图层。加载指定场景时,同时加载场景的环境变量包括环境光,背景光,地形夸张系数,相机,雾效,星空,大气层,经纬网等以及场景中的图层数据。 |
|
refresh |
刷新三维场景。 |
|
resetTerrain |
重置地形图层。对地形图层进行增、删、可见不可见设置时都需要调用此函数刷新地形显示。 |
|
save |
保存当前场景配置为 GML 标准的 XML 文件,并上传到服务器。 |
|
setRefreshRaster |
设置实时栅格化是否刷新。在三维系统中如果出现栅格数据显示问题,可以调用该函数仅刷新栅格数据的显示。 |
|
viewEntire |
全幅显示三维地图场景。 |
SceneServicesList 场景服务列表信息类结构图
SceneServicesList 常用属性
|
接口 |
说明 |
|
count |
获取场景列表中场景服务的总数。 |
|
item |
获取场景列表中指定场景索引号(Nember 类型)或者名称(String 类型)的场景服务信息。 |
|
serverAddress |
获取提供场景服务列表的服务器地址。 |
SceneServicesList 常用方法
|
接口 |
说明 |
|
load |
获取所有场景服务列表。 |
|
removeAll |
删除场景服务列表中所有场景服务信息。 |
获取场景服务,添加场景服务中所有图层
- 在 “default.html” 页面的 <body onLoad="onPageLoad()"> </body>中,在场景控件前加入以下代码,实现在系统界面中添加服务器地址输入框和场景服务列表,其中场景服务列表列出了指定服务器提供了哪些场景服务:
-
JavaScript |
|
<!--信息窗-->
<div id="infoWindow" style=" left:0px; top:0px; width: 20%; visibility: visible; display: block; float: left; clear: both; cursor: auto; overflow: auto; position: relative; height: 100%; background-color:#B6D6EF; font-family: 仿宋_GB2312;">
<!--服务器地址输入框-->
<p><label for="input">服务器地址: </label></p>
<!--在本行中 value 后面的值是请求的服务器地址,这个值需要用户根据实际的服务进行修改-->
<p> <input id="ServerAddress" name="ServerAddress" type="text" value="http://localhost:8090/iserver/services/3D-sample/rest/realspace" /> </p>
<!--场景场景服务列表-->
<p><label for="sceneList" >场景服务列表:</label></p> <p><select id="SceneList" name="SceneList" ></select></p>
<p><input id="SceneLoad" type="button" value="加载场景" onClick="return SceneLoad_onclick()" /></p> <p><input id="SceneOpen" type="button" value="打开所有图层" onClick="return SceneOpen_onclick()" /></p> </div>
|
- 在 “GettingStarted.js” 文件的头部添加添加以下代码,声明全局变量:
-
JavaScript |
|
var sceneAddress = null;
var sceneName = null;
|
- 在 “GettingStarted.js” 文件的控件初始化完成后的回调函数 initCallback 函数体中的已有代码后面添加以下代码,实现从指定服务器获取场景列表:
-
JavaScript |
|
sceneAddress = document.getElementById("ServerAddress").value; var sceneServicesList = sceneControl.get_sceneServicesList();
//从输入框中获取到服务器地址,并加载服务器上的场景列表
var bLoad = sceneServicesList.load(sceneAddress);
//如果场景服务加载成功,则获取每个场景的名字
if (bLoad)
{
var sceneList = document.getElementById("SceneList");
if (sceneList.length > 0)
{
sceneList.length = 0;
}
//获取场景列表中有多少条记录,即服务器提供了多少个场景服务
var count = sceneServicesList.get_count();
//在场景服务列表的下拉框中罗列出服务器提供的所有场景服务
for(var i=0; i<count; i++)
{
var oPtion = document.createElement("option");
oPtion.value = sceneServicesList.get_item(i).get_name();
oPtion.text = oPtion.value;
//默认选中第一个场景服务
if (i == 0)
{
oPtion.selected = true;
}
sceneList.options.add(oPtion);
}
}
|
- 当用户在界面中选择某个场景服务时,点击 “加载场景” 按钮,实现加载指定场景加载。在 “GettingStarted.js” 尾部添加以下代码:
-
JavaScript |
|
function SceneLoad_onclick()
{
//获取输入框中的服务器地址
sceneNames = document.getElementById("SceneList");
//遍历所有的场景服务名,判断当前被选中的场景名称,然后打开指定场景
for(var i=0; i<sceneNames.length; i++)
{
if(sceneNames.options[i].selected == true)
{
sceneName = sceneNames.options[i].value;
alert("The "+sceneName+" on the "+sceneAddress+" is loaded!");
}
}
}
|
- 当打开指定场景服务后,点击 “打开所有图层” 按钮,实现打开指定场景中所有的图层。在 “GettingStarted.js” 尾部添加以下代码:
-
JavaScript |
|
function SceneOpen_onclick()
{
scene.open(sceneAddress,sceneName);
}
|
- 以下图片显示了打开"Scene"场景后的浏览效果,"Scene"场景中包含了矢量、影像、地形、KML 等图层:
-
图1 打开场景
图2 场景中的各种图层