三、加载三维图层

概述

在三维场景中可以直接打开三维场景中的所有图层，也可以打开场景中的指定的地形、影像、模型、矢量等图层。在 SuperMap iClient for 3D 中图层被分为六大类：地形影像图层、三维模型图层、影像图层、矢量图层、KML 图层和 KMZ 图层。

不同的图层有不同的加载方法，三维模型图层、影像图层、矢量图层、KML 图层和 KMZ 图层以 LayerD 类型加载，地形影像图层以 TerrainLayer 类型加载。在加载图层的时候，需要知道图层的类型、图层的名称及数据的路径，图层的这些信息都可以通过 Layer3DServicesList 类来获得。在 Layer3DServicesList 类中记录了服务端发布的全部三维图层集合服务及其三维图层集合中的各个图层的信息。

layer3DServicesList 图层服务列表信息类结构图

layer3DServicesList 常用属性

	接口	说明
	count	获取图层集合中图层服务的总数。
	item	获取三维图层集中指定图层索引号（Nember 类型）或者名称（String）类型的三维图层服务信息。
	sceneName	获取所属场景服务的名称。
	sceneAddress	获取图层集合的服务地址。

layer3DServicesList 常用方法

	接口	说明
	load	获取指定场景的图层集合服务列表。
	removeAll	删除图层服务集合中所有图层服务信息。

Layer3Ds 三维图层集合类结构图

Layer3Ds 常用属性

	接口	说明
	count	获取给定的三维图层集合中三维图层对象的总数。
	isVisible	获取或设置三维图层集合的可见性。
	item	获取三维图层集合中指定序号（Number 类型）或者指定图层名称（string 类型）的三维图层对象。如果指定索引的图层不存在则返回 Null。

Layer3Ds 常用方法

	接口	说明
	add	向三维图层集合中添加 3DImage、3DModel 和 KML 类型的三维图层。
	indexOf	在三维图层集合中查找指定图层名称的索引号。
	insert	向三维图层集合中指定位置插入 Image、Model 或 KML 类型的三维图层。
	moveDown	将三维图层集合中指定索引号的三维图层向下移动一层。
	moveTo	将三维图层集合中指定索引号的三维图层移动到指定索引号位置。
	moveToBottom	将三维图层集合中指定索引号的三维图层移动到底层。
	moveToTop	将三维图层集合中指定索引号的三维图层移动到顶层。
	moveUp	将三维图层集合中指定索引号的三维图层向上移动一层。
	removeAll	删除图层集合中的所有图层。
	removeAt	删除指定图层名称或索引号的图层。

TerrainLayers 地形图层集合类结构图

TerrainLayers 常用属性

	接口	说明
	count	获取给定的地形图层集合中地形图层对象的总数。
	item	获取地形图层集合中指定序号（Number 类型）或者指定图层名称（string 类型）的地形图层对象。

TerrainLayers 常用方法

	接口	说明
	add	向地形图层集合中添加地形图层。
	indexOf	在地形图层集合中查找指定图层名称的索引号。
	insert	向地形图层集合中指定位置插入地形图层。
	moveDown	将地形图层集合中指定索引号的图层向下移动一层。
	moveTo	将地形图层集合中指定索引号的图层移动到指定索引位置。
	moveToBottom	将地形图层集合中指定索引号的图层移动到底层。
	moveToTop	将地形图层集合中指定索引号的图层移动到顶层。
	moveUp	将地形图层集合中指定索引号的图层向上移动一层。
	removeAll	删除地形图层集合中的所有图层。
	removeAt	删除指定图层名称或索引号的图层。

加载三维图层

添加加载图层的控件。在 “default.html” 页面的 <body onLoad="onPageLoad()"> </body>中，在场景控件前的</div>之内加入以下代码，实现在系统界面中添加图层服务列表，其中图层服务列表列出了指定的服务器场景服务中提供了哪些图层服务：

JavaScript

JavaScript
<!--场景图层列表-->`<p><label for="layersList" >场景图层列表：</label><br /></p><p><select id="LayersList" name="LayersList" ></select><br /></p><p><input id="LayerOpen" type="button" value="加载图层" onClick="return LayerOpen_onclick()" /></p>`

<!--场景图层列表-->
<p><label for="layersList" >场景图层列表：</label><br /></p>
<p><select id="LayersList" name="LayersList" ></select><br /></p>
<p><input id="LayerOpen" type="button" value="加载图层" onClick="return LayerOpen_onclick()" /></p>

在 “GettingStarted.js” 中的“function SceneLoad_onclick()”函数末尾填入以下代码，实现在加载场景服务时获取场景服务中提供的图层服务：

JavaScript
`LoadLayers();`

在 “GettingStarted.js” 中填入以下代码，实现获取指定场景服务中的所有图层服务：

JavaScript

