根据字段设置专题图操作手册

概述

在数据处理的过程中，常常存在需要根据某一字段，按照一定的标准将该字段的属性值分段统计的情况。此时，用不同的颜色表示该字段的不同取值范围，会让该属性各个分段的取值量和地理空间分布情况显得更加一目了然。如：某一城市超高楼层的数量和分布情况，城市土地的利用情况等，利用专题图，可以更加方便地进行数据空间分布统计。

目前，SuperMap iClient3D for WebGL支持了根据指定字段名称查询字段属性，并且支持根据字段属性中选定的值设置其特征。

本文档将依照范例的效果,详细说明如何实现根据字段设置专题图效果。其主要操作流程如下：

数据准备
生成白模缓存
发布三维服务
客户端加载数据
设置专题图

操作流程

下面将以重庆部分建筑数据为例，演示专题图的生成过程。

1.数据准备

操作步骤：

（1）在SuperMap桌面产品（以下简称桌面）中新建球面场景，打开矢量数据集（若您拿到的是白模缓存且属性存储类型为“ATTRIBUTE”，可直接跳转至3.发布三维服务）：

图1: 矢量数据集示意图

（2）在工作空间管理器中，在数据源下单击拟生成白模缓存的数据集，右键，选择“浏览属性表”，浏览拟生成专题图的字段的值，对其缺省值或者明显不对的值进行处理。

若需要增加字段，则在工作空间管理器中，单击选择数据集，右键选择“属性”，在右侧的属性编辑框中选择“属性表”，单击“+”号，此时就新建了一个字段，对其名称和类型等进行编辑，数据类型选择“文本型”，完成后点击“应用”，将新建的字段应用到数据集中。

图2: 添加属性字段示意图

2.生成白模缓存

操作步骤

(1). 在“三维数据”选项卡中的“生成缓存”组中，单击“面拉伸生成模型缓存”按钮，此时会弹出一个提示框，为了保证缓存生成效率，建议点击“是”。

图3(a),图3(b): 生成矢量白模功能示意图

(2). 然后弹出“面拉伸生成模型缓存”对话框,如下图所示。

图4: 面拉伸生成模型缓存

单击“添加数据集”按钮，选择要生成缓存的数据集，即上文处理好的数据集。

参数设置：

缓存名称：设置生成的缓存的名称。
缓存路径：设置生成的缓存的存储路径。
S3M版本：若您后续需要选择值为字符串类型的字段设置专题图，此处请选择S3M2.0。
文件处理类型：请根据需要选择是“替换”还是“追加”。
属性存储类型：请选择“ATTRIBUTE”这样在web端才支持根据指定属性字段设置专题图。
瓦片边长：设置生成的缓存的切片边长，数据的地理范围越大，切片也应相应地增大。
拉伸高度：选择生成的白模缓存的拉伸高度所依据的字段，一般选择建筑高度。
若后续要为白模设置边框线，请勾选“轮廓线”
若需要建筑白模分层，请勾选“分层”，并为不同的参数选择相应的字段。

生成的缓存结果如下图所示：

图5: 生成的缓存示意图

此时，可在桌面中查看生成好的白模缓存：

图6: 白模缓存

3.发布三维服务

在桌面中配置工作空间，在SuperMap iServer中发布为三维服务。具体过程可参考倾斜摄影模型单体化与属性查询操作手册中“发布三维服务和数据服务”部分的说明。

4. 客户端加载数据

操作说明

在此步骤加载发布的三维服务，并为数据设置初始化风格。

通过下列代码加载服务：

					viewer.scene.addS3MTilesLayerByScp(URL_CONFIG.SCP_JINJIANG, {
						name: 's3m'
					});

设置加载时的初始化风格，下面的代码为白模设置黑色的边框：

					
					for (var j = 0; j < layers.length; j++) {
   					_layers = layers;
					layers[j].indexedDBSetting.isGeoTilesRootNodeSave = true;//本地缓存根节点
					layers[j].residentRootTile = true;// 根节点驻留内存
   					_layers[j].style3D.fillStyle = SuperMap3D.FillStyle.Fill_And_WireFrame;
    					_layers[j].style3D.lineWidth = 1.0;
    					_layers[j].style3D.lineColor = new SuperMap3D.Color(0, 0, 0, 1);
   					_layers[j].wireFrameMode = SuperMap3D.WireFrameType.EffectOutline;  //草图模式，即线框
					}

在前端加载的效果如图7所示：

图7：给白模设置线框

5. 设置专题图

操作说明

根据字段的不同属性值设置专题图的风格，如下列代码将楼层字段的不同值设置不同的颜色，当然，也可以重新设置模型的边框线样式。

					var colorConditions1 = [];
					colorConditions1.push(['${Floors} < 10','rgb(204,204,0)']);
					colorConditions1.push([' ${Floors} >= 20','rgb(102,204,255)']);
					colorConditions1.push([' ${Floors} >= 10 && ${Floors}<20','rgb(255,102,0)']);
					colorConditions1.push(['true', 'rgb(255,255,255)']);
					_layers[j].themeStyle = setCesium3DTileStyle(colorConditions1);

效果如图8所示：

图8：根据楼层高度设置专题图效果示意图

若您想根据字符串类型的字段来设置专题图，可使用以下方式设置风格：

        	//默认是layer.indexedDBSetting.isAttributesSave=true，会开启图层的全部属性字段下载，数据量大会影响性能
                _layers[j].queryFieldNames = ['Floors', 'LandUse'];//指定仅下载需要的属性字段，提升性能；桌面缓存生成时，“属性存属类型”需要选择ATTRIBUTE才支持
                colorConditions2.push(['${LandUse} === "住宅"', color4]);
                colorConditions2.push(['${LandUse} === "商业用地"', color5]);
                colorConditions2.push(['true', 'rgb(255,255,255)']);

效果如图9所示：

图9：根据建筑高度设置专题图效果示意图