作者：姜尔
一、功能介绍
本文主要介绍使用SuperMap iClient3D for WebGL加载SuperMap iDesktopX 场景中，场景美化功能结果。iDesktopX进行资产编辑，绘制区域。设置工程路径，保存美化结果，可以获得.instc以及.s3mb格式的实例化模型。在SuperMap iClient3D for WebGL中，通过接口instanceLayer.add/removeAll即可实现添加或删除实例图层 。
iDesktopX场景美化功能，支持替换材质类型为UE材质的S3M瓦片的材质（仅渲染引擎V2），实现数据美化；也支持在场景中批量添加植被或静态模型。通过场景美化功能，可以开启资产管理器。资产管理器支持查看和编辑材质、植被或静态模型。
- 材质：通过资产管理器的材质按钮，可以访问软件内置的材质库（存储路径：SuperMap iDesktopX安装路径\templates\Materials），包括混凝土、砖石、金属、塑料、石头等PBR（Physically Based Rendering，基于物理的渲染）材质。若需要在软件中使用更多其他材质素材，将其与默认材质放置在同一路径下即可。
- 植被：通过资产管理器的植被按钮可以访问软件内置的植被小品库（存储路径：SuperMap iDesktopX安装路径\templates\Assets\Plant\样例），包括法国梧桐、桦树等。若需要在软件中使用更多其他植被小品，将其与默认植被小品放置在同一路径下即可。
- 静态模型：通过资产管理器的静态模型按钮可以访问软件内置的模型小品库（存储路径：SuperMap iDesktopX安装路径\templates\Assets\Asset），包括人物、城市地块附属物、运动设施、道路附属物等。若需要在软件中使用更多其他小品，将其与默认静态模型放置在同一路径下即可。
- 具体iDesktopX功能使用详见其帮助文档：https://help.supermap.com/iDesktopX/zh/tutorial/SceneOperation/3DDesigner/ModelOperation/Materialmanager.html?rhsearch=%E5%9C%BA%E6%99%AF%E7%BE%8E%E5%8C%96&rhhlterm=%E5%9C%BA%E6%99%AF%E7%BE%8E%E5%8C%96
SuperMap iClient3D for WebGL中主要使用接口InstanceLayer实例化图层，具体接口方法说明详见：
二、主要代码接口
html
instanceLayer.add("./SUModelingWorkDir/Plant/Plant.instc");//添加实例化图层
instanceLayer.removeAll("./SUModelingWorkDir/Plant/Plant.instc");//删除实例化图层三、全部前端代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>地形影像</title>
<link href="../../Build/SuperMap3D/Widgets/widgets.css" rel="stylesheet">
<link href="./css/pretty.css" rel="stylesheet">
<script src="./js/jquery.min.js"></script>
<script src="./js/spectrum.js"></script>
<script type="text/javascript" src="../../Build/SuperMap3D/SuperMap3D.js"></script>
<script src="./js/config.js"></script>
</head>
<body>
<div id="Container"></div>
<div id="toolbar" class="param-container tool-bar">
<button id="batch">批量添加</button>
<button id="delete">删除</button>
</div>
<script>
function onload(SuperMap3D) {
var viewer = new SuperMap3D.Viewer('Container',{
contextOptions: {
contextType: Number(2) // Webgl2:2 ; WebGPU:3
},
orderIndependentTranslucency : false,
});
window.viewer = viewer;
viewer.scenePromise.then(function (scene) {
init(SuperMap3D, scene, viewer);
});
}
function init(SuperMap3D, scene, viewer) {
viewer.imageryLayers.addImageryProvider(new SuperMap3D.TiandituImageryProvider({
credit : new SuperMap3D.Credit('天地图全球影像服务 数据来源：国家地理信息公共服务平台 & 四川省测绘地理信息局'),
token: URL_CONFIG.TOKEN_TIANDITU
}));
const promise = viewer.scene.open("http://localhost:8090/iserver/services/3D-WorkSpace/rest/realspace");
viewer.scene.debugShowFramesPerSecond = true;
viewer.resolutionScale = window.devicePixelRatio;
viewer.scene.screenSpaceCameraController.zoomFactor = 1;
viewer.scene.screenSpaceCameraController.inertiaZoom = 0.1;
scene._performancePreferenceMode = 1
const instanceLayer = new SuperMap3D.InstanceLayer(scene._context);
scene.primitives.add(instanceLayer);
instanceLayer.minVisibleAltitude = 0;
instanceLayer.maxVisibleAltitude = 10000000;
instanceLayer.filterMode = 0;
instanceLayer.filterPixel = 0; // 对象过滤
instanceLayer.filterDistance = 8000;
instanceLayer.tileWidth = 5500;
instanceLayer.pickEnable = true;
window.instanceLayer = instanceLayer;
$("#batch").click(function() {
instanceLayer.add("./SUModelingWorkDir/Plant/Plant.instc")
});
$("#delete").click(function() {
instanceLayer.removeAll("./SUModelingWorkDir/Plant/Plant.instc");
});
}
if (typeof SuperMap3D !== 'undefined') {
window.startupCalled = true;
onload(SuperMap3D);
}
</script>
<script>document.write('<script src="//' + (location.host || 'localhost').split(':')[0] + ':35929/livereload.js?snipver=1"></' + 'script>')</script><script>document.addEventListener('LiveReloadDisconnect', function() { setTimeout(function() { window.location.reload(); }, 500); })</script></body>
</html>四、加载效果
操作视频详见：