JavaScript
`function LoadLayers() {` //从选中的场景中获取图层列表 `var layer3DServicesList = sceneControl.get_layer3DServicesList();` //判断是否获取指定场景的图层集合服务列表 `var bLayersLoad = layer3DServicesList.load(sceneAddress,sceneName);` //如果指定场景的图层服务加载成功，则获取每个场景图层的类型 `if(bLayersLoad) { var layersList = document.getElementById("LayersList"); if(layersList.length > 0) { layersList.length = 0; }` //该场景提供的图层服务信息的总数 `var count = layer3DServicesList.get_count(); for(var i=0; i<count; i++) {` //获取指定图层的信息，包括服务器地址、图层名和图层类型var layer3DServiceInfo = layer3DServicesList.get_item(i); var layer3DName= layer3DServiceInfo.get_name(); var layer3DType= layer3DServiceInfo.get_type(); var displayName = null; switch (layer3DType) { case 7: displayName="加载三维模型"; break; case 8: displayName="加载地形模型"; break; case 1: displayName="加载影像图层"; break; case 2: displayName="加载 KML 图层"; break; case 102: displayName="加载 KMZ 图层"; break; case 10: displayName="加载矢量图层"; break; default: displayName="空图层"; } var oPtion = document.createElement("option"); oPtion.value = displayName; oPtion.text = oPtion.value; //默认选中第一个图层服务`if (i == 0) { oPtion.selected = true; } layersList.options.add(oPtion); } } }`

function LoadLayers()
{
        //从选中的场景中获取图层列表
        var layer3DServicesList = sceneControl.get_layer3DServicesList(); 
        //判断是否获取指定场景的图层集合服务列表 
  var bLayersLoad = layer3DServicesList.load(sceneAddress,sceneName);
        //如果指定场景的图层服务加载成功，则获取每个场景图层的类型  
        if(bLayersLoad)
        { 
                var layersList = document.getElementById("LayersList");
                if(layersList.length > 0)
                {
                        layersList.length = 0;
                }
                //该场景提供的图层服务信息的总数 
          var count = layer3DServicesList.get_count(); 
                for(var i=0; i<count; i++)
                {
                        //获取指定图层的信息，包括服务器地址、图层名和图层类型
                  var layer3DServiceInfo = layer3DServicesList.get_item(i); 
                        var layer3DName= layer3DServiceInfo.get_name(); 
                        var layer3DType= layer3DServiceInfo.get_type(); 
                        var displayName = null;
                        switch (layer3DType)
                        {
                                case 7:
                                        displayName="加载三维模型";
                                        break;
                                case 8:
                                        displayName="加载地形模型";
                                        break;
                                case 1:
                                        displayName="加载影像图层";
                                        break;
                                case 2:
                                        displayName="加载 KML 图层";
                                        break;
                                case 102:
                                        displayName="加载 KMZ 图层";
                                        break;
                                case 10:
                                        displayName="加载矢量图层";
                                        break;
                                default:
                                        displayName="空图层";
                        } 
                        var oPtion = document.createElement("option");
                        oPtion.value = displayName;
                        oPtion.text = oPtion.value;
                        //默认选中第一个图层服务
                  if (i == 0)
                        {
                                oPtion.selected = true;
                        }
                        layersList.options.add(oPtion);
                }
        }
}

在 “GettingStarted.js” 中填入以下代码，实现打开场景服务中的指定图层服务：：

JavaScript

JavaScript
`function LayerOpen_onclick() { var layerTypes = document.getElementById("LayersList");` //遍历所有的图层服务名，判断当前被选中的图层名称，然后打开指定图层`for(var i=0; i<layerTypes.length; i++) { if(layerTypes.options[i].selected == true) { var layer3DServicesList = sceneControl.get_layer3DServicesList(); var layer3DServiceInfo = layer3DServicesList.get_item(i); var layer3DName= layer3DServiceInfo.get_name(); var layer3DDataName = layer3DServiceInfo.get_dataName(); var layer3DType= layer3DServiceInfo.get_type();` //打开指定的图层服务 //如果为地形数据，则使用 Terrainlayers 加载；如果为模型、KML 或影像图层则使用 Layer3Ds 加载。 `if(layer3DType == SuperMap.Web.Realspace.Layer3DType.TERRAIN) { var terrainLayers = scene.get_terrainLayers(); terrainLayers.add(sceneAddress, layer3DName, layer3DDataName); } else { var layer3ds = scene.get_layer3Ds(); layer3ds.add(sceneAddress, layer3DName, layer3DDataName, layer3DType); } } } }`

function LayerOpen_onclick()
{
        var layerTypes = document.getElementById("LayersList"); 
        //遍历所有的图层服务名，判断当前被选中的图层名称，然后打开指定图层
  for(var i=0; i<layerTypes.length; i++)
        {
                if(layerTypes.options[i].selected == true)
                {
                        var layer3DServicesList = sceneControl.get_layer3DServicesList(); 
                        var layer3DServiceInfo = layer3DServicesList.get_item(i);
                        var layer3DName= layer3DServiceInfo.get_name();
                        var layer3DDataName = layer3DServiceInfo.get_dataName();
                        var layer3DType= layer3DServiceInfo.get_type(); 
                        //打开指定的图层服务
                        //如果为地形数据，则使用 Terrainlayers 加载；如果为模型、KML 或影像图层则使用 Layer3Ds 加载。 
                  if(layer3DType == SuperMap.Web.Realspace.Layer3DType.TERRAIN)
                        { 
                                var terrainLayers = scene.get_terrainLayers(); 
                                terrainLayers.add(sceneAddress, layer3DName, layer3DDataName);
                        }
                        else
                        {
                                var layer3ds = scene.get_layer3Ds(); 
                                layer3ds.add(sceneAddress, layer3DName, layer3DDataName, layer3DType);
                        }
                }
        }
}

以下图片显示了加载场景后，没有选择打开所有图层，而加载了指定的图层的浏览效果，场景中包含了 KMZ 图层、KML 图层、矢量、影像图层和地形图层，但是只加载了影像图层:
图1 加载场景中的指定图层（影像图层）