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

背景需求

在数据处理的过程中，常常存在需要根据某一字段，按照一定的标准将该字段的属性值分段统计的情况。

如果用不同的颜色表示该字段的不同取值范围，会让该属性各个分段的取值量和地理空间分布情况显得更加一目了然。如：某一城市超高楼层的数量和分布情况，城市土地的利用情况等，利用专题图，可以更加方便地进行数据空间分布统计。

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

本文档将介绍如何实现根据字段设置专题图效果，其主要操作流程如下：

数据处理
发布服务
在SuperMap iClient3D for WebGL/WebGPU中加载

其中涉及的产品有：SuperMap iDesktopX、SuperMap iServer、SuperMap iClient3D for WebGL/WebGPU。

操作流程

下面将以某部分建筑矢量面数据为例，介绍专题图的设置过程。

1、数据处理

（1）在SuperMap iDesktopX 中新建球面场景，打开矢量数据集（若是白模瓦片且属性存储类型为ATTRIBUTE，可直接跳转至发布三维服务部分）。

（2）在工作空间管理器中，数据集右键，选择浏览属性表，浏览将生成专题图的字段的值，对其缺省值或者明显不对的值进行处理。

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

对属性表的操作请参考SuperMap iDesktopX帮助文档浏览属性表。

（4）选择三维数据→生成瓦片→面拉伸生成模型瓦片，在弹出面板中单击添加数据集，选择上一步处理好的数据集，单击生成按钮，执行瓦片生成操作。

参数设置参考如下：

瓦片名称：设置生成的瓦片的名称。
瓦片路径：设置生成的瓦片的存储路径。
S3M版本：若您后续需要选择值为字符串类型的字段设置专题图，此处请选择S3M2.0及以上版本。
文件处理类型：请根据需要选择是替换还是追加。其中，追加模式不支持设置分层。
属性存储类型：请选择ATTRIBUTE后续在SuperMap iClient3D for WebGL/WebGPU加载才能根据指定属性字段设置专题图。
瓦片边长：显示和设置瓦片边长的大小，单位为米。瓦片边长大小不同则对应的比例尺不同。
拉伸高度：选择生成的白模瓦片的拉伸高度所依据的字段，一般选择建筑高度。
若后续要为白模设置边框线，请勾选轮廓线
若需要建筑白模分层，请勾选分层，并为不同的参数选择相应的字段。

详细操作，请参考 SuperMap iDesktopX 帮助文档面拉伸生成模型瓦片。

2、发布服务

（1）在SuperMap iDesktopX的工作空间管理器中，在场景下右键点击新建球面场景。

（2）图层管理器选中普通图层，右键点击添加三维瓦片图层，选择上一步骤生成的*.scp文件。

（3）添加瓦片图层后，保存场景和工作空间，该工作空间文件将用于发布工作空间类型的三维服务。

（4）保存工作空间后，在SuperMap iServer_HOME/bin 目录下，点击startup.bat批处理文件，启动SuperMap iServer服务。

（5）打开浏览器，地址栏输入http://localhost:8090/iserver/manager 进入服务管理页面，点击快速发布一个或一组服务按钮。

（6）弹出快速发布服务-选择发布的数据来源对话框，在数据来源处选择工作空间，点击下一步。

（7）弹出快速发布服务-配置数据对话框，点击远程浏览按钮选择前述所保存的工作空间，点击下一步。

（8）弹出快速发布服务-选择发布的服务类型对话框，勾选REST-三维服务，点击下一步。

如有疑问请参考SuperMap iServer帮助文档发布文件型工作空间。

3、在SuperMap iClient3D for WebGL/WebGPU中加载

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

（1）通过下列代码加载服务：

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

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

	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;  //草图模式，即线框
	}

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

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

效果如下：

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

	//默认是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)']);

效果如下：

如有疑问请参考范例：字段专题图。